目录
前言
今天粉丝涨到100了，总之感谢大家的关注！
最近在学习移动端的页面布局，用的技术方案是rem+flexible.js，这篇文章就带大家一起感受下它的魅力吧~
一、移动端简介
1、什么是移动端布局
移动端布局，顾名思义，就是html在手机（或者ipad）上显示的页面布局。与PC端不同在于，需要适配各种移动端的不同屏幕尺寸（采用移动端布局技术方案），并且只需要处理webkit内核浏览器即可（兼容性好）。
2、视口
视口（viewport)就是浏览器显示页面内容的屏幕区域。视口分为布局视口、视觉视口和理想视口。
其中理想视口是移动端开发所需要的视口，利用meta标签开启，需要手动在<head></head>内添加，一般情况下开启方式如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0" />| 属性 | 解释说明 |
| width | 设置视口的宽度 |
| initial-scale | 初始缩放比，大于0的数字 |
| maximum-scale | 最大缩放比，大于0的数字 |
| minimum-scale | 最小缩放比，大于0的数字 |
| user-scalable | 用户是否可以缩放，yes或no（1/0） |
meta标签作用：将视口宽度和设备保持一致，且不允许用户自行缩放。
3、物理像素与物理像素比
物理像素指屏幕显示的最小颗粒，通俗的说，就是分辨率。
PC端：1px = 1个物理像素
移动端：1px != 1个物理像素
（移动端具有视网膜（Retina）屏幕，将更多的物理像素压缩至一块屏幕内，不同手机压缩的物理像素值不一样，一般是2个或3个。例：iPhone6/7/8分辨率750，手机尺寸375，压缩像素值为2个）
1px / 物理像素 = x，此时x称为物理像素比
4、多倍图
4.1、概念
图片具有固定px值，在视网膜（Retina）屏幕中会因物理像素比而放大，造成图片模糊。
解决办法：利用倍图提高图片质量，其中采用几倍图根据视网膜（Retina）屏幕的像素比决定，比如iPhone6/7/8采用二倍图。
多倍图使用方法（这里为了能讲明白点，直接举个栗子吧）：
我们准备在iPhone6/7/8页面显示一个50px * 50px的图片，需要我们的UI设计师准备一个100px *100px的图片，在html中引入这张100px *100px的图片，并在css中将图片尺寸定为50px * 50px即可。
注意：背景图使用多倍图的方法是利用background-size属性。
4.2、背景图
背景缩放属性：background-size 规定背景图像尺寸
| 属性值 | 作用 |
| 图片的宽度 图片的高度 |
直接给定图片尺寸，只写一个值时为宽度，图片等比缩放 |
| 百分比 | 相对于父元素进行缩放 |
| cover | 将背景图扩展至完全覆盖背景区域（可能图片显示不全） |
| contain | 将背景图扩展至其宽度和高度完全适应内容区域（可能图片不能完全覆盖） |
4.3 、精灵图
精灵图是背景图的一种，相信大家都知道了。精灵图使用多倍图时，要注意将background-position值除以图片放大的倍数，配合background-size 的使用。
5、开发选择
方案：
1、单独制作移动端页面
流式布局（百分比布局）
flex弹性布局
less+rem+媒体查询布局
rem+flexible.js布局
混合布局+
2、响应式页面兼容移动端
媒体查询
bootstrap
引入css初始化 normalize.css文件 http://necolas.github.io/normalize.css/
最低0.47元/天 解锁文章
859
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
