欢迎光临散文网 会员登陆 & 注册

说一说CSS尺寸设置的单位?

2022-05-27 14:28 作者:朵宝特工007  | 我要投稿

得分点:px、rem、em、vw、vh。

回答:px:pixel像素的缩写,绝对长度单位,它的大小取决于屏幕的分辨率,是开发网页中常常使用的单位。

    em:相对长度单位,在font-size中使用是相对于父元素的字体大小,在其他属性中使用是相对于自身的字体大小,如width;如当前元素的字体尺寸未设置,由于字体大小可继承的原因,可逐级向上查找,最终找不到则相对于浏览器默认字体大小。

    rem:相对长度单位,相对于根元素的字体大小,根元素字体大小未设置,使用浏览器默认字体大小。

    vw:相对长度单位,相对于视窗宽度的1%。

    vh:相对长度单位,相对于视窗高度的1%。

加分回答:rem应用:在移动端网页开发中,页面要做成响应式的,可使用rem配合媒体查询或者flexible.js实现。

    原理:通过媒体查询或者flexible.js,能够在屏幕尺寸发生改变时,重置html根元素的字体大小,页面中的元素都是使用rem为单位设置的尺寸,因此只要改变根部元素字体大小,页面中的其他元素尺寸就自动跟着修改。

    vw应用:由于vw被更多浏览器兼容之后,在做移动端响应式页面时,通常使用vw配合rem。

    原理:使用vw设置根元素html字体的大小,当窗口大小发生改变,vw代表的尺寸就跟着修改,无需加入媒体查询和flexible.js,页面中的其他元素仍使用rem为单位,就可以实现响应式。


说一说CSS尺寸设置的单位?的评论 (共 条)

分享到微博请遵守国家法律