前端rem单位的使用研究
分析网易新闻手机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单位的使用研究的更多相关文章
- 偏前端 - 不是固定宽高,页面随设备同比 放大/缩小 展示。不妨看看rem单位,你就有眉目上手做了!!!
为什么要使用rem 之前有些适配做法,是通过js动态计算viewport的缩放值(initial-scale). 例如以屏幕320像素为基准,设置1,那屏幕375像素就是375/320=1.18以此类 ...
- WebApp开发之--"rem"单位(转)
随着web app的兴起,rem这是个低调的css单位,近一两年开始崭露头角,有许多朋友对于它的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我认为rem是用来做web app它绝对是 ...
- WebApp开发之--"rem"单位
随着web app的兴起,rem这是个低调的css单位,近一两年开始崭露头角,有许多朋友对于它的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我认为rem是用来做web app它绝对是 ...
- 移动端rem单位用法[转]
标签: 1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单 ...
- rem单位怎么使用
rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. ...
- 如何在手机项目中使用rem单位
rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. ...
- 移动端rem单位用法
1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单位.它们 ...
- rem单位和em单位的使用
今天弄了一点响应式的东西,本以为很快就可以弄好,结果还是绕晕了头,所以还是写下来方便下次看吧! 一开始我打算用百分比%来做响应式布局,后来算的很懵圈,就果断放弃了,哈哈是不是很明智. 接下来就是rem ...
- rem单位在手机网站中的使用
em单位是相对于父节点的font-size,会有一些组合的问题,而rem是相对于根节点(或者是html节点),也就是说你可以在html节点定义一个单独的字体大小,然后所有其他元素使用rem相对于这个字 ...
随机推荐
- CSS3 Media Queries 片段
CSS3 Media Queries片段 在这里主要分成三类:移动端.PC端以及一些常见的响应式框架的Media Queries片段. 移动端Media Queries片段 iPhone5 @medi ...
- C#.NET 大型信息化系统集成快速开发平台 - 手机短信开发接口 4.0
可以批量发信息给手机,相同的信息发给多个手机号码的效果图 已发送手机短信列表 可以批量发手机的功能,可以把先有的待发信息列表,直接通过批量发送功能发出 这个是设置发送模板公式的功能展示,可以设置发送的 ...
- Shell高级编程视频教程-跟着老男孩一步步学习Shell高级编程实战视频教程
Shell高级编程视频教程-跟着老男孩一步步学习Shell高级编程实战视频教程 教程简介: 本教程共71节,主要介绍了shell的相关知识教程,如shell编程需要的基础知识储备.shell脚本概念介 ...
- 【REST WCF】30分钟理论到实践
先来点理论知识,来自 http://www.cnblogs.com/simonchen/articles/2220838.html 一.什么是Rest REST软件架构是由Roy Thomas Fie ...
- 论文笔记Outline
1.Information publication: author: 2.What 3.Dataset 4.How input: output: method: 5.Evaluation: basel ...
- [转]run for a girl
上了四个星期决不情愿的自习,终于找到了她上自习的规律, 每个星期五肯定在主教楼525第三排中间,其实第一眼看见她已经喜欢她了,在她周围坐了十天之后更觉得她是我喜欢的那种女孩, (不是每天都能见到她), ...
- 东大OJ-1051-旅行家的预算
1051: 旅行家的预算 时间限制: 1 Sec 内存限制: 128 MB 提交: 27 解决: 7 [提交][状态][讨论版] 题目描述 一个旅行家想驾驶汽车以最少的费用从一个城市到另一个城市( ...
- ipython又一方便的调试和应用工具!!!
控制台下://ipython 命令丰富 比如:ls 显示目录 ipython --pylab %run -p *.py quit关闭 示例: In []: %run -p test.py H ...
- Collection中list集合的应用常见的方法
集合 : 用存放对象的容器(集合) Collection : 跟接口 : 单列集合 ---> List :有序的 ,元素是可以重复的. ---> ...
- 作业4-两人编程<词频统计>
协作:苗中峰,刘鑫成 我主要攻克排序,成哥写了文件流的使用.整合工作由我完成,成哥帮我查阅资料,避免和解决语法错误. 这次任务较作业三的变化是: * ...