移动端摘要

本文摘自:http://blog.sina.com.cn/u/1281316134 1.meta//设置宽度为设备的宽度，默认不缩放，不允许用户缩放（即禁止缩放），在网页加载时隐藏地址栏与导航栏（ios7.1新增）

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

//是否启动webapp功能，会删除默认的苹果工具栏和菜单栏。
<meta name="apple-mobile-web-app-capable" content="yes">
//当启动webapp功能时，显示手机信号、时间、电池的顶部导航栏的颜色。默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。这个主要是根据实际的页面设计的主体色为搭配来进行设置。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
//忽略页面中的数字识别为电话号码、email识别
<meta name="format-detection" content="telephone=no,email=no">
//启用360浏览器的极速模式(webkit)
<meta name="renderer" content="webkit">
//避免IE使用兼容模式 
<meta http-equiv="X-UA-Compatible" content="IE=edge">
// 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓
<meta name="HandheldFriendly" content="true">
//微软的老式浏览器
<meta name="MobileOptimized" content="320">
//uc强制竖屏
<meta name="screen-orientation" content="portrait">
//QQ强制全屏
<meta name="x5-fullscreen" content="true">
//UC以应用模式
<meta name="browsermode" content="application">
//UC应用模式
<meta name="x5-page-mode" content="app">
//windows phone点击无高光
<meta name="msapplication-tap-highlight" content="no">
//网页不被缓存
meta http-equiv="Pragma" content="no-cache"
meta http-equiv="Cache-Control" content="no-cache"
meta http-equiv="Expires" content="0"
2.跨浏览器设置透明度
.tra{
filter:alpha(opacity=50);
-khtml-opacity:0.5;
-moz-opacity:0.5;
opactity:0.5
}
3.设置圆角(通过类名设置样式)
.cc{
-webkit-border-radius:4px 3px 6px 10px;
-moz-border-radius:4px 3px 6px 10px;
-o-border-radius:4px 3px 6px 10px;
 border-radius;4px 3px 6px 10px;
}
4.一般媒体查询方法（针对pc 智能设备 大屏幕)
A:智能设备（横屏和竖屏）
@medie only screen 
and(min-device-width:320px)
and(max-device-width:480px){}
B:智能设备(竖屏)
@media only screen and (min-width:321px){}
C:智能设备(横屏)
@media only screen and (max-width:320px){}
D:ipads(横屏和竖屏)
@media only screen and (min-device-width:768px)and(max-device-width:1024px){};
E:ipads(竖屏)
@media only screen and (min-device-width:768px)and(max-device-width:1024px)and(orientation:landscape){}
F:ipads(横屏)
@media only screen and (min-device-width:768px)and(max-device-width:1024px)and(orientation:portrait){}
G:台式机和笔记本
@media only screen and (min-width:1224px){}
H:超大屏
@media only screen and (min-width:1824px){}
i:苹果iphone4
@media only screen and(-webkit-min-device-pixel-ratio:1.5), only screen and(min-device-pixel-ratio:1.5){}
5.css字体缩写
font:font-style font-variant font-weight font-size line-height font-family;
font-style: normal italic oblique inherit;
font-variant:normal small-caps inherit 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小
6.自定义文本选择的高亮效果
::selection{background:#e2eae2;}
::-moz-selection{background:#e2eae2;}
::-webkit-selection{background:#eaeae2;}
7.全屏背景
html{
background:url('img/bg.jpg') no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-backgroud-size:cover;
background-size:cover;}
8.垂直居中
.cc{min-height:200px;display:table-cell;vertical-align:middle;}
9.强制垂直滚动条
html{height:101%;}
10.自定义段落首字母
p:first-letter{display:block;margin:5px 0 0 5ps;}
float:left;
color:#f35;
font-size:18px;
font-family:georgia;times new roman;}