CSS中的REM怎么用

1、对于网页的编写大家可以用DW，也可以用sublime_text，我在这里以DW为例，打开DW。

3、首先我们需要设定一下基础，这个基础是一个参考，由于用户打开网页的设备不一样，就拿手机来说吧，屏幕的尺寸就不一样，所以会出现好多种情况，而我们的代码就是适应各种情况，根据情况的不同，页面显示也大同小异。我在这里设置的基础是15px.代码如下，html{ margin:0 auto; padding:0 auto; font-size:15px;}。

5、弄好之后，我们来看最重要的一步，就是判断用户浏览器的设备。如果用户的设备是320—360之间就显示成1r髫潋啜缅em=10px；在360—400之间就显示1rem=11.25px；在400—480，则显示1rem=12.5px等等以此类推，如果你想兼容更精确的手机屏幕，可以使用更精确的范围与屏幕。代码如下所示，@media only screen and (min-width: 320px){ html { font-size:10px !important; }}@media only screen and (min-width: 360px){ html { font-size:11.25px !important; }}@media only screen and (min-width: 400px){ html { font-size:12.5px !important; }}@media only screen and (min-width: 480px){ html { font-size:15px !important; }}@media only screen and (min-width: 640px){ html { font-size:20px !important; }}

7、由于我是在电脑上看的，屏幕的宽度大于640px；所以1rem=20px，640/20=32，所以我把图片的宽度设置成32rem;

9、这个是小于320到360像素下的效果，用了rem，可以兼容不同的设备。