本文链接：https://blog.csdn.net/naxia_weiliang/article/details/104889461

移动端适配：
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