19.说一说CSS尺寸设置的单位
得分点:
px、rem、em、vw、vh
标准回答
1.px
:
pixel像素的缩写,绝对长度单位,它的大小取决于屏幕的分辨率,是开发网页中常常使用的单位。
2.em
:
相对长度单位,在
font-size
中使用是相对于父元素的字体大小,在其他属性中使用是相对于自身的字体大小,如width
。如当前元素的字体尺寸未设置,由于字体大小可继承的原因,可逐级向上查找,最终找不到则相对于浏览器默认字体大小。
3.rem
:
相对长度单位,相对于根元素的字体大小,根元素字体大小未设置,使用浏览器默认字体大小。
4.vw
:
相对长度单位,相对于视窗宽度的1%。
5.vh
:
相对长度单位,相对于视窗高度的1%。
加分回答 :
- rem应用:
在移动端网页开发中,页面要做成响应式的,可使用
rem
配合媒体查询或者flexible.js
实现。
原理:
是通过媒体查询或者flexible.js
,能够在屏幕尺寸发生改变时,重置html
根元素的字体大小,页面中的元素都是使用rem
为单位设置的尺寸,因此只要改变根元素字体大小,页面中的其他元素的尺寸就自动跟着修改
- vw应用:
由于
vw
被更多浏览器兼容之后,在做移动端响应式页面时,通常使用vw
配合rem
。
原理:
是使用vw
设置根元素html
字体的大小,当窗口大小发生改变,vw
代表的尺寸随着修改,无需加入媒体查询和flexible.js
,页面中的其他元素仍使用rem
为单位,就可实现响应式。
💞💖💓💗每个时代,
✨🌟⭐️💫都悄悄犒赏会学习的人。