“Yeah It’s on. ”
viewport
打好CSS布局的基础
如今可以绝大部分浏览器里（即主流的安卓浏览器和ios），都支持对viewport的一个控制了。一般的，我们会这么写。
1
2
3
4
5
6
7
8
9
- viewport默认有6个属性
- width: 设置viewport的宽度（即之前所提及到的，浏览器的宽度详），这里可以为一个整数，又或者是字符串"width-device"
- initial-scale: 页面初始的缩放值，为数字，可以是小数
- minimum-scale: 允许用户的最小缩放值，为数字，可以是小数
- maximum-scale: 允许用户的最大缩放值，为数字，可以是小数
- height: 设置viewport的高度（我们一般而言并不能用到）
- user-scalable: 是否允许用户进行缩放，'no'为不允许，'yes'为允许
如：<meta name="viewport" content="width=device-width,user-scalable=no，initial-scale=0.5,minimum-scale=0.5,maximum-scale=0.5">
关于我们的设备
1.需要了解的以下三个概念:
- PPI:Pixels Per Inch缩写,表示的是每英寸所拥有的像素数目
- DPR: 默认缩放为100%的情况下，设备物理像素和CSS像素(逻辑像素)的比值，即物理像素/逻辑像素
- Resolution: 就是我们常说的分辨率
2.物理像素与逻辑像素:
1
2
3
4
5
看了我们上面内容，或许有些人会有些疑问，我的安卓手机，或者iphone6plus(目前应该仅限于这一款机型吧)，买回来的是1920x1080的或者其他更高的，比我之前所谓的那个viewport默认的980px要大。
这样的问题，也就是我之前所说的物理像素与逻辑像素的关系了（即DPR）。以1920x1080为例，1080为物理像素，而我们在viewport中，获取到的，比如"width-device"，是逻辑像素。所以之前viewport的默认值，所比对的大小，其实是逻辑像素的大小，而非物理像素的大小。
以iphone6为例，在不做任何缩放的条件下，iphone6的获取到的'width-device'为375px,为屏幕的逻辑像素。而购买时我们所知的750px，则为屏幕的物理像素。
3.CSS的问题:
1
有了上面第二点的一些基础，还是以iphone6为例，我们可以知道，其实我们所写的1px，在iphone6上为2px的物理像素。所以，最后的，给出一个结论。就是我们写的1px，在移动端，是逻辑像素的1px，而非物理像素的1px。
使用rem布局
这里先了解一下常用的一些单位：
- px: 绝对单位，固定值
- %:相对单位 在宽度计算上还是不错的，但是高度上就比较麻烦
- em:相对单位 根据自身或者父级字体大小进行计算
- 相对单位 r = root -> html 依赖简单，只受html的字体大小的影响。
-
到这里就是我们的重点，rem是相对根元素，所以我们可以根据屏幕宽度 来设置根元素html 的字体大小，从而使用rem 单位进行布局： -动态获取屏幕宽度设置字体大小的代码：
var initScale = 1 / window.devicePixelRatio; document.write(‘’)
console.log(window.document.documentElement.clientWidth);
var initWidth = window.document.documentElement.clientWidth; document.getElementsByTagName(‘html’)[0].style.fontSize = initWidth / 10 + ‘px’;
然后，我们就可以在页面布局中使用rem 为单位，实现动态布局，以适应屏幕尺寸。
都是个人经验总结，如有问题，及时反馈，谢谢大家支持
要每天多努力一些，比别人多努力一个小时。
