做网页时,我们通常需要考虑到不同电脑屏幕尺寸,以及不同手机屏幕大小等问题,解决样式发生改变的情况,那么如何解决呢?现在主要是采用自适应来解决高度,宽度的,以及图片自适应问题,下面就PC端和移动端来总结一下,通常进行自适应高度和宽度,图片时,一般与页面的布局存在关系。
1、最小尺寸分辨率1024*768(传统17寸显示器),则可以采用940px、960px、或者常用的980px作为最小宽度
2、1024768之后稍大的分辨率就是1280768了,则可以采用1200px或者1220px作为稍大的网页宽度
3、支持css3、html5的高级浏览器可以利用CSS3 Media Queries让网页在不同分辨率下自动调节布局标签
4、不支持css3、html5的脑残浏览器特别是<=ie8系列则需要用js以及resize事件来控制html的布局标签宽度了
5、宽度自适应需要对每个显示模块进行不同宽度的计算,在做html布局时需要大量的计算与适配。
6、宽度自适应为不同宽度显示器写布局元素时常用的css
下面我们看下,如何用js和css来自适应屏幕的大小。
一:了解高度和宽度的基础
下面用图片来说明:
网页可见区域高宽为:document.body.clientHeight||document.body.clientWidth
网页正文的区域高宽为:document.body.scrollHeight||document.body.scrollWidth(包括滚轮的长度)
网页被卷去的上左区域:document.body.scrollTop||document.body.scrollLeft
做网页时,我们通常需要考虑到不同电脑屏幕尺寸,以及不同手机屏幕大小等问题,解决样式发生改变的情况,那么如何解决呢?现在主要是采用自适应来解决高度,宽度的,以及图片自适应问题,下面就PC端和移动端来总结一下,通常进行自适应高度和宽度,图片时,一般与页面的布局存在关系。1、最小尺寸分辨率1024*768(传统17寸显示器),则可以采用940px、960px、或者常用的980px作为最小宽度2、1024...
[code="javascript"]function getType(){
var img = document.getElementById("img");//根据id获得需要改变大小的
图片
标签
if(navigator.userAgent.indexOf("iPhone") != -1) {
img.offsetHeight = document.body.clientH...
首先我们看看HTML中的
图片
是如何自适应屏幕的:
让
图片
自适应屏幕大小最简单的方法,保证管用,你把那个
图片
写在div里面的背景里,也就是background:url(../img/1.jpg) center no-repeat;
这样就能够自适应屏幕大小了,而且不会出现横向的滚动条
首先是
设置
background:url(
图片
地址) 0 0 no-repeat scroll transparent;background-size:100% 100%;
打造全网web前端全栈资料库(总目录)看完学的更
Van-image是一个Vue.
js
组件,可以实现
图片
懒
加载
和处理
图片
地址的功能。它可以根据需要
加载
图片
,减少页面的
加载
时
间,提高用户体验。同
时
,它还可以处理
图片
地址,将不同尺寸的
图片
进行适配,提高网站的响应速度。
以下是使用van-image实现懒
加载
和加工
图片
地址的步骤:
1. 安装van-image组件
可以使用npm或yarn来安装van-image组件:
npm install van-image --save
yarn add van-image
2. 在Vue项目中引入van-image组件
在需要使用van-image组件的组件中引入:
```javascript
import VanImage from 'van-image';
export default {
components: {
VanImage
3. 使用van-image组件
在模板中使用van-image组件,并传递所需的属性:
```html
<van-image
:lazy-load="true"
:src="imageUrl"
:fit="fit"
:width="width"
:height="height"
:quality="quality"
其中,属性解释如下:
- `lazy-load`:是否开启懒
加载
,默认为true。
- `src`:
图片
地址,必须。
- `fit`:
图片
自适应方式,可选值有contain、cover、fill、none、scale-down,默认为contain。
- `width`:
图片
宽度,可选。
- `height`:
图片
高度,可选。
- `quality`:
图片
质量,可选值有low、medium、high,默认为medium。
4. 使用van-image对
图片
地址进行加工
可以通过在
图片
地址中加入参数来实现对
图片
的加工,例如:
```html
<van-image
:src="`${imageUrl}?x-oss-process=image/resize,w_750,h_500`"
上述代码中,通过在
图片
地址后添加`?x-oss-process=image/resize,w_750,h_500`参数,对
图片
进行压缩和
缩放
处理,将
图片
的宽度
缩放
到750像素,高度
缩放
到500像素。
通过以上步骤,就可以使用van-image实现
图片
懒
加载
和对
图片
地址进行加工的功能了。