移动端特殊样式,常用移动端初始化样式

虽然是移动端特殊样式,但是随着移动端和客户端逐渐倾向于兼容,这些样式也可以适用于客户端,

目前开发已经逐渐不考虑css的样式兼容性问题,绝大多数的浏览器已经支持新css样式.

/*CSS3盒子模型*/
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 /*点击高亮我们需要清除清除 设置为transparent 完成透明*/
 -webkit-tap-highlight-color: transparent;
 /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
 -webkit-appearance: none;
 /*禁用长按页面时的弹出菜单*/
 img,a { -webkit-touch-callout: none; }

 

常用移动端初始化样式

body {
max-width: 540px; //根据自己需要调整页面最大宽度
min-width: 320px;
margin: 0 auto;
font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft
Yahei",STXihei,hei;
color: #000;
background: #f2f2f2;
overflow-x: hidden;
-webkit-tap-highlight-color: transparent; //这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候，
它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。
}