一篇真正教会你开发移动端页面的文章(二)

psd图：
现在移动端的设计图一般以iphone5（640px）和iphone6（750px）为准，ps左下角放大到100%，看宽度是多少，就是以多少为准。本篇以iphone6（750px为准），其它尺寸道理一样。psd原稿按照设备像素来设计的。

iphone5理想视口像素：320*568
iphone5的设备像素是：640*1136；
dpr=2

iphone6理想视口像素：375*667
iphone6的设备像素是：750*1334；
dpr=2

dpr=设备像素个数/理想css像素个数

window的全局属性可以测试设备比：devicePixelRatio

web开发基于布局视口，现在将布局视口的宽设置为理想视口的宽，width=device-width，
所以现在你眼里的屏幕宽度对应的css像素是375*667；

实例一：
第一步
你测量了psd上一个正方形：200px*200px
你在代码写上了200*200px，打开浏览器一看，傻眼了，比例明显不对。

原因：psd原稿尺寸是按照设备像素来设计的，我们按照phone6的尺寸，所以设计稿的尺寸是iphone6的设备像素尺寸，是750*1334，而我们css中的样式是基于布局视口计算的，由于页面写上了标签
<mata name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable="no"/>
width=device-width这段代码是让布局视口等于理想视口，最终导致：布局视口是375*667px，
你写的200*200是基于750*1334，
而你的css对应屏幕的是375*667；
所以不对；
解决：100px height:100px,就正常了

第二部：
根据上面，psd总宽750px,测元素宽200px,而我们真正做页面基于布局视口，布局视口是375px，正好是设计稿的一半，所以应该将测得尺寸除以2，于是修改代码：100px*100px,现在效果一样了
但是，我们知道测得除以2,111除以2得55.5，计算机或手机没办法显示不到1像素的像素值，计算机或手机将自动补全为1，显示是56像素，这不是我们要的。

写页面的时候已经将布局视口=理想视口了
缩放比为1的dpr（devicePixelRatio）=设备/理想(屏宽css，开发者眼里的css)

元素设备像素
问题：200*200 750*1334 设计稿

元素css 理想视口屏宽
100*100 375*667 iphone6
100*100 x 414*736 7plus 比例又不一致了，所以不能直接除以2

750/414=200/x x=200*(414/750) x=测*(设备理想视口宽/psd宽)

所以：
不同的手机，布局视口（现在也等于理想视口也等于屏宽）不一样，比例又不一致了，所以不能直接除以2。直接除以2不能在所有设备显示完好

于是：如果布局视口尺寸==设备像素尺寸，那么测得尺寸可以直接用于开发页面，其它的手机，只需要进行等比缩放就OK了
如果：我们改变了理想视口尺寸的话，也就改变了布局视口尺寸，==>测得即写得；如何改变理想视口尺寸呢？如何让理想等于设备？
解答：缩放是缩小或放大css的过程，以iphone6为例，由于iphone6的dpr是2，当缩放比是1，
一个css像素尺寸对应2个设备像素尺寸，
当将一个css像素缩小到原来一半，即原来的0.5倍，缩小倍数=设备像素比的倒数；
解决：scale=1/window.devicePixelRatio 设置scale动态,保证布局永远等于设备
布局永远等于设备，就会出现测得即写得；
200px height:200px

第三步：iphone5与iphone6对比效果，由于iphone5与iphone6的设备像素不一致，ihpone6保持与设计图一致，而iphone5不一致。效果偏差
解决：利用rem

总结：
第一种方法（所测即所得）：
1、将布局视口大小设为设备像素尺寸：
var scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
原理：scale=1/window.devicePixelRatio 设置scale动态,保证布局永远等于设备，所测及所写（再转rem）

2、动态设置html字体大小：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
document.documentElement.clientWidth就是布局视口尺寸也是理想视口尺寸
3、将设计图中的尺寸换算成rem

元素的rem尺寸 = 元素的psd稿测量的像素尺寸 / 动态设置的html标签的font-size值

第二种方法是（等比缩放）：
<mata name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable="no"/>
1 已知psd尺寸，布局视口=理想视口，dpr=设备/理想，
比如：假设我们以iPhone6设计图尺寸为标准，在设计图的尺寸下设置一个font-size值为100px。
也就是说：750px宽的页面，我们设置100px的font-size值，那么页面的宽度换算为rem就等于 750 / 100 = 7.5rem。
即：font-size=100px，1rem=100px，针对750px的设计图，7.5rem；
那：font-size=clientWidth/7.5 1rem=clientWidth/7.5 ,针对布局视口clientWidth宽图， 7.5rem=clientWidth
例子如：iphone5 clientWidth=320 1rem=320/7.5=42.666666667px 写得：测/100 rem
例子如：iphone6 clientWidth=375 1rem=375/7.5=50px 2rem 写得：测/100 rem

可以通过以下JavaScript代码获取布局视口的宽度和高度：
document.documentElement.clientWidth
document.documentElement.clientHeight