CSS新手向的知识点<五>

阅读本篇文章,你将大致了解到手机专用的自适应方案--移动端REM的应用

什么是rem

  • css中长度单位有很多,比如:px,em,rem,vh,vw,ex,in,pt等.其中rem
    是根据根元素html的font-size来确定的,所以我们可以通过用js来修
    改html里的font-size来达到自适应的效果.
    看代码



  
  JS Bin
  


效果

得到一个32px的方形.大多数的浏览器默认字体大小都是16px.
我们通过js修改html里font-size,在移动端通常让rem与窗口宽度绑定.
前加上js代码


这样就把rem与窗口宽度绑定成功了.但是要注意不能让不能给
html font-size设置小于12px的值,因为部分浏览器(如chrome)会检测这个值,
若小于12px会将其改为12px从而出bug.

效果

在完成rem与窗口的绑定后,再写元素高宽度后即可用rem单位,但是每次使用都需要自行换算,在此
可用sass在内部写个sass function减轻工作量.可以参考如何安装sass以及使用sass完成px2rem操作.

你可能感兴趣的:(CSS新手向的知识点<五>)