css如何让元素宽度自适应屏幕大小
1、在网页代码的头部,加入一行viewport元标签。
<meta name="viewport" content="width=device-width,initial-scale=1" />
viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。
2、使用的长度单位rem、vw
(相关课程推荐:css视频教程)
rem这个单位代表根元素的 font-size大小(一般来说是html元素的font-size)。当用在根元素的font-size上面时 ,它代表了它的初始值。
vw就是屏幕宽度的百分之一,窗口放大或缩小1vw的值也会变化。
3、使用方法
假设UI设计稿的宽度是1920px,html的font-size想要设置为20px,设以rem为单位font-size大小为x。得出100vw/x=1920/20,则x=100vw/96,具体情况就按照UI的设计图计算一下。
示例:
html{ font-size:calc(100vw / 96); }
这样页面的所有宽度都会随着屏幕的变化而变化了
如果担心屏幕太大,导致大屏幕中的字体会变得特别大,这时候就可以用媒体查询
@media screen and (min-width: 1920px){ html{ font-size:20px; } }
4、为元素指定rem单位的宽度
.div{ width: 3rem; }
本文来自css3答疑栏目,欢迎学习!
以上就是css如何让元素宽度自适应屏幕大小的详细内容,更多请关注0133技术站其它相关文章!