CSS查缺补漏之《常用长度单位(px、em、rem、%、vw/vh、vmin/vmax)》

此文内容较少，轻轻松松掌握，莫要有压力~

正如现实生活中长度具有mm、dm、cm、m等，在css中，也具备多种长度单位，本文对常用的几种单位进行详细举例介绍~

px：像素单位

初学css时，px单位经常被使用，此处按下不表~

em：表示相对于当前元素或父元素的font-size的倍数

<div>从前从前，有个人爱你很久</div>

  div {background-color: #ff8800c8;/* 由于自身元素无设置font-size，因此找到父元素html，默认font-size为16px */height: 10em; /* 相当于10*16=160px */width: 10em;  /* 相当于10*16=160px */}

rem：表示相对于根元素（html）的font-size的倍数

html {font-size: 10px;
}
div {background-color: #ff8800c8;height: 20rem; /* 相当于10*20=200px */width: 20rem;  /* 相当于10*20=200px */
}

%：表示相对其父元素对应属性的百分比

vw(viewport width)：视口宽度的百分比

<div class="box"></div>

.box {width: 50vw;height: 50vw;background-color: yellow;
}

可以实现随着窗口的宽度变化，引起box1的宽度、高度随之变化，但是一直会保持视口宽度的50%大小；

vh(viewport height)：视口高度的百分比

.box {width: 50vh;height: 50vh;background-color: yellow;
}

可以实现随着窗口的高度变化，引起box1的宽度、高度随之变化，但是一直会保持视口高度的50%大小；

vmax：视口宽度vw 或高度vh中较大者的百分比

vmin：视口宽度vw 或高度vh中较小者的百分比

.box {width: 50vmin;height: 50vmax;background-color: yellow;
}

宽将会视视口宽度或高度的最小值进行百分比设置，而高则会根据视口宽度或高度的最大值进行百分比设置

CSS查缺补漏之《常用长度单位(px、em、rem、%、vw/vh、vmin/vmax)》相关推荐

【前端基础】整理常见的单位 px em rem % vw vh vmin vmax rpx
基本单位单位计算方式简介 px 标准像素优点兼容性最好,缺点没有弹性,对于过大过小屏幕显示效果不好 em font-size元素大小 1em等于font-size的大小(font-size默认 ...
CSS中的常见单位（px,%,em,rem,vw,vh,vmax,vmin,calc)
像素(px)&百分比(%) 像素(Pixel) 长度单位,相对于显示器屏幕分辨率而言,通常在不定义显示缩放比例的情况下,1px对应显示器屏幕上的一个像素点. 早年的pc端展示的页面基本都用这个 ...
css px em rem % vw vh vm 区别
前言在传统项目开发中,我们只会用到 px.%.em 这几个单位长度,它们可以适用大部分项目的开发,并且拥有较好的兼容性. 而从 css3 开始,浏览器对逻辑单位的支持又提升了新的境界,增加了 rem ...
认识css长度单位 px % em rem vh vw
目录长度单位 px % em rem vh.vw 总结长度单位在日常的项目开发,在使用css样式进行时布局的时候,我们常常用到px.%.em这三个单位.CSS3开始,浏览器新增加了rem.vh. ...
web开发之长度单位：px, pt, rem, vw, vh
在前端开发中,常常会碰到各种长度单位,比如 px, em, rem, vw 等. 总的来说,可以把这些长度单位分成两类:绝对长度单位和相对长度单位. 绝对长度单位绝对长度单位是一个固定的值,一个 ...
html移动端怎么做城市选择,移动端页面单位的选择（px, em, rem, vw）
px, em, rem的区别: px:绝对字体大小 em:基于一个基数来计算出相对字体大小.(移动端用的少) rem:基于根节点(html)的字体大小来计算. vw:可视区宽度单位.1vw等于可视区宽 ...
px,em,rem,vw单位在网页和移动端的应用
px: 是网页设计中最常用的单位,然而1px到底是多大长,恐怕没有人能回答上来它用来表示屏幕设备物理上能显示的最小的一个点,这个点不是固定宽度的,不同设备上点的长度.比例有可能会不同. 假设:你现在 ...
常用长度单位PX/EM/PT/百分比转换公式
后两个可以稍微看下,一般情况下就用 px = (4*pt)/3 吧 http://www.weste.net/2009/2-3/1106261329.html PX.PT.EM.ex和in等都是我们常 ...
20、CSS中单位：【px和%】【em和rem】【vw|vh|vmin|vmax】的区别
CSS中的px 和 % px (pixels) 是固定单位,也可以叫基本单位,代表像素,可以确保元素的大小不受屏幕分辨率的影响. % (percentage) 是相对单位,代表元素大小相对于其父元素或 ...

CSS查缺补漏之《常用长度单位(px、em、rem、%、vw/vh、vmin/vmax)》

CSS查缺补漏之《常用长度单位(px、em、rem、%、vw/vh、vmin/vmax)》相关推荐

最新文章

热门文章