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

  • 相关阅读:
    uWSGI, Gunicorn, 啥玩意儿?
    Internet设置->连接选项卡->局域网(LAN)设置 某些设置由系统管理员进行管理
    windows下python2和python3共存
    python3.5之输出HTML实体字符
    python3.5之string
    js获取本周、本月、本季、本年的第一天
    滚动加载图片(懒加载)实现原理
    构造函数模式实现拖拽效果
    图片轮播之面向过程写法
    适用grunt的注意点
  • 原文地址:https://www.cnblogs.com/anniey/p/6233617.html
Copyright © 2011-2022 走看看