文档章节

em,rem和vh

名字已被取
 名字已被取
发布于 2016/03/30 23:41
字数 350
阅读 57
收藏 1

概述

  • rem

root emphasize,根元素<html>的font-size

  • vw,vh

vw:屏幕宽度相关,1vw是屏幕宽度的1%
vh:屏幕高度相关,1vh是屏幕高度的1%
vmin,vmax 分别表示两者中较小和较大的部分。

  • em

基准点为父节点的font-size
如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一 个固定的值。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册) 意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。
为 了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

  • 三者兼容性
    vh,vw:ie9及其以上、safari5及其以上、android4.4及其以上等。

rem是css3属性,IE9及以上所有浏览器,安卓2.1以上版本,iOS4.0以及以上版本的safari(换句话说,IE6-8不兼容)
em是css2属性

结论

比较得出,em的缺陷较多,不宜使用。
而rem的兼容性比vh/vw稍好一些。


本文转载自:

名字已被取
粉丝 3
博文 44
码字总数 4065
作品 0
杭州
网页/平面设计
私信 提问
理解css中的长度单位

很基础的一个问题,但是,其实看起来很复杂的样子~~我们来捋一捋吧~~ css3中也对css中用到的单位进行了改进,单位也就是那几个,所以我们要搞清楚再用。 %——百分比 in——寸 cm——厘米...

哈狮子
2016/10/18
6
0
css3中的一些特别的单位:em、rem、vw、vh、vmin、vmax

em:相对父元素的单位。例:父节点font-size:20px;子节点font-size:1em;(即子节点为20px)。 rem :相对于根节点(html的字体大小)的单位。在不设定html字体大小时,会获取流浪器的默认...

尼古拉斯-赵四
2016/05/20
116
0
px,em,rem,vw单位在网页和移动端的应用

px: 是网页设计中最常用的单位,然而1px到底是多大长,恐怕没有人能回答上来 它用来表示屏幕设备物理上能显示的最小的一个点,这个点不是固定宽度的,不同设备上点的长度、比例有可能会不同...

刘元兴
2017/05/18
0
0
移动端开发, 常用CSS单位

(转)https://www.cnblogs.com/mylove103104/archive/2015/06/18/4584779.html rem "em" 单位是我们开发中比较常用到的,它表示以当前元素的父元素的单位大小为基准来设置当前元素的大小;“r...

Sunxb
2017/11/09
0
0
7个你可能不认识的CSS单位

众所周知CSS技术我们虽然很熟悉,在使用的过程却很容易被困住,这让我们在新问题出现的时候变得很不利。 随着web继续不断地发展,对于新技术新解决方案的要求也会不断增长。因此,作为网页设...

WolfX
2016/02/17
13
0

没有更多内容

加载失败,请刷新页面

加载更多

3_数组

3_数组

行者终成事
51分钟前
7
0
经典系统设计面试题解析:如何设计TinyURL(二)

原文链接:https://www.educative.io/courses/grokking-the-system-design-interview/m2ygV4E81AR 编者注:本文以一道经典的系统设计面试题:《如何设计TinyURL》的参考答案和解析为例,帮助...

APEMESH
今天
7
0
使用logstash同步MySQL数据到ES

概述   在生成业务常有将MySQL数据同步到ES的需求,如果需要很高的定制化,往往需要开发同步程序用于处理数据。但没有特殊业务需求,官方提供的logstash就很有优势了。   在使用logstas...

zxiaofan666
今天
10
0
X-MSG-IM-分布式信令跟踪能力

经过一周多的鏖战, X-MSG-IM的分布式信令跟踪能力已基本具备, 特点是: 实时. 只有要RX/TX就会实时产生信令跟踪事件, 先入kafka, 再入influxdb待查. 同时提供实时sub/pub接口. 完备. 可以完整...

dev5
今天
7
0
OpenJDK之CyclicBarrier

OpenJDK8,本人看的是openJDK。以前就看过,只是经常忘记,所以记录下 图1 CyclicBarrier是Doug Lea在JDK1.5中引入的,作用就不详细描述了,主要有如下俩个方法使用: await()方法,如果当前线...

克虏伯
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部