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
rem单位和em单位的使用的更多相关文章
- css大小单位px em rem的转换和详解
css大小单位px em rem的转换和详解 PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能 ...
- CSS尺寸单位 % px em rem 详解
在CSS中,尺寸单位分为两类:相对长度单位和绝对长度单位.相对长度单位按照不同的参考元素,又可以分为字体相对单位和视窗相对单位.字体相对单位有:em.ex.ch.rem:视窗相对单位有:vw.vh.v ...
- 详细讲解css单位px,em和rem的含义以及它们之间的区别
一.首先介绍一下px px就是css中最基本的长度单位了,用px做单位基本上没什么问题,可以做到让页面按套路精确的展现! 可但是!但可是!如果全篇用px布局会暗藏一个蛋疼的问题,就是当用户和Ctrl滚 ...
- css单位介绍em ex ch rem vw vh vm cm mm in pt pc px
长度单位主要有以下几种em ex ch rem vw vh vm cm mm in pt pc px %,大概可以分为几种"绝对单位"和"相对单位"和" ...
- css单位px,em,rem区别
在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...
- css em单位
本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/41 为什么要有em 为了弹性布局.更准确的说是界面元素根据浏览器 ...
- Html 字体大小单位 px em pt
网页上定义字体大小有常见三种单位,px.em.pt px px是pixel缩写,是基于像素的单位.在浏览网页过程中,屏幕上的文字.图片等会随屏幕的分辨率变化而变化,一个100px宽度大小的图片,在80 ...
- 推荐font-size的单位 % em单位
在如今这个提倡可用性设计以及用户体验设计的网络时代,CSS也是要一同参与其中的.大部分人在CSS代码编写中总是先对整体定义字体尺寸,中文情况下一般为12px,而其实这样以来在通过IE顶部菜单中的“察看 ...
- em 单位
借 Lea verou 的话: 当某些值相互依赖时,应该把它们的相互关系用代码表达出来. 通常情况下,我们会希望字号和其他尺寸能够跟父元素的字号建立关联,此时em就很好的表达了这种关系. 在CSS V ...
随机推荐
- python学习4 常用内置模块
logging os 路径处理 // 获取当前路径 os.path.abspath(__file__) //获取当前文件夹路径 os.path.dirname(os.path.abspath(__fi ...
- Daily Scrum Meeting ——SecondDay(Beta)12.10
一.Daily Scrum Meeting照片 二.Burndown Chart 三.项目进展(check-in) 1. 修复两个Alpha版本所遗留的BUG 2. 着手修改参与者与发布者的侧滑框,改 ...
- log4j:WARN Please initialize the log4j system properly 问题解决
log4j:WARN No appenders could be found for logger (com.netease.qa.testng.TestngRetry).log4j:WARN Ple ...
- webpack2新特性
增加 import() 作为代码分割点:System.import已被弃用,在webpack3时会被完全移除: 内置了json加载器,不再需要单独配置了 当打包文件过大时会提示性能警告,可以用 per ...
- jQuery.rotate.js参数
CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...
- IO总结
在电脑是新建一个文件夹 File file = new File("F:\\imgs"); File file = new File("F:/imgs"); 输 ...
- windows 10 开始菜单和cortana无法工作的问题
过了个周末,到了实验室一开机发现报了个关键错误:开始菜单和cortana无法工作. 经过一番google ,发现问题,原来是360禁用了一个服务导致,这个服务是UserManager. 我直接去开启发 ...
- 来自XP的道别信
当你们看到这封信的时候,很抱歉要和大家说再见了! 亲爱的你们,对不起,请不要为我哭泣,请让我们一起度过这最后的时光. 请记住那个在蓝天白云下奔跑的我!
- 使用Jmeter录制web脚本
1:启动Jmeter: 2:选择测试计划,右键->添加->Threads(users)>线程组 3:选择这个线程组,右键->添加->配置元件->HTTP请求默认值, ...
- Python3.5 Day1作业:实现用户密码登录,输错三次锁定。
作业需求: 1.输入用户名密码 2.认证成功后显示欢迎信息 3.输错三次后锁定 实现思路: 1.判断用户是否在黑名单,如果在黑名单提示账号锁定. 2.判断用户是否存在,如果不存在提示账号不存在. 3. ...