当前位置:首页 > 技术教程 > 技术文章 > 正文内容

CSS度量的单位px、rem、em、vw、vh有什么区别

atao4年前 (2020-12-25)技术文章3399

1、px

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

2、em

相对长度单位,相对于当前对象内文本的字体尺寸, 根据父元素的大小变化而变化对单位,基准点为父节点字体的大小。

em是指字体高度 浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写的font-size:62.5%; 这样em就成了16px*62.5=10em;这是显示在页面的字体大小是10px; 这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了,
em的特点 em是个相对值 他会根据父级元素的大小而变化 但是如果嵌套了多个元素 要计算它的大小,是件很头疼的事情
这样的情况下,就出现了rem rem的区别在于它是相对于根基元素的,因此不会被它的父类影响到

结论:之所以前端行业做移动端会普遍默认用rem或em,是因为可以通过js控制根元素(或者用@media)来达到适配各种分辨率的字体大小的效果

3、rem

相对长度单位,相对于跟元素( 即 html 元素)font-size 的倍数, 不会被它的父元素影响,CSS3新加属性,chrome/firefox/IE9+支持。// 是截止目前用的最多也是最流行的

rem在移动端应用可参考淘宝的页面http://m.taobao.com (html的font-size通过动态计算获取)

4、vw、vh、vmin、vmax

主要用于页面视口大小布局,相对于rem;v*在页面布局上更加方便简单

全称是 Viewport Width 和 Viewport Height,视窗的宽度和高度,相当于屏幕宽度和高度的 1%,不过,处理宽度的时候%单位更合适,处理高度的话 vh 单位更好。

5、其它的单位还有:

%:百分比

in:寸

cm:厘米

mm:毫米

pt:point,大约1/72寸

pc:pica,大约6pt,1/6寸

ex:取当前作用效果的字体的x的高度,在无法确定x高度的情况下以0.5em计算(IE11及以下均不支持,firefox/chrome/safari/opera/ios safari/android browser4.4+等均需属性加么有前缀)

ch:以节点所使用字体中的“0”字符为基准,找不到时为0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4+支持)


实际应用中:建议综合 固定宽度、字体大小可用rem、px;其他可结合vw %

扫描二维码推送至手机访问。

版权声明:本文由武景涛的博客发布,如需转载请注明出处。

本文链接:http://yizhanhongtu.cn/post/43.html

分享给朋友:

相关文章

windows系统下Composer的安装和使用

windows系统下Composer的安装和使用

Composer 是 PHP 的一个依赖管理工具。它允许你申明项目所依赖的代码库,它会在你的项目中为你安装他们。Composer 不是一个包管理器。是的,它涉及 "packages"...

什么是flex布局,它的常用属性有哪些

什么是flex布局,它的常用属性有哪些

什么是flex 布局?flex是 flexible box 的缩写,就是弹性布局的意思。任何一个元素(块元素、行内块元素、行内元素),都可以设置为弹性盒子属性。语法:块元素: display:flex...

jQuery Growl 插件(消息提醒) 弹出层插件

jQuery Growl 插件(消息提醒) 弹出层插件

jQuery Growl 插件(消息提醒) 允许您很容易地在一个覆盖层显示反馈消息。消息会在一段时间后自动消失,不需要单击"确定"按钮等。用户也可以通过移动鼠标或点击关闭按钮加快隐...

PHP开发api接口,如何做才算是安全的

PHP开发api接口,如何做才算是安全的

php的api接口在实际工作中,使用PHP写api接口是经常做的,PHP写好接口后,前台就可以通过链接获取接口提供的数据,而返回的数据一般分为两种情况,xml和json,在这个过程中,服务器并不知道,...

MySQL中,21个写SQL语句的好习惯

MySQL中,21个写SQL语句的好习惯

每一个好习惯都是一笔财富,本文分 SQL 后悔药、SQL 性能优化、SQL 规范优雅三个方向,分享写 SQL 的 21 个好习惯。1. 写完 SQL 先 explain 查看执行计划。【SQL 性能优...

thinkPHP实现微信支付之退款,附demo示例

thinkPHP实现微信支付之退款,附demo示例

此篇文章主要介绍了ThinkPHP6框架下整合微信支付之退款功能手册里面有的东西不多介绍,请求参数、返回结果之类的请移步官方手册查看。本文主要是通过一个demo实例进行讲解微信支付退款接口。手册地址:...