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 ...
随机推荐
- AJAX 同步异步笔记
就在刚才,做一个很简单的Demo, 预览MP4视频文件 这就是一个video标签嘛,然后再动态的给src赋值嘛.这还不是so easy? 好,说做就做.先简单的测试一下.先给src赋值一下. 嗯,可以 ...
- 【Python装饰者】在函数测试的作用
[引言] 我们经常需要多函数进行耗时测试,测试方法有许多,这里介绍装饰者的方法,提高耗时测试代码的可复用性,在其他方面的应用也是如此. [设计原则] 类应该对扩展开放,对修改关闭. [代码] (1)定 ...
- java-并发-活性
浏览以下内容前,请点击并阅读 声明 一个并发程序以适时方式执行的能力叫活性.以下部分介绍最常见的一种活性问题,死锁,并简单介绍其他两种活性问题,饥饿和活锁. 死锁 死锁描述了一种情况:两个或两个以上的 ...
- C#解析json文件的方法
C# 解析 json JSON(全称为JavaScript Object Notation) 是一种轻量级的数据交换格式.它是基于JavaScript语法标准的一个子集. JSON采用完全独立于语言的 ...
- kindeditor-4.1.3工具使用技巧:如何在编辑区上传图片并保存绝对路径
MVC项目开中用到了KindEditor图片上传工具,需要在编辑区内上传图片,并将图片的URL保存为符合如下格式地址,如http://192.168.0.111/uploadImg/imgName.j ...
- Flask下如何处理Requests 上传中文文件名的问题
一.问题的由来 最近有个项目,叫做文档服务资源中心,类似于七牛,为各个业务系统提供统一的文件资源服务,包括文件的存储.操作管理.下载.预览等.在做文件存储的时候,遇到了这个当指定上传的文件名为 ...
- C++ Primer Plus 第六版笔记
C++ Primer Plus 第六版笔记 关于对象声明的思考 转自:http://www.cnblogs.com/weiqubo/archive/2009/11/02/1930042.html C+ ...
- iOS开发UI高级手势识别器
####手势识别器 UIGestureRecognizer类 ·UITapGestureRecognizer(轻击) ·UIPinchGestureRecognizer(捏合) ·UIPanGestu ...
- python中的参数问题
python中的有默认参数和可变参数之分 默认参数arg 可变参数args, kargs 默认参数arg就是调用指定参数 可变参数*arg调用时传入的的参数会被python自动包装为列表 可变参数ka ...
- 深入super,看Python如何解决钻石继承难题 【转】
原文地址 http://www.cnblogs.com/testview/p/4651198.html 1. Python的继承以及调用父类成员 python子类调用父类成员有2种方法,分别是普通 ...