css1vh等于多少px,css单位px、rem、em、vw、vh

css单位有两种分为相对单位和绝对单位

绝对单位有:px

相对单位有：rem、em、vw、vh

下面我们一起来了解这几个单位吧。

1、rem：相对根元素字体大小来计算

1rem默认为16px当根元素有font-size时1rem的单位则是font-size的大小

下面我们看这个例子

html{

font-size: 20px;

}

.rem {

width: 20rem;

height: 20rem;

background: green;

}

所以此时.rem的宽高为400px；

2、em：根据父节点的字体大小计算

其实em和rem相似，不过rem是相对根元素，而em是相对父元素的

下面我们来看这个例子

.rem {

font-size: 30px;

}

.em{

width: 20em;

height: 20em;

background-color: purple;

}

所以此时em的宽高为600px；

3、vw：视口宽度，将视口宽度的1%

vh：视口高度，将视口高度的1%

这两个不太常用，大家了解一下就可以。

今天就到这里吧，再见！

css1vh等于多少px,css单位px、rem、em、vw、vh相关推荐

CSS单位 px pt em和rem 之间的区别
CSS中可以定义大小的单位有四种px,pt,em,rem,而px可以说在网页开发中最常见的单位了.不过现在如今的大多数网站已经开始用rem这个单位了.那么这四个单位有什么区别呢? px|pt|em|r ...
Css单位px，rem，em，vw，vh的区别
Css单位px,rem,em,vw,vh的区别 px 像素 rem 根元素字体大小应用场景使用和修改 em 相对于父元素的大小 % 相对长度单位 vw.vh 相对于视口的单位视口 VW 相对于视 ...
移动端适配方案(rem和vw vh适配)(css预处理器-less)
适配方案: 目前移动端适配方案有两种: 1.flex+rem单位当前市面上用的比较多相对主流(比如小米和淘宝移动端) 2.flex+viewport width/viewport height(v ...
PC端、移动端响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）
PC端.移动端响应式布局的常用解决方案对比简要介绍: 一.px 和视口 1. 像素 2. 视口 (1) 布局视口(layout viewport) (2) 视觉视口(visual viewport ...
响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）
响应式布局的常用解决方案对比(媒体查询.百分比.rem和vw/vh) px和视口媒体查询百分比自适应场景下的rem解决方案通过vw/vh来实现自适应 px和视口在静态网页中,我们经常用像素( ...
移动Web(rem less Vw/Vh/bootstra)
移动端适配方案 flex + rem单位,做适配效果(比如淘宝和小米移动端) 当前市场最多 flex +viewport width/vh单位做适配效果(比如 B站移动端新兴让flex做布局(盒 ...
深度解析使用CSS单位px、em、rem、vh、vw、vmin、vmax实现页面布局
1.px:绝对单位,页面按精确像素展示 2.em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. em ...
详细讲解css单位px,em和rem的含义以及它们之间的区别
一.首先介绍一下px px就是css中最基本的长度单位了,用px做单位基本上没什么问题,可以做到让页面按套路精确的展现! 可但是!但可是!如果全篇用px布局会暗藏一个蛋疼的问题,就是当用户和Ctrl滚 ...
弄清楚CSS单位px、em、rem、vh、vw、vmin、vmax的应用场景
1.px:绝对单位,页面按精确像素展示 2.em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. em ...

css1vh等于多少px,css单位px、rem、em、vw、vh

css1vh等于多少px,css单位px、rem、em、vw、vh相关推荐

最新文章

热门文章