前端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相对于这个字 ...
随机推荐
- web app iphone4 iphone5 iphone6 iphone6 Plus响应式布局 适配代码
来源:http://www.phptext.net/article_view.php?id=387 -------------------------------------------------- ...
- ASP.NET MVC读取XML并使用ViewData显示
看到网上一个网友问及,无法获取XML某一个节点内容.下面Insus.NET在ASP.NET MVC环境下实现它. 先把XML文件放入App_Data目录,当然你可以放在自建目录中.打开看看它有几层,几 ...
- C#.NET 大型通用信息化系统集成快速开发平台 4.0 版本 - 用户权限树的实现 -- 权限递归树
业务系统里经常会需要计算类似的树形权限树的业务需求 1:往往会有一些需求,a 对 b 有权限, b对c 有权限, 等等. 2:还需要很直观的看到,整个权限的树形关系,一目了然的那种. 3:程序调用简单 ...
- ASP.NET MVC 教程-MVC简介
ASP.NET 是一个使用 HTML.CSS.JavaScript 和服务器脚本创建网页和网站的开发框架. ASP.NET 支持三种不同的开发模式:Web Pages(Web 页面).MVC(Mode ...
- SQL 批量修改表结构
项目中发现一批语言表的某个字段设的值太小了需要增大,因为涉及到很多张表,所以采用游标一张张的处理. 代码很简单 ) ) DECLARE LangTable CURSOR FOR SELECT name ...
- MySQL5.6 实现主从复制,读写分离,分散单台服务器压力
闲来无事,在本地搭建几台虚拟机,准备配一个mysql读写分离的主从配置,版本选用最新版的,mysql.5.6.28 版本,本处使用源码安装(鄙人一向喜欢源码安装,因为centos中鄙人不知道yum安装 ...
- Bootstrap系列 -- 4. 文本内容强调
一. 文本强调基本样式 .text-muted:提示,使用浅灰色(#999) .text-primary:主要,使用蓝色(#428bca) .text-success:成功,使用浅绿色(#3c763d ...
- 支持向量机通俗导论(理解SVM的三层境界)
原文链接:http://blog.csdn.net/v_july_v/article/details/7624837 作者:July.pluskid :致谢:白石.JerryLead 出处:结构之法算 ...
- JAVA内嵌数据库H2的使用入门
H2数据库是开源的,非常适合做嵌入式数据库使用,尤其用java编码的时候. H2的优势: 1.h2采用纯Java编写,因此不受平台的限制. 2.h2只有一个jar文件,十分适合作为嵌入式数据库试用. ...
- extjs5 一个容器中有几个组件公用一个控制器和一个模型
Ext.define('TestViewModel', { extend: 'Ext.app.ViewModel', alias: 'viewmodel.test', // connects to v ...