文档章节

css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况

 蚂蚁智勇
发布于 2017/08/30 10:49
字数 380
阅读 161
收藏 0

最近在学习使用vw和vh单位,觉得有必要了解一下各个单位之间区别以及不同浏览器的支持情况。。。

px:绝对单位,页面按精确像素展示

em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。

rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持

注:chrome强制最小字体为12号,即使设置成 10px 最终都会显示成 12px,当把html的font-size设置成10px,子节点rem的计算还是以12px为基准,所以网上很多文章提到的将html的font-size设为10方便计算不是那么可取。

vw、vh、vmin、vmax 使用的前提是在移动端的前提下,即首先申明个<meta>的缩放比例

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%。

vh:viewpoint height,视窗高度,1vh等于视窗高度的1%。

vmin:vw和vh中较小的那个。

vmax:vw和vh中较大的那个。

上面四个单位在各浏览器中的支持情况:IE9+局部支持,chrome/firefox/safari/opera支持,iOS safari 8+支持,Android browser4.4+支持,chrome for android39支持

© 著作权归作者所有

共有 人打赏支持
粉丝 0
博文 1
码字总数 380
作品 0
杭州
私信 提问
css3中的一些特别的单位:em、rem、vw、vh、vmin、vmax

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

尼古拉斯-赵四
2016/05/20
93
0
【CSS笔记】— 使用calc()计算宽高(vm/vh)

【CSS笔记】— 使用calc()计算宽高(vm/vh) calc()是什么? 简单来说就是CSS3中新增的一个函数,calculate(计算)的缩写。用于动态计算宽/高,你可以使用calc()给元素的各个属性设置值【m...

筱筱酱
2018/12/19
0
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
理解css中的长度单位

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

哈狮子
2016/10/18
3
0

没有更多内容

加载失败,请刷新页面

加载更多

ToolBar控件在C#开发APP中的使用方式【附案例源码】——Smobiler移动开发平台

控件说明 底部工具栏控件。 效果演示 其他效果 该界面为仿淘宝UI制作的一个简单的UI模板,源码获取方式请拉至文章末尾。 特色属性 属性 属性说明 Direction(相对布局) 容器主轴方向。 Flex...

amanda112
17分钟前
0
0
模块

AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等...

gtandsn
23分钟前
1
0
代码之外的生存指南,这6本书助你提升软实力

上期盟主向大家推荐了6本技术类书籍,引起了热烈反响。那么,工作之余,还有哪些好书能够为你打开更多的精彩世界呢?本期,多位知名企业的技术大咖将继续为您带来好书推荐,在新的一年里,为...

安卓绿色联盟
27分钟前
3
0
5分钟用Jitpack发布开源库

作者: 菜刀文 Demo:https://github.com/helen-x/JitPackReleaseDemo 项目开发中会用到很多开源库, 他们一般通过Maven/Gradle依赖进来的. 演而优则唱,开发越来越溜以后, 你是否也蠢蠢欲动,想发...

SuShine
32分钟前
2
0
状态码 301 与 302的区别

302重定向只是暂时的重定向,搜索引擎会抓取新的内容而保留旧的地址,因为服务器返回302,所以,搜索搜索引擎认为新的网址是暂时的。 而301重定向是永久的重定向,搜索引擎在抓取新的内容的同...

小草先森
38分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部