程序员之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > CSS教程 > px、em、rem、%、vw、vh单位区别

CSS 中px、em、rem、%、vw、vh单位之间的区别详解

  发布时间：2020-03-16 15:08:39   作者：皇菇凉   我要评论
这篇文章主要介绍了CSS 中px、em、rem、%、vw、vh单位之间的区别，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）

（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）

1 、px

px就是pixel（像素）的缩写，相对长度单位，相对于屏幕分辨率。

2、em

参考物是父元素的font-size，具有继承的特点。浏览器默认字体是16px，整个页面内1em不是一个固定的值。

字体大小同样都是1.5em，但是效果却截然不同，按照W3C提供的公式，我们可以计算下： class为id1的div字体大小继承自父元素body：16px*1.5em = 24px class为id2的div字体大小继承自父元素id1：24px*1.5em = 36px class为id3的div字体大小继承自父元素id2：36px*1.5em = 54px

3、rem

rem是CSS3新增的一个相对单位，但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

4、%

% 百分比，相对长度单位，相对于父元素的百分比值

元素宽高与字体大小使用区别：

（1）尽量使用相对尺寸单位

使用相对尺寸单位计量，则在调整页面的布局的时候，不需要遍历所有的内部DOM结构，重新设置内部子元素的尺寸大小。如果是随着父容器或者是整体页面布局而改变尺寸，则使用%更好，如元素的高度和宽度设置。

（2）字体尺寸尽量使用em、rem

为了字体大小的可维护性和伸缩性，推荐使用em，如果存在3层以及3层以上的字体相对尺寸的设置，可以考虑使用rem。

5、vw和vh

vm、vh、vmin、vmax是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。 视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。

具体描述如下：

vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
vh：视窗高度的百分比
vmin：取当前Vw和Vh中较小的那一个值
vmax：取当前Vw和Vh中较大的那一个值

vh和vw相对于视口的高度和宽度， 1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度 比如：浏览器高度900px，宽度为750px, 1 vh = 900px/100 = 9 px，1vw = 750px/100 = 7.5 px， 很容易实现与同屏幕等高的框。

calc + vm 计算宽度

width: 800px; 
width: -moz-calc(100vm - (2 * 10)px);
width: -webkit-calc(100vm -(2 * 10)px);
width: calc(100vm - (2 * 10)px);

总结

到此这篇关于CSS 中px、em、rem、%、vw、vh单位之间的区别详解的文章就介绍到这了,更多相关px、em、rem、%、vw、vh单位区别内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！

相关文章

  • 浅析CSS中单位px、rem、em、vh、vw之间的区别

    这篇文章主要介绍了CSS中单位px、rem、em、vh、vw之间的区别,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-05-25

  • postcss-pxtorem移动端适配的实现

    这篇文章主要介绍了postcss-pxtorem移动端适配的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学
    2019-12-03

  • css基于媒体查询和 rem 的响应式布局实践

    这篇文章主要介绍了css基于媒体查询和 rem 的响应式布局实践的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-07-30

  • 移动端使用 rem 单位时 css sprites 定位问题的解决

    现在开发移动端 wap 页面，相信大家都会使用强大的 rem 单位去适配各种机型和屏幕；这篇文章主要介绍了移动端使用 rem 单位时 css sprites 定位问题的解决，小编觉得挺不错
    2018-06-20

  • CSS中px em rem区别与使用

    本文主要介绍了CSS中px em rem区别与使用。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-27

  • css中px、em和rem的区别总结

    相信每位前端工程师们都有这么一个体会，国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？下面这篇文章小编就来给大
    2017-02-24

  • 知识普及：彻底搞懂CSS中单位px和em,rem的区别

    国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别呢？下面程序员之家小编给大家详细介绍下
    2016-05-06

  • CSS 中 em 和 rem 单位的区别解析

    这篇文章主要介绍了CSS 中 em 和 rem 单位的区别,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-05-24

最新评论

关注微信公众号

扫一扫
?


http://www.vxiaotou.com