今天弄了一点响应式的东西,本以为很快就可以弄好,结果还是绕晕了头,所以还是写下来方便下次看吧!

一开始我打算用百分比%来做响应式布局,后来算的很懵圈,就果断放弃了,哈哈是不是很明智。

接下来就是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单位的使用的更多相关文章

  1. css大小单位px em rem的转换和详解

    css大小单位px em rem的转换和详解 PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能 ...

  2. CSS尺寸单位 % px em rem 详解

    在CSS中,尺寸单位分为两类:相对长度单位和绝对长度单位.相对长度单位按照不同的参考元素,又可以分为字体相对单位和视窗相对单位.字体相对单位有:em.ex.ch.rem:视窗相对单位有:vw.vh.v ...

  3. 详细讲解css单位px,em和rem的含义以及它们之间的区别

    一.首先介绍一下px px就是css中最基本的长度单位了,用px做单位基本上没什么问题,可以做到让页面按套路精确的展现! 可但是!但可是!如果全篇用px布局会暗藏一个蛋疼的问题,就是当用户和Ctrl滚 ...

  4. 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 %,大概可以分为几种"绝对单位"和"相对单位"和" ...

  5. css单位px,em,rem区别

    在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...

  6. css em单位

    本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/41 为什么要有em 为了弹性布局.更准确的说是界面元素根据浏览器 ...

  7. Html 字体大小单位 px em pt

    网页上定义字体大小有常见三种单位,px.em.pt px px是pixel缩写,是基于像素的单位.在浏览网页过程中,屏幕上的文字.图片等会随屏幕的分辨率变化而变化,一个100px宽度大小的图片,在80 ...

  8. 推荐font-size的单位 % em单位

    在如今这个提倡可用性设计以及用户体验设计的网络时代,CSS也是要一同参与其中的.大部分人在CSS代码编写中总是先对整体定义字体尺寸,中文情况下一般为12px,而其实这样以来在通过IE顶部菜单中的“察看 ...

  9. em 单位

    借 Lea verou 的话: 当某些值相互依赖时,应该把它们的相互关系用代码表达出来. 通常情况下,我们会希望字号和其他尺寸能够跟父元素的字号建立关联,此时em就很好的表达了这种关系. 在CSS V ...

随机推荐

  1. 数组中pop()和reverse()方法调用

    数组的倒序排列,可以采用reverse()和pop()方法进行排列.

  2. 如何创建独立的UE4服务端

    原文作者:@玄冬Wong 转载请注明原文出处:http://aigo.iteye.com/blog/2268777 这是论坛上对UE服务端功能的回答,意思是UE4提供了主流MMO网游服务端所具备的特性 ...

  3. 使用VisualVM检测

    下载 https://visualvm.github.io/ 检测远程服务器 转自:http://blog.csdn.net/yangkangtq/article/details/52277794 授 ...

  4. 泛型的排序问题(Collections.sort及Comparable的应用)

    一.前言    java中对泛型(集合类型)排序的问题,主要采用了两张方式一种是对要排序的实体类,实现Comparable接口,另一种方式,Collections集合工具类进行排序. 二.实现Comp ...

  5. 说说js作用域

    开始就来说说作用域这个蛋疼的东西.里面可能会出现各种的问题 .先给一个简单的例子大家猜猜结果是什么 var   a="b"; function text(){ alert(a);v ...

  6. Thinkphp3.2.3路径书写注意

    尽量不要这样写: ./public/img/a.jpg 应该这样写:__PUBLIC__/img/a.jpg 不然会引起不兼容  如首页地址 http://192.168.1.100/rjshop/时

  7. id选择器、类选择器、属性选择器

    在网页编辑时,通常要对样式进行各种设置.我们借助CSS样式设计中的选择器,就能很好很方便的对它们进行管理和设置了. 今天,跟大家分享一下几个常用的选择器:id选择器.类选择器.属性选择器. id选择器 ...

  8. Torch7 Tensor切片总结

    1.narrow(k,m,n) 这个函数是选中第k维的从m行开始,供选中n行 2.sub(dim1s,dim1e[,dim2s,dim2e,..,dim4s,dim4e]) 功能最强大,可以切任意的一 ...

  9. HTML5可视化编辑与微数据

    1.HTML 5 全局 contenteditable 属性 contenteditable 属性规定是否可编辑元素的内容. <p contenteditable="true" ...

  10. Xcode 升级后,常常遇到的遇到的警告、错误,解决方法(转)

    从sdk3.2.5升级到sdk 7.1中间废弃了很多的方法,还有一些逻辑关系更加严谨了.1,警告:“xoxoxoxo”  is deprecated解决办法:查看xoxoxoxo的这个方法的文档,替换 ...