【58】移动WEB开发(5)——技术解决常见方案

★文章内容学习来源：拉勾教育大前端就业集训营

---

本篇学习目标： 掌握移动端常见问题解决方案

---

目录：
一、浏览器
二、CSS初始化文件normalize.css
三、CSS盒模型box-sizing
四 、CSS特殊样式设置

---

一、浏览器

• 移动端常用浏览器基本是webkit内核，因此只用考虑webkit兼容问题；
• 我们可以放心使用HTML5标签和CSS3样式;

可以查看这篇文章回顾HTML5标签和CSS3样式：
★【汇总】零基础前端学习目录及链接（附详细代码）

• 同时我们浏览器的私有前缀只用添加-webkit-即可。

---

二、CSS初始化文件

• 推荐使用normalize.css；
• 优点:
  ①保护了有价值的默认值；
  ②修复了浏览器的Bug;
  ③是模块化的；
  ④拥有详细文档；
• 参考网址：http://necolas.github.io/normalize.css/

---

三、CSS盒模型box-sizing

点击回顾： 【39】CSS3 （2）——盒模型
①标准模式：盒子的宽度=CSS设置的width+padding+border；
②怪异模式：盒子的宽度=CSS设置的width（其中包含了padding+border）

box-sizing: content-box;/*传统模式*/
box-sizing: border-box;/*怪异模式*/

• 移动端我们可以全使用怪异模式；
• PC端如果完全需要兼容，则用传统标准模式，如果不需要考虑兼容性，则选择怪异模式；

---

四 、CSS特殊样式设置

• CSS3盒模型：

box-sizing: border-box;
-webkit-box-sizing: border-box;

• 点击高亮需要清除，设置为完成透明：

-webkit-tap-heighlight-color: transparent

• 移动端浏览器默认的外观，在iOS上加上这个属性才能给按钮和输入框自定义样式：

-webkit-appearance: none;

• 禁用长按页面时的弹出菜单：

img, a {
     
  -webkit-touch-callout: none;
}

---

下篇继续：【59】移动WEB开发(6)——布局方式常见方案概要