使用CSS3的rem属性制作响应式页面布局的要点解析

        font-size: 109%!important; /* 17.44÷16=109% */  

    }   

}   

@media only screen and (min-width: 641px){   

    html {   

        font-size: 125%!important; /* 20÷16=125% */  

    }   

}  

给margin padding 设置rem
    上面展示的是怎么通过计算获取到不同分辨率下的html font-site百分比的值。实际开发如果设计师是按照640的宽度去设计的，我们就按照最大的640去切图，切图的时候如果我们要设置margin怎么banner，设计图的值加入是10px的间距，我们通过640的比例去计算：

CSS Code复制内容到剪贴板

margin-top:.5rem; /*10 ÷ 20 = 0.5*/  

padding-top:1rem /* 20 ÷ 20 =1 */  

上面分别是设计图上的间距10px和20px计算成rem的方法，大家可以以此类推，如果你的设计图是640设计的就可以用上面的方法，反正每次以最大的值来计算就可以了。

给height width 设置rem
    实际开发中大家最常设置的估计就是height width值了，为了做到各个设备下长度自己相应，许多开发人员会用百分比来做，这个是没有问题，但是其实很多场景下用rem比百分比更加灵活，在我实际开发中，一般我只在大块的div布局里面用百分比，元素的设置一般都用rem来。例如：

CSS Code复制内容到剪贴板

height:100px; /* 100 ÷ 20 = 5rem;*/  

width:50px; /* 50 ÷ 20 = 2.5rem;*/  

给border 设置rem
其实就连border我们也可以用rem来做，但是貌似现在的安卓手机对border用rem单位有一小部分不支持，在我开发测试发现了，高版本的安卓浏览器支持，但是低版本的有许多都不支持，具体要不要使用就看你们自己的情况。

CSS Code复制内容到剪贴板

border:.2rem solid #cccccc;  

需要注意的是：
网页要多终端匹配，传统字体单位px满足不了，考虑使用rem单位

rem 是相对于根节点的！

为此，如下代码，先让根节点单位为10px，之后就方便使用rem了

CSS Code复制内容到剪贴板

html { font-size: 62.5%; }    

body { font-size: 1.4rem; } /* =14px */  

h1   { font-size: 2.4rem; } /* =24px */  

非常好的是，rem ie9支持

如要兼容ie9以下浏览器，可

CSS Code复制内容到剪贴板

html { font-size: 62.5%; }    

body { font-size: 14px; font-size: 1.4rem; } /* =14px */  

h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */  

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!