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/
文本大多为摘录或总结,如影响到原创利益问题,请联系我删除!
rem和em的用法的更多相关文章
- css 中的position z-index em rem zoom 的基本用法
1.position定位: CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. ...
- css3中rem和em是干嘛的
css3中rem和em是干嘛的 一.总结 一句话总结:对rem综合评价是用来做web app它绝对是最合适的人选之一. 这里我特别强调web app,web page就不能使用rem吗,其实也当然可以 ...
- rem、em、px的区别
px 像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. 特点: 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或re ...
- 浅谈rem、em、px
1.px:像素(Pixel) px是相对长度单位,他是相对于显示器屏幕分辨率而言的 优点:比较稳定.精确 缺点:在浏览器 中放大或者缩小浏览页面,会出现页面混乱的情况. 如下例子: .buttonPX ...
- rem和em和px vh vw和% 移动端长度单位
1.rem和em.px 首先来说说em和px的关系 em是指字体高度 浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写的font-size:65%; 这样em就成 ...
- 从理解开始 谈谈px rem 和 em 的区别与联系
概述 古语有云,没有规矩则不成方圆.秦灭六国之后为了促进国内生产力的发展,也是大力推进全国度量衡的统一.车同轨,书同文.与"尺寸"相关的问题(手动滑稽),从古至今一直为人们所关注. ...
- CSS 中的rem,em,vh,vw一次说清楚
关于css中的长度单位,我们用的最多就是px,因为他简单直接.但是当一套方案匹配不同终端时,px就会显得过于生硬,不容易变通. 然而rem,em,vh,vw就可以有效的解决这一问题.让我们来看看这些东 ...
- 【译】REM vs EM - 世纪之争
原文链接:https://zellwk.com/blog/rem-vs-em/ 在网络上排版的最佳做法之一是使用像rem和em这样的相对单位. 问题是,你应该使用哪个? 在rem支持者和em支持者之间 ...
- rem和em学习笔记及CSS预处理(未完待续)
以下为读http://www.w3cplus.com/css/when-to-use-em-vs-rem.html的感悟,收获满满! 1.当元素A的字体单位是n rem时,它将根据根元素(html)的 ...
随机推荐
- Winform访问本地SQLServer数据库文件
Winform访问本地SQLServer数据库文件 1.项目中添加config配置,如下: <configuration> <connectionStrings> <ad ...
- 面试准备之三Django知识
Django请求流程 MTV模式 路由 视图 ORM 模板
- 如何在 Azure 中的 Linux 经典虚拟机上设置终结点
在 Azure 中使用经典部署模型创建的所有 Linux 虚拟机都可以通过专用网络通道与同一云服务或虚拟网络中的其他虚拟机自动通信. 但是,Internet 或其他虚拟网络中的计算机需要终结点将入站网 ...
- 记一次JVM调优之旅(斗争full gc)
俗话说技多不压身,当年苦读<深入理解JVM>还专门整理了笔记,现在就用上了- 笔记 http://www.cnblogs.com/syjkfind/p/3901774.html [症状] ...
- ping -l 1000 -t 与ping -t的区别
windows -l 1000的意思是规定发送的包的大小是1000字节如果不加这个参数的话,就发送包默认为32字节还有-t就是一直发送,直到手动停止
- create-react-app部署到GitHub Pages时报错:Failed to get remote。origin.url
最近使用create-react-app脚手架开发了一个私人博客:点击跳转,在部署到GitHub Pages的时候报了一个错误,具体如下: 在create-react-app的GitHub库的issu ...
- 大数因式分解 Pollard_rho 算法详解
给你一个大数n,将它分解它的质因子的乘积的形式. 首先需要了解Miller_rabin判断一个数是否是素数 大数分解最简单的思想也是试除法,这里就不再展示代码了,就是从2到sqrt(n),一个一个的试 ...
- 20165322 第七周 mybash 的实现
mybash的实现 要求 使用fork,exec,wait实现mybash 写出伪代码,产品代码和测试代码 发表知识理解,实现过程和问题解决的博客 相关函数的作用 fork fork()函数通过系统调 ...
- windows8安装msi软件提示2503错误的解决办法
windows8以后的版本安装msi软件(比如nodejs.msi.Git.msi.python.msi.T ortoiseSVN.msi)的时候老师出现2503.2502的错误,究其原因还是系统权限 ...
- Server.xml解析
来源 本文整理自 <Tomcat内核设计剖析>.<Tomcat结构解析> 加上自己的理解.源码来自 Tomcat8.5 版本 <Server port="800 ...