文档章节

CSS单位讲解

cdgogo
 cdgogo
发布于 09/22 21:05
字数 708
阅读 10
收藏 0

像 px、rem、em、% 这样的长度单位大家肯定都很熟悉,前者为绝对单位,后者为相对单位。CSS3 又引入了新单位:vw、vh、vmin、vmax。下面对它们做个详细介绍。

单位 作用 特性
px 页面按精确像素展示 绝对单位
rem 相对根节点html字体大小来计算 相对单位
em 基准点为相对父节点字体的大小 相对单位
% 相对于父元素的大小设定的比率 相对单位
vw 视窗宽度的百分比,1vw代表视窗宽度的1% 视窗单位
vh 视窗高度的百分比,1vh代表视窗高度的1% 视窗单位
vmin 当前vw和vh中较小的一个值 视窗单位
vmax 当前vw和vh中较大的一个值 视窗单位

tip:vw、vh、vmin、vmax 是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗(Viewport)大小来决定的,单位 1,代表类似于 1%。

视窗(Viewport)是你的浏览器实际显示内容的区域—,换句话说是你的不包括工具栏和按钮的网页浏览器。 假如给页面设置一个宽800px,则400px=50vh=50%。

一、px、em和rem的区别

px是固定的像素,一旦设置了就无法因为适应页面大小而改变。

em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定死了的,更适用于响应式布局。

对于em和rem的区别一句话概括:em相对于父元素,rem相对于根元素。

rem中的r意思是root(根源),这也就不难理解了。

二、vw、vh 与 % 百分比的区别

% 是相对于父元素的大小设定的比率,vw、vh 是视窗大小决定的。

vw、vh 优势在于能够直接获取高度,而用 % 在没有设置 body 高度的情况下,是无法正确获得可视区域的高度的,所以这是挺不错的优势。

三、vmin、vmax 用处

做移动页面开发时,如果使用 vw、wh 设置字体大小(比如 5vw),在竖屏和横屏状态下显示的字体大小是不一样的。 由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。

© 著作权归作者所有

cdgogo
粉丝 0
博文 7
码字总数 5454
作品 0
中山
私信 提问
使用 Emmet 提高编写 CSS 的效率

前面 潜行者m 介绍了 Emmet 的功能和如何使用 Emmet 来生成 HTML 代码,这次再来讲解一下如何使用 Emmet 提高 CSS 编写效率。 首先,Sublime Text 2 已经提供了比较强大的 CSS 样式所写方法来...

sunshinewyf
2015/08/22
103
0
【Hello CSS】第三章-浏览器的视图与坐标

首发:krissarea.gitee.io 作者:陈大鱼头 github: KRISACHAN 在上一篇的第二章第二章-CSS的逻辑属性与盒子模型中提了个问题: 为什么Flex box跟Grid box的是以start、end为排列规则,而不是...

陈大鱼头
03/25
0
0
讲解css单位px、em、rem的含义

一、首先介绍一下px px就是css中最基本的长度单位了,用px做单位基本上没什么问题,可以做到让页面按套路精确的展现 px是相对于显示器分辨而言的 如果全篇用px布局会暗藏一个蛋疼的问题,就是...

浮躁的码农
2016/02/24
227
0
视口相关单位的应用 —— 别说你懂CSS相对单位

前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》,其中的第二章《Working with relative units》,书中对relative units的讲解和举例可以说相当全面,看完之后发现自己并不太懂CSS相对...

YuyingWu
2018/07/23
0
0
DOM和BOM修改元素属性、内容、样式讲解

DOM和BOM修改元素属性、内容、样式讲解 一、修改元素的内容:3个属性 1、innerHTML:获得、设置元素开始标签和结束标签之间的html原文 何时使用:只要获得html原文内容时 固定套路:2个 (1)删...

时光乱了谁的心的博客
2017/12/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Activity启动模式二

上篇文章Activity启动模式一主要介绍了Activity的四种启动模式,这些启动模式都是在AndroidManifest中进行配置的。除此之外,Android系统还通过Intent类提供了一些标志位,同样可以指定Activ...

ltlovezh
18分钟前
4
0
三原色还原

1、Color Filter Array — CFA 随着数码相机、手机的普及,CCD/CMOS 图像传感器近年来得到广泛的关注和应用。 图像传感器一般都采用一定的模式来采集图像数据,常用的有 BGR 模式和 CFA 模式...

天王盖地虎626
30分钟前
3
0
kubernetes pod exec接口调用

正文 一般生产环境上由于网络安全策略,大多数端口是不能为集群外部访问的。多个集群之间一般都是通过k8s的ApiServer组件提供的接口通信,如https://192.168.1.101:6443。所以在做云平台时,...

码农实战
今天
8
0
3_数组

3_数组

行者终成事
今天
8
0
经典系统设计面试题解析:如何设计TinyURL(二)

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

APEMESH
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部