移动端web页面知识小结之CSS部分

移动端web页面开发CSS部分知识小结

参考来源： http://www.imooc.com/article/9153 http://blog.csdn.net/fungleo/article/details/50811739

一、字体

三大手机系统的默认字体现状如下：

默认字体	IOS系统	Android系统	WinPhone系统
默认中文字体	Heiti SC	Droidsansfallback	Dengxian(方正等线体)
默认英文字体	Helvetica	Droid Sans	Segoe
默认数字字体	HelveticaNeue	Droid Sans	Segoe
三大系统均无微软雅黑字体

总结：各个手机系统有自己的默认字体，且都不支持微软雅黑，如无特殊需求，手机端无需定义中文字体，英文字体和数字字体可使用系统默认的Helvetica ，三种系统都支持，即：

/*移动端定义字体的代码*/
body{font-family:Helvetica}

二、字号单位

适配移动端比较好的布局方式是百分比+rem布局。

使用rem可以适配各种移动设备，如适配iPhone和iPad等分辨率差别比较挺大的设备

rem的取值只是相对于根元素htm的font-size，即只需要设置根元素的font-size，其它元素使用rem单位设置成相应的百分比即可。你再用@media写一下不同尺寸下跟元素html的font-size的值即可。然后神奇的事情就发生了。当你改变尺寸时，字体。图片等，就会自动跟着适应了。

rem配置参考代码如下：

<style type="text/css">
@charset "utf-8";
@media only screen and (max-width: 315px){ html { font-size: 50% !important; } }
@media only screen and (min-width: 316px){ html { font-size: 62.5% !important; } }
@media only screen and (min-width: 640px){ html { font-size: 125% !important; } }
@media only screen and (min-width: 750px){ html { font-size: 150% !important; } }
@media only screen and (min-width: 1242px){ html { font-size: 187.5% !important; } }
</style>

三、去掉用户点击一个元素时出现的半透明灰色遮罩

3.1、去掉ios系统中元素被触摸时产生的半透明灰色遮罩

ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0，也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩。

<style>
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0);}
</style>

3.2、去掉部分android系统中元素被点击时产生的边框

android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果。

<style>
a,button,input,textarea{ -webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-modify:read-write-plaintext-only; }
</style>

-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符。 另外，有些机型去除不了，如小米2 对于按钮类还有个办法，不使用a或者input标签，直接用div标签

3.3、去掉winphone系统a、input标签被点击时产生的半透明灰色背景

<meta name="msapplication-tap-highlight" content="no">

3.4、移动端取消touch高亮效果——总结3.1\3.2\3.3

在做移动端页面时，会发现所有a标签在触发点击时或者所有设置了伪类 :active 的元素，默认都会在激活状态时，显示高亮框，如果不想要这个高亮，那么你可以通过css以下方法来进行全局的禁止：

<style>
html{ -webkit-tap-highlight-color: rgba(0,0,0,0);  }
</style>

但这个方法在三星的机子上无效，有一种妥协的方法是把页面非真实跳转链接的a标签换成其它标签，可以解决这个问题。

四、webkit表单元素

4.1、重置webkit表单元素的默认外观

<style>
.css{-webkit-appearance:none;}
</style>

4.2、改变webkit表单输入框placeholder的颜色值

<style>
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEE;}
</style>

4.3、webkit表单输入框placeholder的文字换行

iOS可以，Android不行

4.4、清除输入框内阴影

在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭：

<style>
input,textarea{
border:0;/*方法一*/
--webkit-appearance: none;/*方法二*/
}
</style>

五、键盘输入

5.1、关闭iOS键盘首字母自动大写

在iOS中，默认情况下键盘是开启首字母大写的功能的，如果关闭这个功能，可以这样：

<input tpye="text" autocapitalize="off">

5.2、关闭iOS输入自动修正

IOS默认输入法会开启自动修正输入内容，这样的话，用户经常要操作两次。如果不希望开启此功能，我们可以通过input标签属性来关闭掉：

<input tpye="text" autocorrect="off">

六、用户操作

6.1、禁止文本缩放

当移动设备横竖屏切换时，文本的大小会重新计算，进行相应的缩放，当我们不需要这种情况时，可以选择禁止：

<style>
html{
--webkit-text-size-adjust: 100%;
}
</style>

需要注意的是，PC端的该属性已经被移除，该属性在移动端要生效，必须设置 meta viewport。

6.2、快速回弹滚动

回弹滚动在手机浏览器发展的历史：
Android 3.0/iOS解决了非body元素的滚动问题，但滚动条不可见，同时iOS上只能通过2个手指进行滚动；
iOS从5.0开始解决了滚动条不可见及增加了快速回弹滚动效果

在iOS上如果你想让一个元素拥有像 Native 的滚动效果，你可以这样做：

<style>
.xxx{
overflow: auto;
-webkit-overflow-scrolling:touch;
}
</style>

PS:推荐另外一个 iDangero Swiper，这个插件集成了滑屏滚动的强大功能（支持3D），而且还有回弹滚动的内置滚动条。iDangero官方地址:

http://idangero.us/

中文网：http://www.swiper.com.cn/

一个为移动端触屏滑动而生的插件

6.3、移动端禁止选中内容

如果你不想用户可以选中页面中的内容，那么你可以在css中禁掉：

<style>
.xxx{
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all （移动端不需要） */
-ms-user-select: none; /* IE 10+ */
}
</style>

6.4、如何禁止保存或拷贝图像（IOS）

通常当你在手机或者pad上长按图像 img ，会弹出选项存储图像 或者拷贝图像，如果你不想让用户这么操作，那么你可以通过以下方法来禁止：

<style>
img { -webkit-touch-callout: none; }
</style>

6.5、模拟按钮hover效果

移动端触摸按钮的效果，可明示用户有些事情正要发生，是一个比较好体验，但是移动设备中并没有鼠标指针，使用css的hover并不能满足我们的需求，还好国外有个激活css的active效果，代码如下，

<script type="text/javascript">
var btnBlue = document.querySelector(".btn-blue");
btnBlue.ontouchstart = function(){
this.className = "btn-blue btn-blue-on"
}
btnBlue.ontouchend = function(){
this.className = "btn-blue"
}
</script>

6.6、屏幕旋转的事件和样式

屏幕旋转的样式:

<style>
//竖屏时使用的样式
@media all and (orientation:portrait){
.css{}
html{
background-color: blue;
}
}
//横屏时使用的样式
@media all and (orientation:landscape){
.css{}
html{
background-color: red;
}
}
</style>

屏幕旋转的事件：window.orientation，
取值：正负90表示横屏模式、0和180表现为竖屏模式；

<script>
window.onorientationchange = function(){
switch(window.orientation){
case -90:
case 90:
alert("横屏："+window.orientation);
case 0:
case 180:
alert("竖屏："+window.orientation);
break;
}
}
</script>

6.7、audio元素和video元素在ios和andriod中无法自动播放

应对方案：触屏即播

<script type="text/javascript">
$(html).one("touchstart",function(){
audio.play();
})
</script>

6.8、摇一摇

HTML5 deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。

6.9、手机拍照和上传图片

<input type="file">的accept属性
<!-- 选择照片 -->
<input type="file" accept="images/*">
<input type="file" accept="video/*">

使用总结：

iOS有拍照、录像、选取本地图片功能

部分android只有选取本地图片功能

winphone不支持

input控件默认外观丑陋

6.10、消除transition闪屏

<style type="text/css">
.css{
/*设置内嵌的元素在3D空间如何呈现：保留3D*/
-webkit-transform-style: preserve-3d;
/*设置进行转换的元素的背面在面对用户是是否可见：隐藏*/
-webkit-backface-visibility: hidden;
}
</style>

6.11、开启硬件加速

解决页面闪白
保证动画流畅

<

style type="text/css">
.css{
-webkit-transform:translate3d(0, 0, 0);
-moz-transform:translate3d(0, 0, 0);
-ms-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0);
}
</style>

设计高性能CSS3动画的几个要素 ：

尽可能地使用合成属性transform和opacity来设计CSS3动画

不使用position的left和top来定位

利用translate3D开启GPU加速

6.12、android 上去掉语音输入按钮

<style>
input::-webkit-input-speech-button{
display:none;
}
</style>