目前，我们正在做移动端的项目。 你几乎不需要想为什么要这样写风格。 为什么设计稿上100px的我们直接写1rem呢？ 移动端的屏幕尺寸会有那么大的变化吗？ 为什么很容易兼容？ 要从移动终端的屏幕大小探索其原理，首先必须了解这些费解的概念。
我在网上收集了很多资料，有各种各样的说法。 我用自己的理解整理了这篇文章。 如果有理解错误的地方的话，请指出来。
屏幕大小
也就是说，我们通常说的尺寸是多少英寸？ 屏幕对角线的长度。 例如iphone6的屏幕尺寸是4.7英寸
设备像素DP (设备像素) ) ) )。
很多地方也被称为设备的屏幕大小、设备的物理像素、屏幕分辨率等，感觉像是一个概念。 例如，iphone6是1334*750
像素密度PPI (像素密度) )。
屏幕上每英寸的像素数取决于屏幕。 PPI越是大屏幕，显示越清楚。 例如，iPhone 3gs的设备像素为320480，iPhone 4s的设备像素为640960。 正好是两倍，但两款手机都是3.5英寸，前者的像素密度是后者的两倍，屏幕显示更加清晰细腻。 从网上摘下一张图：
设备独立像素dips (设备独立像素) )。
有些地方被称为逻辑像素。 其实是我们正在开发的document.documentelement.clientwidth。 如果逻辑像素相同，则显示区域的内容相同。
倍率DPR(devicepixelratio ) )。
有些地方称为设备像素比。 设备像素dp与设备独立像素dips的比率。
即dpr=dp/dips
倍率和逻辑像素
概念介绍结束了，我们来研究一下这两者的关系吧。 下面的例子是在网上看到的，感觉说明得比较清楚。
以iphone3gs (倍率1 )和iphone4s为例。 屏幕尺寸均为3.5英寸，大小相同，但分辨率相差两倍。 那么，在PC网页上考虑的话，iphone3gs的屏幕分辨率为320480，iphone4s为640960，iphone4s显示的内容应该比iphone3gs显示的内容多。 下图：
但是，实际上显示的是相同的内容。 为什么会这样呢？ 这是因为Retina屏幕使用22像素作为1像素。 例如，44像素的顶部导航栏在Retina屏幕上显示为88像素高。 界面元素都变成了两倍大，反而和3gs效果一样。 画质更清晰。
我们的设计稿是以iphone6为基准制作的，但iphone6的屏幕像素宽度为750px，逻辑像素为375px。 那么，为什么我们的设计稿是750px宽呢？ 因为剪切时得到的图像是页面的两倍大。 在retina的画面上，实际上是将图像缩小了两倍，可以看到更清晰的图像。 如果使用375px的图像，retina画面上会显示出和倍率1的画面一样的意义，不是很细腻。
我们现在的屏幕配合方法是
我们的_reset.less文件包含媒体查询代码
html{ font-size: 312.5%； }
@ mediascreenand (max-width :359 px ) and ) Orientation:portrait )
html { font-size: 266.67%； }
}
@ mediascreenand (min-width :360 px ) and ) max-width3360374px ) and ) orientation:portrait ) {
html { font-size: 300%； }
}
@ mediascreenand (min-width :384 px ) and ) max-width3360399px ) and ) orientation:portrait ) {
html { font-size: 320%； }
}
@ mediascreenand (min-width :400 px ) and ) max-width3360413px ) and ) orientation:portrait ) {
html { font-size: 333.33%； }
}
@ mediascreenand (min-width :414 px ) and ) max-width:431px ) and ) orientation:portrait ) {
html { font-size: 345%； }
}
@ mediascreenand (min-width :432 px ) and ) max-width3360479px ) and ) orientation:portrait ) {
html { font-size:360%； }
}
@ mediascreenand (min-width :480 px ) and ) max-width3360639px ) and ) orientation:portrait ) {
html{ font-size:400%； }
}
@ mediascreenand (最小宽度：640 px )和(定向：端口) ) ) ) ) )。
html{ font-size:533.33%； }
}
后面的百分比是怎么来的呢？
312.5%这个基本值是为了便于计算
页面的字体默认为16px。 如果根节点字体设置为312.5%，则16*312.5%=50px。 对应于设计原稿上的100px，设计原稿上的100px的要素在样式表中写1rem就可以了。
如果在不同的屏幕大小(指逻辑像素)下按比例调整根节点的字体，页面将按比例缩放。 那么，在不同大小的画面上看到的页面效果是一样的。 这个比率是怎么计算的呢？ 拿吧
@ mediascreenand (min-width :360 px ) and ) max-width3360374px ) and ) orientation:portrait ) {
html { font-size: 300%； }
}
在此范围内，65375/360(*312.5 )=300 )，得到这个比例。
PS:其实并不是这个媒体查询最终能起作用的，它的存在只是为了防止在没有加载js时页面先被渲染，然后在加载js后页面样式发生太大的变化，从而导致页面跳转最终的作用是以下js代码：
请稍后阅读(单击此处() )感受一下移动端开发规范
$(html ) ).CSS ) font-size )， document.documentelement.clientheight/documentelement.clientwidth1(document.documentelement.clientheion )
//1屏幕全屏布局时使用，在短屏幕上自动缩放
//$(html ) ).CSS ) font-size )，document.documentelement.clientwidth/375 * 312.5 ) % )； //长页时使用。 不缩放