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

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

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

?

1 2 3 4 5 6 7 8 9

/*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; }

 

常用移动端初始化样式

?

1 2 3 4 5 6 7 8 9 10 11

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定义的可点击元素的时候，<br>它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。 }