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

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

目录：
一、浏览器
二、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)——布局方式常见方案概要