html设置 元素最小宽度,css如何让元素宽度自适应屏幕大小

如今，手机的快速发展使得越来越多的人开始使用手机上网，那么就会出现一个问题，如何才能让PC端的网页在手机上正常显示？让元素能够自动适应不同的屏幕大小呢？

css如何让元素宽度自适应屏幕大小

1、在网页代码的头部，加入一行viewport元标签。

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答疑栏目，欢迎学习！