本文摘自: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;}
转载于:https://www.cnblogs.com/QIQIZAIXIAN/p/6347612.html
