网页如何自动适配手机

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文件。