不同大小的屏幕手机自适应网页制作

Posted 2020-08-10

 

1、  在html头部增加viewport标签 
在网站HTML文件的开头，增加viewport meta标签告诉浏览器视口宽度等于设备屏幕

宽度，且不进行初始缩放。这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。代码如下：

<meta name="viewport" content="width=device-width, initial-scale=1" /> 

这段代码支持Chrome、Firefox、IE9以上的浏览器，但不支持IE8以及低于IE8的浏览器。

2、  @media screen and (max-width: 480px) {html{font-size:20px}}

根据手机不同的逻辑像素，确定font-size的大小。

3、  不使用绝对宽度

由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝

对宽度的元素。这一条非常重要。具体说，CSS代码不能指定像素宽度：width:xxx px;只能指定百分比宽度：width: xx%或者width:auto，高度、padding、margin也不能用px表示，只能用百分比或者rem.

4、  相对大小的字体

字体也不能使用绝对大小（px），而只能使用相对大小（rem）。

5、图片的自适应：img { width: 100%; }.