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

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

接下来就是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. html学习第三天—— 第12章——css布局模型

    清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...

  2. .NET 项目代码风格要求

    原文:http://kb.cnblogs.com/page/179593/ 项目代码风格要求 PDF版下载:项目代码风格要求V1.0.pdf 代码风格没有正确与否,重要的是整齐划一,这是我拟的一份&l ...

  3. DelphiXE10.1自定义控件添加图标方法

    1 在资源文件中加入个24*24的BMP图片,命名为控件的类名(全大写包括T)        2 项目文件中加入对应的 {$R *.dres} 缺省为项目文件同名,自动加入到项目文件(Projrct- ...

  4. mac osx Forbidden You don't have permission to access / on this server解决方法

    (1)首先查看*.conf 是否有读写权限,如果没有要将文件赋予读写权限,比如 localhost.conf (2)再查看/Users/username/Sites/localhost/文件夹是否有i ...

  5. 给notepad++添加右键菜单

    Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\*\Shell\NotePad++] [HKEY_CLASSES_ROOT\*\Shel ...

  6. js实现输入框数量加减【转】

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 移动端常用的meta

    1. 禁止缩放:<meta name="viewport" content="width=device-width, initial-scale=1.0, maxi ...

  8. centos7 解决ftp和apache运行目录权限冲突问题

    1.将ftp用户加入到apache用户组 usermod -a -G apache ftpadmin ftpadmin 为ftp用户 2.设置网站根目录/var/www的所有组为apache chow ...

  9. JavaScript固定宽高

    固定高宽:  <script type="text/javascript">         if (/Android (\d+\.\d+)/.test(navigat ...

  10. Java 中类型转换

    int -> String int i=12345; String s=""; 第一种方法:s=i+""; 第二种方法:s=String.valueOf( ...