移动端适配:
H5页面窗口自动调整到设备宽度,并禁止用户缩放页面。
在移动端viewport视口就是浏览器显示页面内容的屏幕区域。在
在移动端viewport视口就是浏览器显示页面内容的屏幕区域。在viewport中有两种视口,分别表示为, visual viewport(可视视口)和layout viewport(布局视口)。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no">
width = device-width:宽度等于当前设备的宽度
initial-scale: 初始的缩放比例(默认设置为1.0)
minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)
maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)
user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)
vw和vh是视口(viewport units)单位:
vw: 视口宽度 不管屏幕的分辨率是多大 ,都是固定的 100vw = 当前设备的宽
vh: 视口高度 不管屏幕的分辨率是多大 ,都是固定的 100vh = 当前设备的高
以iPhone 6 为案例: 375 * 667 ; (标准)
375px = 100% = 100vw 1vw = 1% = 3.75px
HTML: font-size:100px = 26.66667vw
以iPhone 4 为案例: 320 * 480 ;
320px = 100% = 100vw 1vw = 1% = 3.2px
HTML: font-size:100px = 31.2v
移动端布局方案:
1、rem+vw
1、需要设置meta标签
2、750px 的设计稿 要在 html{font-size:26.67vw};
3、640px 的设计稿 要在 html{font-size:31.25vw};
4、计算方式:当前元素的尺寸 / 2(dpr) / 100px = ?rem
2、flexible.js
<script src=“js/flexible.js”
说明:
此方式也是rem布局,而且计算超级简单。但是也有需要注意的地方
1、设计稿尽量是按照750的设计稿来定
2、不需要设置meta标签
3、计算方式:当前元素的尺寸/100 = rem值
优点:动态改变dpr的值来保证根元素字体的大小
改变设计稿大小:
ps -> 图像 -> 图像大小 -> 改变宽度值为750px;
图片整合:
图片整合(精灵图、css sprites、css精灵、雪碧图)
优点总结:减少对服务器的请求次数,增加页面加载速度,减小图片的体积;
优点:
(1)CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;
(2)CSS Sprites能减少图片的字节;
(3)CSS Sprites解决了网页设计师在图片命名上的困扰,只需对一张集合的图片命名,不需要对每一个小图片进行命名,从而提高了网页制作效率。
(4)CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。
缺点:
(1)图片合并麻烦:图片合并时,需要把多张图片有序的合理的合并成一张图片,并留好足够的空间防止版块出现不必要的背景。
(2)图片适应性差:在高分辨的屏幕下自适应页面,若图片不够宽会出现背景断裂。
(3)图片定位繁琐:开发时需要通过工具测量计算每个背景单元的精确位置。
(4)可维护性差:页面背景需要少许改动,可能要修改部分或整张已合并的图片,进而要改动css。在避免改动图片的前提下,又只能(最好)往下追加图片,但这样增加了图片字节。
怎么使用图片整合?
通过:background-position 实现背景图定位;让你的图片显示在应该在的位置上;
background-position 是复合式写法
background-position-x
background-position-y
整合图片的时候注意:
1、图片周围留有足够大的空间 -> 设计稿
2、图片整合 背景一定是透明的
3、一边写页面 一边整合图片 -> 不要把图片都整合完之后在去页面 ,避免图面反复发生未知变动;
4、图片最好排成一竖排、用九宫格的形式、或者放在最左边和最右边;