关于移动端布局的方案，我想从以下几个关键的名词说起：
像素：是指在由一个数字序列表示的图像中的一个最小单位，称为像素。
设备独立像素：设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素。
屏幕分辨率：屏幕分辨率是指屏幕显示的分辨率。屏幕分辨率确定计算机屏幕上显示多少信息的设置，以水平和垂直像素来衡量。屏幕分辨率低时，在屏幕上显示的像素少，但尺寸比较大。屏幕分辨率高时，在屏幕上显示的像素多，但尺寸比较小。
dpr：dpr是device pixel ratio缩写 设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方向
ppi：ppi是pixels per inch缩写，pixels per inch所表示的是每英寸所拥有的像素（pixel）数目。手机屏幕的PPI当达到一定数值时，人眼就分辨不出颗粒感了。
retina：是一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。
viewport：对于移动设备来讲，它指提供网页展示区域的部分。对于HTML编程语言来讲，viewport最初由Safari引入，目前大部分安卓也支持。它可以借助meta标签作为name属性的值来控制，参数如下：
<meta name="viewport" content="initial-scale=1,width=device-width,user-scalable=no,maximum-scale=1" />
- width: 设置viewport的宽度（即之前所提及到的，浏览器的宽度详），这里可以为一个整数，又或者是字符串"width-device"
- initial-scale: 页面初始的缩放值，为数字，可以是小数
- minimum-scale: 允许用户的最小缩放值，为数字，可以是小数
- maximum-scale: 允许用户的最大缩放值，为数字，可以是小数
- height: 设置viewport的高度（我们一般而言并不能用到）
- user-scalable: 是否允许用户进行缩放，'no'为不允许，'yes'为允许
方案一：百分比加rem布局
首先思考一个问题，单纯使用百分比的流式布局问题在哪里？这里我们首先要了解，设计师在制作移动端的设计稿原型时不可能每个尺寸的设备都出一版设计稿，在不同尺寸的移动设备下，单纯的使用流式布局很容易造成页面比例失调，影响美观，因此往往需要结合rem。使用rem之前有必要先了解一下em,em取决于当前元素的font-size属性值，如没有设置则遵循CSS继承性向上取父元素的font-size值，当页面嵌套较复杂时使用em会变得很困难。而rem始终取决于文档根元素的字体大小，例如：
html {font-size: 36px; } div {width: 1rem; }
这时所有的div宽度都将变为36px，rem的最大用处在于它提供一个基数，当页面其他元素基于此设置尺寸后，可以通过一些手段改变html的font-size值，来使整体风格一致。
适配不同尺寸设备修改html元素font-size的方法：
- CSS媒体查询方式
- JS动态控制
方案二：hotcss的使用
GitHub地址：https://github.com/imochen/hotcss
npm地址：https://www.npmjs.com/package/hotcss
具体的使用方法不再阐述，基本的实现原理是在html标签上注册data-dpr，通过属性选择器来进行控制。例如：
<!doctype html>
<html data-dpr="2">
<head>
<meta charset="utf-8">
<title>移动端适配原理</title>
<style>
[data-dpr="1"] #d1 {
width: 100px;
height: 50px;
background: #f00;
}
[data-dpr="2"] #d1 {
width: 100px;
height: 50px;
background: #0f0;
}
[data-dpr="3"] #d1 {
width: 100px;
height: 50px;
background: #00f;
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
此时当修改html标签data-dpr属性时div将呈现不同的颜色。
在retina屏幕下我们知道设备的dpr（devicePixelRatio）值一般大于1，常见的两个问题为：
- border：1px; 感觉比预想效果要粗。
- 按照图片尺寸来设置图片大小后图片表现模糊。
关于1像素的实现方法有很多，应用CSS3 border-image、background-image、box-shadow、渐变属性，生成伪类元素transform：scale（0.5），动态设置viewport等，这里不再详细介绍。
这里推荐在移动开发时尽量避免使用CSS sprite，虽然它确实能够减少请求数量，可处理它在retina屏幕下完美显示会比较困难。
移动端的布局有一个东西不得不提一下，就是flex，下边是我对flex属性测试的一些东西，感兴趣的可以看一下，更详细的介绍可看一下阮一峰老师关于他的介绍，Flex布局教程：语法篇，Flex布局教程：实例篇 两篇文章。
希望大家能有所收获！
168
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
