web前端入门到实战：CSS单位讲解

标签：root   区域   使用   rem   htm   strong   移动   页面   引入   像 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 高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。 web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频） 三、vmin、vmax 用处 做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。web前端入门到实战：CSS单位讲解标签：root   区域   使用   rem   htm   strong   移动   页面   引入   原文地址：https://blog.51cto.com/14592820/2447574