如何让网页宽度随着显示器分辨率自动调整

在过去网页设计者大多不会考虑这个问题，因为90%的用户都在使用17寸或19寸的显示器，而如今使用17寸，19寸，22寸，24寸，甚至使用电视做显示器的用户越来越多，那么就需要我们的网页可以自适应显示器分辨率，随着显示器的分辨率不同而自动调整呢？

实现这一目的首先需要在网页代码的头部，加入一行viewport元标签，它的作用是什么呢？viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度(width=device-width)，原始缩放比例(initial-scale=1)为1.0，即网页初始大小占屏幕面积的100%。

其次，就是不能使用绝对宽度，由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。我们不能使用像素，要使用百分比，或者auto即可。

另外字体的大小要选择相对大小的字体,字体也不能使用绝对大小(px)，而只能使用相对大小(em)。布局方式，需要选择流动布局，也就是说各个区块的位置都是浮动的，不是固定不变的。

最后，图片的应用上，也要选择自适应，可以实现图片的自动缩放，如：img { max-width: 100%;}，可以根据不同大小的屏幕，加载不同分辨率的图片。

以上几个方面在网页设计，浏览器自适应方面是需要注意的地方。了解更多网页设计知识请继续关注本站：http://www.wangyeshejipx.com. 我校作为网页设计师专业培训基地，欢迎您致电咨询学习。