移动端rem布局总结（html元素单位）

rem概述：rem是相对于根元素html标签文字字号font-size的值来定的，例如，html标签的font-size设置为100px，则内部元素的宽或高为1rem，表示的该元素的宽高大小就是100px；

/*em单位：参照父标签文字字号来取值1em=父标签的font-size值*/
/*rem单位：参照根元素HTML文字字号来取值1rem=HTML的font-size值*/
/*vw单位：参照屏幕宽度1vw=视口宽度的1%*/
/*vh单位：参照屏幕高度1vh=视口高度的1%*/

在实际移动端页面开发中，设计图一般是按照iphone6/7/8的分辨率设计的，即尺寸为750*1334，（它实际设备的物理宽高为 375*667），所以我们要把测量出来的宽高尺寸除以2才是在设备上显示的实际宽高，即通常所说的2倍图；

实际的设计图中也有会用到iphone5的设计图，即分辨率是640*1136（实际物理尺寸是 320*568），这同样是2倍图，同样测量的尺寸除以2，才是实际的宽高尺寸；也有会遇到3倍图，宽度一般为1080，要把测量尺寸除以3；

对于不同的需求可以用不同的rem布局方式，现在我把自己总结较常用的三种rem布局方式写下来：

一、根元素html字体大小为100px（也可以写成625%，写成625%也表示100px； 62.5%表示10px；），固定不变，内部元素按照设计图的尺寸除以n倍的倍数，然后再除以100后，就是rem的值（这个通常用百分比布局，宽度自适应（100%），高度是设计图的一半）

html{ font-size:100px; }

有很多平台会写成：62.5%或625%，这是因为各浏览器默认字体字号为 16px，即 16px 相当于 1rem

当我们定义 10px / 16px = 0.625 = 62.5% 时，浏览器的默认字体为 16px * 62.5% = 10px

此时即 10px 相当于 1rem，至于为何不直接定义根元素的 font-size 为 10px 是为了兼容 IE6。

html{ font-size:62.5%; } -> 10px 或 html{ font-size: 625%; } -> 100px

二、根元素html字体大小根据设备的宽度，使用js动态获取（对于所有的屏幕都是等比例缩放的）：

　　//设计图为640px的rem自动匹配
　　//document.documentElement.style.fontSize = document.documentElement.clientWidth / 100 *31.25 + 'px';
　　//设计图为750px的rem自动匹配
　　document.documentElement.style.fontSize = document.documentElement.clientWidth / 100 * 26.666667 + 'px';
</script>

三、响应式，根据屏幕大小自动获取不同大小的屏幕下的html的font-size值：

/*公共media query查询 1rem初始设置为12px
dpr为2时对应750的效果图 dpr为3时对应1080的效果图
查询区间间隔暂时设置为30px 对应3倍图时 1rem大小变化1px
1080
/3 px
/36 rem
对于dpr为2的有额外百分之4.2增大的兼容*/

@media screen and (max-width: 320px) {
　　html,body { font-size: 62.5%;}
}

@media screen and (min-width: 321px) and (max-width:350px) {
　　@media screen and (-webkit-min-device-pixel-ratio: 2) {
　　　　html,body { font-size: 71.62%;}
　　}

　　@media screen and (-webkit-min-device-pixel-ratio: 3) {
　　　　html,body { font-size: 68.75%;}
　　}
}

@media screen and (min-width: 351px) and (max-width:380px) {
　　html,body { font-size: 75%;}
}

@media screen and (min-width: 381px) and (max-width:410px) {
　　@media screen and (-webkit-min-device-pixel-ratio: 2) {　　
　　　　html,body { font-size: 84.64%;}
　　}

　　@media screen and (-webkit-min-device-pixel-ratio: 3) {
　　　　html,body { font-size: 81.25%;}
　　}
}

@media screen and (min-width: 411px) and (max-width:440px) {
　　@media screen and (-webkit-min-device-pixel-ratio: 2) {
　　　　html,body { font-size: 91.15%;}
　　}

　　@media screen and (-webkit-min-device-pixel-ratio: 3) {
　　　　html,body { font-size: 87.5%;}
　　}
}

@media screen and (min-width: 441px) and (max-width:470px) {
　　@media screen and (-webkit-min-device-pixel-ratio: 2) {
　　　　html,body { font-size: 97.66%;}
　　}

　　@media screen and (-webkit-min-device-pixel-ratio: 3) {
　　　　html,body { font-size: 93.75%;}
　　}
}

@media screen and (min-width: 471px) and (max-width:500px) {
　　@media screen and (-webkit-min-device-pixel-ratio: 2) {
　　　　html,body { font-size: 104.17%;}
　　}

　　@media screen and (-webkit-min-device-pixel-ratio: 3) {
　　　　html,body { font-size: 100%;}
　　}
}

@media screen and (min-width: 501px) and (max-width:539px) {
　　@media screen and (-webkit-min-device-pixel-ratio: 2) {
　　　　html,body { font-size: 110.68%;}
　　}

　　@media screen and (-webkit-min-device-pixel-ratio: 3) {
　　　　html,body { font-size: 106.25%;}
　　}
}

@media screen and (min-width: 540px) {
　　html,body { font-size: 150%;}
}

移动端rem布局总结（html元素单位）

猜你喜欢