px、em、rem、%、vw、wh、vm等单位有什么区别?

大家好,我是IT修真院上海分院第7期的学员,一枚正直纯洁善良的web前端。今天给大家分享一下,px、em、rem、%、vw、wh、vm等单位有什么区别?希望能够给大家带来一些收获和思考。

目录

1.背景介绍          

2.知识剖析           

3.常见问题

4.解决方案        

5.编码实战       

6.扩展思考         

7.参考文献      

8.更多讨论

扫描二维码关注公众号,回复: 1163455 查看本文章

1.背景介绍

传统的项目开发中,我们只会用到px、%、em这几个单位,它可以适用于大部分的项目开发,并且拥有比较良好的兼容性。但从css3开始,浏览器增加了rem、vh、vw、vm等一些新的长度单位,我们可以利用这些新的单位开发出比较良好的响应式页面,随之覆盖多种不同分辨率的终端,包括移动设备等。现在让我们来认识一下这些长度单位。

2.知识剖析   

px:是显示屏上显示的每一个小点,为显示的最小单位。这个长度与您正在看的显示屏中的文字屏幕像素没有任何关系。

px像素(Pixel)值是固定的,不会随着屏幕宽度变而变。

em:是相对单位。em其实就是一种排版的测试单位.

在CSS中,“em”实际上是一个垂直测量。一个em等于任何字体中的字母所需要的垂直空间,而和它所占据的水平空间没有任何的关系,因此:如果字体大小是16px,那么1em=16px。在所有现代浏览器中,其默认的字体大小就是“16px”。但自身如果定义了font-size大小则按照自身来计算,也就是说整个页面内的em值并非完全一样。

rem:是一个相对的单位,像em,但它总是相对于“根”元素html的字体大小来计算。em和rem的区别:em相对于父元素,rem相对于根元素。这极大地简化了与相关长度单位的合作。

%(percentage)以百分比形式设置的长度基于父元素的相同属性的长度。例如,如果一个元素以450px宽度呈现,宽度设置为50%的子元素将呈现225px。

vw-这是“视口宽度”单位。 1vw等于视口宽度的1%。它与百分比类似,不同之处在于,所有元素的值都保持一致,无论其父元素或父元素宽度如何。

vh-这与vw(视口宽度)单位相同,只是它基于视口高度。vmin and vmax:关于视口高度vh和宽度vw两者的最小值或者最大值。

3.常见问题

css样式body的font-size为什么要设置625%?

4.解决方案   

16px62.5%=10px.*   设了62.5%后就有1em = 10px,这样有利于进行换算。

 为什么要设置成625%?

 设置html 625% rem单位的根元素是相对于html body可以设置14px 或者16px 来设置网页的默认字体大小消除625%大小属性继承给body带来的影响

5.编码实战  

demo地址

7.参考文献    

https://www.w3cplus.com/css/px-to-em

https://css-tricks.com/the-lengths-of-css/

8.更多讨论




猜你喜欢

转载自blog.csdn.net/weixin_41506097/article/details/80239031