移动开发注意事项

1. 盒子边缘溢出

• 当把一个元素设置了宽度100%，并定义为块元素来适应屏幕，结果发现加了边框或者margin或者padding时，会溢出文档，屏幕可横向滑动。

• 解决方式：加个样式box-sizing: border-box;来指定盒子的大小包括边框和内边距，盒子不受padding、border的影响，避免出现滚动条。注意对于外边距无效。

例如：

 <div style="width: 100%; background: bisque;">
       <span>hello</span>
       <span style="float: right;">world</span>
 </div>

给div 加边框 或者加padding，左滑才能看到右边尽头


加上样式box-sizing: border-box;

<div style="width: 100%; background: bisque;padding: 20px;box-sizing: border-box;">
    <span>hello</span>
    <span style="float: right;">world</span>
</div>

但是对于外边距margin无效

<div style="width: 100%; background: bisque;margin: 10px;box-sizing: border-box;">
   <span>hello</span>
   <span style="float: right;">world</span>
</div>

2. 移动端如使用有软键盘弹出的页面，尽量不使用fixed定位，输入框input获取焦点得时，虚拟键盘会把fixed元素顶上去，ios中有时候fixed定位会失效，一般使用绝对定位。

3. Less(css预处理器)

​ less是一种css语言的预处理器。

​ 通俗的说，CSS预处理器是一种专门编写css代码的语言(工具)，通过less来编写css代码变得更灵活，更高效，更容易维护。

什么是预处理(预编译)
Less是用来书写css代码的工具，Less文件的内的代码格式并不能被浏览器识别。想将Less文件代码变成css代码，必须先将这个Less文件预先进行处理。预处理的就可以将Less文件代码转换为css代码。
目前编写css的代码的效率不高，为了适应前端开发日益复杂和工程化的需要，所以科学家开发了书写css代码的新方式。这种预处理器有很多，最常被使用及讨论的就是less、sass、stylus，我们主要学习less。