zoukankan      html  css  js  c++  java
  • rem和em的用法

    1、rem转化为向素值的方法

    rem单位转化为像素大小取决于根元素的字体大小,即HTML元素的字体大小,根元素字体大小乘以rem。

    例:根元素的字体大小 16px,10rem 将等同于 160px,即 10rem x 16px = 160px

    2、em单位如何转化为像素值

    当使用em单位时,像素的单位是em值乘以使用em单位的元素的字体的大小

    例:如果一个 div 有 18px 字体大小,10em 将等同于 180px,即 10 × 18 = 180

    总结:

    • rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。
    • em 单位基于使用他们的元素的字体大小。
    • rem 单位基于 html 元素的字体大小。
    • em 单位可能受任何继承的父元素字体大小影响
    • rem 单位可以从浏览器字体设置中继承字体大小。
    • 使用 em 单位应根据组件的字体大小而不是根元素的字体大小。
    • 在不需要使用em单位,并且需要根据浏览器的字体大小设置缩放的情况下使用rem。
    • 使用rem单位,除非你确定你需要 em 单位,包括对字体大小。
    • 媒体查询中使用 rem 单位
    • 不要在多列布局中使用 em 或 rem -改用 %。
    • 不要使用 em 或 rem,如果缩放会不可避免地导致要打破布局元素。

    需要注意的是:

            样式的reset中需先设置html字体的初始化大小为50px,这是为了防止js被禁用或者加载不到或者执行错误。

            而做的兼容样式的reset中需先设置body字体的初始化大小为16px,这是为了让body内的字体大小不继承父级html元素的50px,而用系统默认的16px

    注意:移动端前端开发调试 http://yujiangshui.com/multidevice-frontend-debug/

               文本大多为摘录或总结,如影响到原创利益问题,请联系我删除!

  • 相关阅读:
    zookeeper安装和使用
    一个最简单的Dubbo入门框架
    Dubbo Admin管理平台搭建
    Docker容器入门实践
    vue 项目安装 (入门)
    测试任何对象的某个特性是否存在 兼容js
    用户代理字符串检测呈现引擎、平台、Windows操作系统、移动设备和游戏系统 js
    React
    React (4) -- Conditional Rendering
    React (5) -- Lists and Keys
  • 原文地址:https://www.cnblogs.com/Strong-stone/p/9284963.html
Copyright © 2011-2022 走看看