返回目录

px，em，rem，%，vw，vh，vm

一、像素

* 设备像素（物理像素）* 真实存在，设备出厂后就固定了* 单位：pt（像素点）* 分辨率：* iPhone6 750pt*1334pt
* CSS像素（设备独立像素、逻辑像素）* 不是真实存在的，是一个相对单位，是相对于设备来说的。* 一个CSS像素对应一个物理像素，放到两倍后一个CSS像素对应两个物理像素* 单位：px（W3C规定px不是大小，是视角）

二、px

* px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

三、em

* 作为font-size的单位时，其代表父元素的字体大小
* 作为其它属性单位时，代表自身字体大小

//作为font-size的单位
body {font-size: 16px;
}body>#box {font-size: 2em;//em代表父元素字体大小，2em = 32px;
}

//作为其它属性单位
body>#box {font-size: 20px;width: 10em;//em代表自身字体大小，10em = 200px;
}

四、rem

* CSS3新增的一个相对单位（相对于根元素<html></html>）
* 作用于非根元素时，是相对于根元素字体的大小
* 作用于根元素字体大小时，是相对于其初始字体的大小

//作用于非根元素
html {font-size: 50px;
}
body {font-size: 1rem;//此处的rem是相对于根元素的，1rem = 50px;//如果一个元素的宽度为500px;//可以表示为width: 10rem;
}

//作用于根元素字体大小
html {font-size: 1rem;//浏览器默认字体是16px，1rem = 16px;
}

五、%

* 一般宽泛的讲是相对于父元素，但是并不是十分准确。* 1、对于普通定位元素就是我们理解的父元素* 2、对于position: absolute;的元素是相对于已定位的父元素* 3、对于position: fixed;的元素是相对于ViewPort（可视窗口）

六、vw

* css3新单位，Viewport's Width的简写，1vw等于视口宽度的1%

七、vh

* css3新单位，Viewport's height的简写，1vh等于视口高度的1%

八、vm

* css3新单位，相对于视口的宽度或高度中较小的那个，其中最小的那个被均分为100单位的vm
* 比如：浏览器高度900px，宽度1200px，取最小的浏览器高度，1vm = 900px / 100 = 9px* 还有：* vmin，取vw和vh中最小的值* vmax，取vw和vh中最大的值

九、vh、vw和%

* vh、vw是不包含页面滚动条的视窗宽度(innerwidth)，%包含了滚动条的宽度在里面了(outerwidth)。
* %问题：* 百分比的值不好计算* 需要确定父级大小* 宽度可以设置，但是高度不好设置

十、css还有哪些长度单位？

* in: 寸
* cm: 厘米
* mm: 毫米
* t: point，大约1/72寸
* pc: pica，大约6pt，1/6寸
* 1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

参考：链接

前端学习笔记 - px，em，rem，%，vw，vh，vm相关推荐

css px em rem % vw vh vm 区别
前言在传统项目开发中,我们只会用到 px.%.em 这几个单位长度,它们可以适用大部分项目的开发,并且拥有较好的兼容性. 而从 css3 开始,浏览器对逻辑单位的支持又提升了新的境界,增加了 rem ...
CSS中的常见单位（px,%,em,rem,vw,vh,vmax,vmin,calc)
像素(px)&百分比(%) 像素(Pixel) 长度单位,相对于显示器屏幕分辨率而言,通常在不定义显示缩放比例的情况下,1px对应显示器屏幕上的一个像素点. 早年的pc端展示的页面基本都用这个 ...
【前端基础】整理常见的单位 px em rem % vw vh vmin vmax rpx
基本单位单位计算方式简介 px 标准像素优点兼容性最好,缺点没有弹性,对于过大过小屏幕显示效果不好 em font-size元素大小 1em等于font-size的大小(font-size默认 ...
css单位介绍em ex ch rem vw vh vm cm mm in pt pc px
长度单位主要有以下几种em ex ch rem vw vh vm cm mm in pt pc px %,大概可以分为几种"绝对单位"和"相对单位"和" ...
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到底是多大长,恐怕没有人能回答上来它用来表示屏幕设备物理上能显示的最小的一个点,这个点不是固定宽度的,不同设备上点的长度.比例有可能会不同. 假设:你现在 ...
html 字号和像素的关系,一文搞懂CSS中的字体单位大小(px,em,rem...)
在学习的过程中,发现CSS有很多可以形容单位的尺寸.比方px,em,rem,vw等等.平常也没有深究,一来是没时间,二来是在我学习清单中优先级过低.一直想彻底弄明白,一直耽搁到现在.现在花上一点时间来 ...
px,em,rem,vh,vw,vmin,vmax的区别
css手册中关于font-size是这么介绍的: font-size 值可以是绝对或相对值. 绝对值: 将文本设置为指定的大小不允许用户在所有浏览器中改变文本大小(不利于可用性) 绝对大小在确定了输 ...

前端学习笔记 - px，em，rem，%，vw，vh，vm

返回目录

px，em，rem，%，vw，vh，vm

一、像素

二、px

三、em

四、rem

五、%

六、vw

七、vh

八、vm

九、vh、vw和%

十、css还有哪些长度单位？

参考：链接

前端学习笔记 - px，em，rem，%，vw，vh，vm相关推荐

最新文章

热门文章