写移动端网页应该注意的问题

所有的网页内容放到“main”里面，“main”的宽度给98%，然后给margin-left:1%，这样就会留有一个1%的边距。

二：适配

任何移动端网页都要加上如下代码：

1. <meta name="viewport" content="width=device-width,inital-scale=1.0,minimum-scale=0.5,maximum-scale=2.0,user-scalable=no"> 

不加此代码在手机上看到的效果就像是把电脑上看到的缩小到手机上一样，文字很小。

三：兼容性

一定要用不同的设备进行测试，例如：

这是在iPhone中的截图，下面input的button类型按钮泛白，安卓手机中正常，这就是没有兼容iPhone手机，要解决此问题需给按钮加上清除样式的代码：-webkit-appearance: none。

四：合理运用媒体查询

测试链接：https://blog.weiyiqi.net/lookdoc/xiangmu/hyjlb.html，请用火狐浏览器打开，并调到开发者响应式设计模式，宽度拉到382px,看看大于382px和小于382px分别是什么效果……，这样做不管屏幕宽度是多少，页面看起来都很美观，而不用媒体查询是无法实现此效果的。

五：合理运用百分比

响应式网页对百分比的运用是一门技术，这需要大家在项目实践中去总结。