zoukankan      html  css  js  c++  java
  • rem单位和em单位的使用

    今天弄了一点响应式的东西,本以为很快就可以弄好,结果还是绕晕了头,所以还是写下来方便下次看吧!

    一开始我打算用百分比%来做响应式布局,后来算的很懵圈,就果断放弃了,哈哈是不是很明智。

    接下来就是rem单位的出场了,用拿到的px换算就好了,是不是炒鸡简单呢。

    一)rem单位使用步骤:

    1、确定基数:一般10px,自己记住就行,不用写进代码里

    2、html {font-size:百分数;}    

      百分数=基数/16  

      基数10    百分数62.5%

      基数14    百分数87.5%

    3、px换算rem   公式=拿到的px值/基数

      也就是说,当你设置 html {font-size:62.5%;},你想给容器里的文字设置字号14px,换算成rem就是14px/10——1.4rem 这样子

      (如果自己想要测试的话,拿火狐Firebug测试,因为Chrome下字号低于12px失效哈,如果想设置小于12px的字号,Chrome也有解决方案,自己百度就好)

    二)如果你使用的是em单位,请记住:

      1、用em就给body设置font-size

      2、要使用, body {font-size:14px;} 设置body,给定盒子宽度28px,则得到em 的就是   28px/14px=2em 啦。

    三)总结下

      用rem就给html设置{font-size:百分数;},用em就给body设置{font-size:14px;} ;

      反正他们两个互不影响,想怎么用就怎么用。

      提醒大家,换算时千万要看准,不要算晕了。

    (PS:如有错误,欢迎前来讨论哈!)

    附上参考博文链接:

    http://www.cnblogs.com/dreamsboy/p/5656009.html

    http://www.cnblogs.com/YYvam1288/p/5123272.html

  • 相关阅读:
    廖大python实战项目第六天
    廖大python实战教程第七天
    廖大python实战项目第五天
    Map的遍历方法及字符计数
    事务详解
    java设计模式详解
    程序员常见一些英文缩写
    Hibernate小笔记
    Myeclipse有关的问题
    hibernate对象的三种状态及转换
  • 原文地址:https://www.cnblogs.com/anniey/p/6233617.html
Copyright © 2011-2022 走看看