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/

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

rem和em的用法的更多相关文章

  1. css 中的position z-index em rem zoom 的基本用法

    1.position定位: CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. ...

  2. css3中rem和em是干嘛的

    css3中rem和em是干嘛的 一.总结 一句话总结:对rem综合评价是用来做web app它绝对是最合适的人选之一. 这里我特别强调web app,web page就不能使用rem吗,其实也当然可以 ...

  3. rem、em、px的区别

    px 像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. 特点: 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或re ...

  4. 浅谈rem、em、px

    1.px:像素(Pixel) px是相对长度单位,他是相对于显示器屏幕分辨率而言的 优点:比较稳定.精确 缺点:在浏览器 中放大或者缩小浏览页面,会出现页面混乱的情况. 如下例子: .buttonPX ...

  5. rem和em和px vh vw和% 移动端长度单位

    1.rem和em.px 首先来说说em和px的关系 em是指字体高度 浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写的font-size:65%; 这样em就成 ...

  6. 从理解开始 谈谈px rem 和 em 的区别与联系

    概述 古语有云,没有规矩则不成方圆.秦灭六国之后为了促进国内生产力的发展,也是大力推进全国度量衡的统一.车同轨,书同文.与"尺寸"相关的问题(手动滑稽),从古至今一直为人们所关注. ...

  7. CSS 中的rem,em,vh,vw一次说清楚

    关于css中的长度单位,我们用的最多就是px,因为他简单直接.但是当一套方案匹配不同终端时,px就会显得过于生硬,不容易变通. 然而rem,em,vh,vw就可以有效的解决这一问题.让我们来看看这些东 ...

  8. 【译】REM vs EM - 世纪之争

    原文链接:https://zellwk.com/blog/rem-vs-em/ 在网络上排版的最佳做法之一是使用像rem和em这样的相对单位. 问题是,你应该使用哪个? 在rem支持者和em支持者之间 ...

  9. rem和em学习笔记及CSS预处理(未完待续)

    以下为读http://www.w3cplus.com/css/when-to-use-em-vs-rem.html的感悟,收获满满! 1.当元素A的字体单位是n rem时,它将根据根元素(html)的 ...

随机推荐

  1. 【Android】移动项目位置

    一.前言 有时候,我们新建一个项目后,因为一些原因想要重新移动项目到别的文件夹.然而,移动到新的文件夹后,却发现之前好好的项目运行不了.点击运行后,弹出如下对话框.  Installation fai ...

  2. mysql 更新sql报错:You can't specify target table 'wms_cabinet_form' for update in FROM clause

    数据库里面有两个字段的位置不对,要把他们对调换下.因为没有数据库写的权限,需要用sql语句来实现.原来以为简单的 update table a set a.字段a=(select b字段 from t ...

  3. kivy.org - Open source Python library for rapid development of applications

    kivy.org - Open source Python library for rapid development of applicationsthat make use of innovati ...

  4. mysql登录:access denied for user 'root'@'localhost'(using password:YES)

    mysql登录: access denied for user 'root'@'localhost'(using password:YES) 解决: use mysql; select user,ho ...

  5. 获取所有权windows目录所有权

    Takeown /r /f 盘符:\目录\目录 例如: Takeown /r /f C:\Windows\CSC

  6. July 16th 2017 Week 29th Sunday

    Opportunities are like sunrises, if you wait too long, you miss them. 机会如同日出,等得太久就会错过. Indecision is ...

  7. January 23 2017 Week 4 Monday

    Knowledge is long, life is short. 吾生也有涯,而知也无涯. I often feel that I have a lot of things to learn, ne ...

  8. ZT ANDROID jni 中的事件回调机制JNIenv的使用 2012-09-10 12:53:01

    ANDROID jni 中的事件回调机制JNIenv的使用 2012-09-10 12:53:01 分类: 嵌入式 android framework 里java调用native,使用JNI机制,ja ...

  9. 防护XSS

    http://blog.csdn.net/kouwoo/article/details/41946683 http://www.2cto.com/article/201309/247100.html ...

  10. 一个关于JSON的异常,获取List对象失败的。。。

    重要的事情放在最前面,,以后不管遇到什么异常都一定要把异常读懂再想办法怎么解决,把异常读懂,异常读懂...... 这个异常我记得以前遇到过,而且好像已经做了笔记,,,,,今天翻了一下竟然没有,,,,, ...