网页如何自动适配手机？

1、通过移动适配技术可以实现，切图网是国内首家基于web技术服务的公司，而移动适配主要通过底层的web技术开发手段来完成，

2、允许网页宽度自动调整

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

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

3、不使用绝对宽度

由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。

4、相对大小的字体

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

5、流动布局（fluidgrid）

“流动布局”的含义是，各个区块的位置都是浮动的，不是固定不变的。

.main{

float:right;

width:70%;

}

6、选择加载CSS

“自适应网页设计”的核心，就是CSS3引入的MediaQuery模块。

7、上面的代码意思是，如果屏幕宽度小于400像素（max-device-width:400px），就加载tinyScreen.css文件。