主要思路:

移动端项目注意什么:

1. 在电脑上搜索 m.某网站.com m---->min

2. 检查,调出手机端

3. 创建一个html文件 尝试判断寻找的网页是 1rem=xxxpx;(在做网页的时候会用到);

4. 更改自己使用的编辑器 1rem = xxxpx 的数值

5. 即使设置了百分之百也会出现横向滚动条

   • 横向滚动条解决方案:

     html{
     	overflow-y: scroll;
     }
     :root{
     	overflow-y: auto;
     	overflow-x: hidden;
     }
     :root body{
     	position:absolute;
     }
     body{
     	width: 100vw;
     	overflow: hidden;
     }
     

辅助代码:

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>
<link rel="stylesheet" type="text/css" href="css/xxx.css"/>

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">

[^_^]:(作用)
       能更好地让我们的网页适配或响应各种不同分辨率的移动设备。

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>

[>_<]:(作用)   
        手机淘宝——flexible.js 移动端自适应方案 
        注意:把视觉稿中的px转换成rem

<link rel="stylesheet" type="text/css" href="css/xxx.css"/>
[>_>]:(作用)
         引用css代码
     注意:不直接写css代码而是通过less生成

要特别注意哪几种设备:

1. iPhone
2. iPad
3. iPad Pro

希望这篇博客能为你更好的学习并自主完成移动端项目有所帮助