移动布局---5. 移动端技术解决方案
5.1移动端浏览器
- 移动端浏览器基本以webkit内核为主，因此只需考虑webkit兼容性问题。
- 可以放心地使用H5标签和CSS3样式
- 同时我们浏览器的私有前缀只需要考虑添加webkit即可
5.2 CSS初始化normalize.css
移动端CSS初始化推荐使用normalize.css
- normalize.css:保护了有价值的默认值
- normalize.css:修复了浏览器的bug
- normalize.css:是模块化的
- normalize.css:拥有详细的文档
官网地址：http://necolas.github.io/normalize.css/
之后写移动端的页面将其引入就可以了
5.3 CSS3盒子模型box-sizing
- 传统模式宽度计算：盒子的宽度=CSS中设置的width+border+padding
- CSS3盒子模型：盒子宽度=CSS中设置的宽度width,里面包含了border和padding
- 也就是说，CSS3中的盒子模型，padding和border不会撑大盒子
<body>
<div></div>
<div></div>
</body>
<style>
div:nth-child(1) {
/* 传统的盒子模型 */
width: 200px;
height: 200px;
background-color: pink;
padding: 10px;
border: 10px solid red;
/* box-sizing: content-box; 这是默认存在的传统的盒子模型*/
}
div:nth-child(2) {
/* 有了这句话，就让盒子变成CSS3盒子模型 */
/* padding和border不会再撑大盒子 */
/* 但是存在兼容性问题，低版本浏览器不支持，但是到了移动端可以放心大胆使用 */
box-sizing: border-box;
width: 200px;
height: 200px;
background-color: purple;
padding: 10px;
border: 10px solid blue;
}
</style>
- 移动端可以全部使用CSS3盒子模型
- PC端如果完全兼容，我们就用传统模型，如果不考虑兼容性，就选用CSS3盒子模型
5.4 特殊样式
<style>
a {
/* 1.清除高亮 */
-webkit-tap-highlight-color: transparent;
}
input {
/* 2.清除边框样式 */
-webkit-appearance: none;
/* 补充：若添加 border: 0; 则完全消去立体感*/
}
img {
/* 禁用长按页面时的弹出菜单 */
-webkit-touch-callout: none;
}
</style>
<body>
<!-- 1.在PC端点击链接之后没什么问题，但是在移动端，点击时会出现链接部分高亮 -->
<a href="#">黑马</a>
<!-- 2.默认情况下按钮周围会有一个外观亮光效果 -->
<input type="button" value="按钮">
<!-- 3.在真机上长按某个地方的时候会弹出菜单，但是对于长按图片img或者链接a的情况，我们并不需要弹出菜单 -->
<img src="images/apple100.jpg" alt="">
</body>
以上这些，在开发时，将其复制到初始化文件里就可以了。
在实际开发中，可能还会遇到其他的特殊样式，到时候再去查就可以了。
