手机web——自适应网页设计（html/css控制）

内核：

-ms-		/* IE 9 */

-moz-		/* Firefox */

-webkit- 	/* Safari and Chrome */

-o- 		/* Opera */

一. 网页宽度自动适应手机屏幕的宽度，在head标签内加上以下内容：

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

width=device-width ：表示宽度是设备屏幕的宽度

initial-scale=1.0：表示初始的缩放比例

minimum-scale=1.0：表示最小的缩放比例

maximum-scale=1.0：表示最大的缩放比例

user-scalable=yes：表示用户是否可以调整缩放比例

二. 不使用绝对宽度

1）不能指定像素宽度：

	width:xxx px;

2）只能指定百分比宽度：

	width: xx%;

	或者：width:auto;

3）例：宽度

width:74%;min-width:236px;opacity:0

三. 相对大小的字体

字体不能使用绝对大小（px），而只能使用相对大小（em）。

	body {font: normal 100% Helvetica, Arial, sans-serif;}

字体大小是页面默认大小的100%，即16像素。

像素(px)与倍数(em)的转换；

xx(em)=yy(px)/16;

xx(px) = yy(em)*16;

实例：12/16 = 0.75em;  0.875em*16 = 14px;

四. 流动布局（fluid grid）

"流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。

	.container {width: 70%;margin:auto; }

	.col1,col2,col3,col4 {float: left;width:25%;}

五. Media Query模块

1）加载*.css文件

<link type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" />

2）在现有CSS文件中加载。

@import url("tinyScreen.css") screen and (max-device-width: 400px);

六. CSS的@media规则

@media screen and (max-device-width: 400px) {

	.*{}

	#*{}

}

@media only screen and (max-width: 1200px) and (min-width:1024px){ }

七、竖屏与横屏的样式

1）竖屏时使用的样式

@media all and (orientation:portrait) {.css{}}

2）横屏时使用的样式

@media all and (orientation:landscape) {.css{}}

八. 图片的自适应（fluid image）

img, object { max-width: 100%;}

IE的专有命令

img { -ms-interpolation-mode: bicubic; }

九、手机拍照和上传图片

1）选择照片

<input type=file accept="image/*">

2）选择视频

<input type=file accept="video/*">

十、消除transition闪屏

.css{

	/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/

	-webkit-transform-style: preserve-3d;

	/*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/

	-webkit-backface-visibility: hidden;

}

十一、开启硬件加速

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

.css {

   -webkit-transform: translate3d(0, 0, 0);

   -moz-transform: translate3d(0, 0, 0);

   -ms-transform: translate3d(0, 0, 0);

   transform: translate3d(0, 0, 0);

}

十二、背景图自适应高宽

.css{background:url(img.jpg) no-repeat center center; background-size:100% auto;}

十三、字体引用

@font-face {

	src: url('../en.eot');

	url('../en.woff') format('woff'),

}

十四、盒子：

box-sizing:border-box;margin:0;padding:0

十五、清除：

.clear{clear:both;display:block;}

.clearfix:before,.clearfix:after{content:'.';display:block;}

.clearfix:after,{clear:both;}

.clearfix{zoom:1;}

十六、关于css3新特性

1）text-overflow

不显示省略标记，而是简单的裁切条

 .tit{text-overflow:clip; overflow:hidden; white-space:nowrap;} 

当对象内文本溢出时显示省略标记

 .tit_ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap;} 

2、圆角

border-radius: xxpx;

3、文本

text-emphasis 	向元素的文本应用重点标记以及重点标记的前景色。

text-justify 	规定当 text-align 设置为 "justify" 时所使用的对齐方法。

text-outline 	规定文本的轮廓。

text-overflow 	规定当文本溢出包含元素时发生的事情。

text-shadow 	向文本添加阴影。

text-wrap 	规定文本的换行规则。

word-break 	规定非中日韩文本的换行规则。

word-wrap 	允许对长的不可分割的单词进行分割并换行到下一行。

3、边框

border-image 	设置所有 border-image-* 属性的简写属性。

border-radius 	设置所有四个 border-*-radius 属性的简写属性。

box-shadow 	向方框添加一个或多个阴影。

4、背景：

background-size	大小

background-origin	区域（content-box）

案例：layout.css

@charset "utf-8";/*1em=16px 1px=0.0625px*/

/* `Basic HTML----------------------------------------------------------------------------------------------------*/

body{font:0.75em "微软雅黑",Arial,"Liberation Sans",FreeSans,sans-serif; background:#99cc99;}

body, html {font-size: 100%;padding: 0;margin: 0;}

pre,code{font-family:"DejaVu Sans Mono",Menlo,Consolas,monospace;}

hr{border:0 solid #ccc;border-top-width:1px;clear:both;height:0;}

img, object { max-width: 100%; -ms-interpolation-mode: bicubic; }

/* `Headings----------------------------------------------------------------------------------------------------*/

h1{font-size:2.5em;}

h2{font-size:2.3em;}

h3{font-size:2.1em;}

h4{font-size:1.9em;}

h5{font-size:1.7em;}

h6{font-size:1.5em;}

/* `Spacing----------------------------------------------------------------------------------------------------*/

ol{list-style:decimal;}

ul{list-style:none;}

ul,li,ol,dl,dd,p,hr,h1,h2,h3,h4,h5,h6,pre,table,address,fieldset,figure{margin:0px;padding:0px;}

a,a:hover{ text-decoration:none;outline:none;color:#333; cursor:pointer;}

*, *:after, *:before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

.fl{ float:left; display:inline;}

.fr{ float:right; display:inline;}

.tl{ text-align:left;}

.tc{ text-align:center;}

.tr{ text-align:right;}

.pr{ position:relative;}

.pa{ position:absolute;}

.none{ display:none;}

.db{ display:block;}

.mt10{ margin-top:10px;}

/* `Container----------------------------------------------------------------------------------------------------*/

.container,header{margin-left:auto;margin-right:auto;width:100%;-moz-box-align:center;-webkit-box-align:center;box-align:center;-moz-box-pack:center;-webkit-box-pack:center;box-pack:center}

/*

@media (max-width: 800px) {.container{width:674px;}}

@media (min-width: 800px) and (max-width: 1204px) {.container {width:800px;background:#333;}}

@media (min-width: 1204px) and (max-width: 1280px){.container {width:1204px;}}

@media (min-width: 1280px) and (max-width: 1360px){.container {width:1204px;}}

@media (min-width: 1360px) and (max-width: 1366px){.container {width:1360px;}}

@media (min-width: 1366px) and (max-width: 1440px){.container {width:950px;}}

@media (min-width: 1440px) and (max-width: 1600px){.container {width:1440px;}}

@media (min-width: 1600px) and (max-width: 1680px){.container {width:1500px;}}

@media (min-width: 1680px) and (max-width: 1920px){.container {width:1450px;}}

*/

.fluid {padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;}

.row {margin-right: -15px;margin-left: -15px;}

/* `Grid >> Global----------------------------------------------------------------------------------------------------*/

.col1,.col2,.col3,.col4,.col5,.col6,.col7,.col8,.col9,.col10,.col11,.col12{display:inline-block;float:left;}

/* `Grid >> Children (Alpha ~ First,Omega ~ Last)----------------------------------------------------------------------------------------------------*/

.alpha{margin-left:0;}

.omega{margin-right:0;}

/* `Grid >> 12 Columns----------------------------------------------------------------------------------------------------*/

.container .col1,header .col1{width:8.33333333%;}

.container .col2,header .col2{width:16.66666667%;}

.container .col3,header .col3{width:25%;}

.container .col4,header .col4{width:33.33333333%;}

.container .col5,header .col5{width:41.66666667%;}

.container .col6,header .col6{width:50%;}

.container .col7,header .col7{width:58.33333333%;}

.container .col8,header .col8{width:66.66666667%;}

.container .col9,header .col9{width:75%;}

.container .col10,header .col10{width:83.33333333%;}

.container .col11,header .col11{width:91.66666667%;}

.container .col12,header .col12{width:100%;}

/* `Clear Floated Elements----------------------------------------------------------------------------------------------------*/

.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}

.clearfix:before,.clearfix:after,.container:before,.container:after{content:'.';display:block;overflow:hidden;visibility:hidden;font-size:0;line-height:0;width:0;height:0;}

.clearfix:after,.container:after{clear:both;}

.clearfix,.container{zoom:1;}