px这个像素有两层意思,
我们通常设置的px 是一种抽象的css, 在pc上, 和设配的像素是一致的,
但是在手机中, iphone高清屏, 本来一平方厘米放10个像素, 但为了色彩更清晰, 会在一平厘米堆100个像素;
就像画布一样, 同样一盒色彩染料, 分布在越大的画布, 色彩就越模糊, 分布在越小的画布上, 色彩就越清晰;
举例:
i 5 i6
640px 750px 设计稿 也是 手机设备的像素, 设计稿就是根据手机来设置的
320px 375px device-width 这个是理想视口, 注意 device-width并不是设备宽度, 而是理想视口宽度, 这里只是iPhone起名不慎
------- 以 i6为例
width = device-width 这样布局视口也变成了375;
所以如果根据750的设计稿来设置, 一个侧边栏设置成200, 在布局视口就占了一大半位置, 显然不是我们想要的;
所以需要改变 device-width 变成 750, 这样布局视口也就会根据750来显示;
但如果直接把device-width变成750, 会出现横向滚动条, 因为屏幕其实正常的css只有375;
----------
如何变成750 , 并能整个设计稿放入手机, 并且不出现滚动条? 这需要缩小initial-scale = 0.5;
这样一个css就是1个iphone6的一个物理像素了, 这个css像素实际上市比"正常的css实际宽度变小了一半", (css的个抽象概念, 所以可以缩小);
一个屏幕css宽的像素正好是 750px;
------------------------------ 现在又有一个问题, 就是设计稿都是 750 宽的; 如果缩小一半, 是可以适配 iphone6, 但是去适配 iphone5还是会出现滚动条, 因为 iphone5是320
解决这个问题, 就需要用到相对宽度, 把html 到最小的div, 所有的页面元素的宽高, 都设置成 rem;
rem是一个比例, 类似 百分比, 比如 200px的div 在 750 的设计稿 的比率是 26.6666%;
( 把设计稿 分成10分, 那么一个rem可以拥有 75个像素, 200/75 = 2.6666rem, 如果 750的设计稿, 转换成rem, 宽度就是 10个rem )
所以 2.666rem是个相对值 ,不是绝对值, 因为在不同手机 document.documentElement.clientWidth 是不同的, 所以 2.666rem代表的css宽度也是不一样的
在iphone6 是200px 在 ipone5 是 640/10 * 2.6666 = 170px;
750px 的body宽度 在 iphone5 是: 64 * 10rem = 640px , 刚刚好是 initial-scale 缩小一半后, 理想的iphon5视口;
这样就实现了一个设计稿 适配了 各种屏幕大小 dpr 的手机;