分析网易新闻手机web端,http://3g.163.com/,发现里面大量使用了rem这个单位进行计算大小。

针对rem这个单位有如下解析:

px:像素是相对于显示器屏幕分辨率而言的相对长度单位。pc端使用px倒也无所谓,可是在移动端,因为手机分辨率种类颇多,不可能一个个去适配,这时px就显得非常无力,所以就要考虑em和rem。

em:继承父级的,假设html的font-size默认为16px,body字体大小定义为50%,那么在body里字体大小就是1em=8px了。可当你又定义了一个div,然后把字体设置成了50%,请问,现在div下的1em等于多少?因为继承了父级的值,现在这个div里的1em=4px,这么嵌套下去的话,抱歉,我数学不好!所有rem就出现了。

rem:是em的升级版,rem只会相对html的值,不会受到父级的影响,这样的好处在于:从em里的例子来讲,1rem始终会等于8px。使用的时候不需要重新计算rem此时的大小。rem因为是css3增加的,所以ie8或以下请无视。

参考:http://www.uizph.com/post-329.html?utm_source=tuicool&utm_medium=referral

前端rem单位的使用研究的更多相关文章

  1. 偏前端 - 不是固定宽高,页面随设备同比 放大/缩小 展示。不妨看看rem单位,你就有眉目上手做了!!!

    为什么要使用rem 之前有些适配做法,是通过js动态计算viewport的缩放值(initial-scale). 例如以屏幕320像素为基准,设置1,那屏幕375像素就是375/320=1.18以此类 ...

  2. WebApp开发之--"rem"单位(转)

    随着web app的兴起,rem这是个低调的css单位,近一两年开始崭露头角,有许多朋友对于它的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我认为rem是用来做web app它绝对是 ...

  3. WebApp开发之--"rem"单位

    随着web app的兴起,rem这是个低调的css单位,近一两年开始崭露头角,有许多朋友对于它的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我认为rem是用来做web app它绝对是 ...

  4. 移动端rem单位用法[转]

    标签: 1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单 ...

  5. rem单位怎么使用

    rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. ...

  6. 如何在手机项目中使用rem单位

    rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. ...

  7. 移动端rem单位用法

    1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单位.它们 ...

  8. rem单位和em单位的使用

    今天弄了一点响应式的东西,本以为很快就可以弄好,结果还是绕晕了头,所以还是写下来方便下次看吧! 一开始我打算用百分比%来做响应式布局,后来算的很懵圈,就果断放弃了,哈哈是不是很明智. 接下来就是rem ...

  9. rem单位在手机网站中的使用

    em单位是相对于父节点的font-size,会有一些组合的问题,而rem是相对于根节点(或者是html节点),也就是说你可以在html节点定义一个单独的字体大小,然后所有其他元素使用rem相对于这个字 ...

随机推荐

  1. CSS3 Media Queries 片段

    CSS3 Media Queries片段 在这里主要分成三类:移动端.PC端以及一些常见的响应式框架的Media Queries片段. 移动端Media Queries片段 iPhone5 @medi ...

  2. C#.NET 大型信息化系统集成快速开发平台 - 手机短信开发接口 4.0

    可以批量发信息给手机,相同的信息发给多个手机号码的效果图 已发送手机短信列表 可以批量发手机的功能,可以把先有的待发信息列表,直接通过批量发送功能发出 这个是设置发送模板公式的功能展示,可以设置发送的 ...

  3. Shell高级编程视频教程-跟着老男孩一步步学习Shell高级编程实战视频教程

    Shell高级编程视频教程-跟着老男孩一步步学习Shell高级编程实战视频教程 教程简介: 本教程共71节,主要介绍了shell的相关知识教程,如shell编程需要的基础知识储备.shell脚本概念介 ...

  4. 【REST WCF】30分钟理论到实践

    先来点理论知识,来自 http://www.cnblogs.com/simonchen/articles/2220838.html 一.什么是Rest REST软件架构是由Roy Thomas Fie ...

  5. 论文笔记Outline

    1.Information publication: author: 2.What 3.Dataset 4.How input: output: method: 5.Evaluation: basel ...

  6. [转]run for a girl

    上了四个星期决不情愿的自习,终于找到了她上自习的规律, 每个星期五肯定在主教楼525第三排中间,其实第一眼看见她已经喜欢她了,在她周围坐了十天之后更觉得她是我喜欢的那种女孩, (不是每天都能见到她), ...

  7. 东大OJ-1051-旅行家的预算

    1051: 旅行家的预算 时间限制: 1 Sec  内存限制: 128 MB 提交: 27  解决: 7 [提交][状态][讨论版] 题目描述 一个旅行家想驾驶汽车以最少的费用从一个城市到另一个城市( ...

  8. ipython又一方便的调试和应用工具!!!

    控制台下://ipython 命令丰富 比如:ls 显示目录  ipython --pylab %run -p *.py quit关闭     示例: In []: %run -p test.py H ...

  9. Collection中list集合的应用常见的方法

    集合 : 用存放对象的容器(集合)     Collection : 跟接口 : 单列集合          ---> List :有序的 ,元素是可以重复的.          ---> ...

  10. 作业4-两人编程<词频统计>

     协作:苗中峰,刘鑫成       我主要攻克排序,成哥写了文件流的使用.整合工作由我完成,成哥帮我查阅资料,避免和解决语法错误.              这次任务较作业三的变化是:       * ...