1.自適應(yīng)網(wǎng)頁設(shè)計
2010年医男，Ethan Marcotte提出了"自適應(yīng)網(wǎng)頁設(shè)計"（Responsive Web Design）這個名詞，指可以自動識別屏幕寬度掂之、并做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計蕊梧。
他制作了一個范例，里面是《福爾摩斯歷險記》六個主人公的頭像球拦。如果屏幕寬度大于1300像素，則6張圖片并排在一行。
如果屏幕寬度在600像素到1300像素之間坎炼，則6張圖片分成兩行愧膀。
如果屏幕寬度在400像素到600像素之間，則導(dǎo)航欄移到網(wǎng)頁頭部谣光。
如果屏幕寬度在400像素以下檩淋，則6張圖片分成三行。
mediaqueri.es上面有更多這樣的例子萄金。
2.允許網(wǎng)頁寬度自動調(diào)整
首先狼钮，在網(wǎng)頁代碼的頭部，加入一行viewport元標簽捡絮。
<meta name="viewport" content="width=device-width, ?initial-scale=1" />
viewport是網(wǎng)頁默認的寬度和高度，上面這行代碼的意思是莲镣，網(wǎng)頁寬度默認等于屏幕寬度（width=device-width）福稳，原始縮放比例（initial-scale=1）為1.0，即網(wǎng)頁初始大小占屏幕面積的100%瑞侮。
<!--if lt IE 9]>
? ? ? ?<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"><script>
? ? ? ? <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.js"><script>
<![endif]-->
所有主流瀏覽器都支持這個設(shè)置的圆，包括IE9。對于那些老式瀏覽器（主要是IE6半火、7越妈、8），需要使用css3-mediaqueries.js钮糖。
3梅掠、不使用絕對寬度
由于網(wǎng)頁會根據(jù)屏幕寬度調(diào)整布局，所以不能使用絕對寬度的布局店归，也不能使用具有絕對寬度的元素阎抒。這一條非常重要。
具體說消痛，CSS代碼不能指定像素寬度：
width:xxx px;
只能指定百分比寬度：
width: xx%; ? ? ? 或者 ? ? width:auto;
4.base.css公共樣式pc端
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {?margin:0;padding:0;border: 0;}
ol,li,ul,dl,dt,dd{list-style:none;}
table{border-collapse:collapse;border-spacing:0}
h1,h2,h3,h4,h5,h6,i,strong {font-weight: normal;}
img {vertical-align: middle;border: none;width: 100%;}
i {font: inherit;}
a {color: #fff;text-decoration: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color:transparent;}
a:hover {text-decoration: underline; outline: none;}
select::-ms-expand { display: none; }
a:active,a:hover{outline:0}
.clearfix::before,
.clearfix::after{
content: '';
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}
.fl{?float:left;}
.fr{float:right;}
input,select,option{vertical-align:middle;border-radius:0px;-moz-appearance:none;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);outline: none;}
input[type="text"],input[type="button"],input[type="submit"],input[type="reset"]{-webkit-appearance: none;appearance: none;border-radius: 0;outline: none;}
.overflow {overflow:hidden; }
base.css公共樣式移動端
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {?margin:0;padding:0}
ol,li,ul,dl,dt,dd{list-style:none;}
.fl {float: left;}
.fr {float: right;}
table{border-collapse:collapse;border-spacing:0}
html { ?
? ? -webkit-text-size-adjust: 100%; ?
? ? -ms-text-size-adjust: 100%; ?
? ? /* 解決IOS默認滑動很卡的情況 */ ?
? ? -webkit-overflow-scrolling : touch; ?
} ?
/* 禁止縮放表單 */ ?
input[type="submit"], input[type="reset"], input[type="button"], input { ?
? ? resize: none; ?
? ? border: none; ?
} ?
/* 取消鏈接高亮 ?*/ ?
body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { ?
? ? -webkit-tap-highlight-color: rgba(0, 0, 0, 0); ?
} ?
/* 設(shè)置HTML5元素為塊 */ ?
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { ?
? ? display: block; ?
} ?
/* 圖片自適應(yīng) */ ?
img { ?
? ? width: 100%; ?
? ? height: auto; ?
? ? width: auto\9; /* ie8 */ ?
? ? -ms-interpolation-mode: bicubic;/*為了照顧ie圖片縮放失真*/ ?
} ?
em, i { ?
? ? font-style: normal; ?
} ?
textarea { ?
? ? resize:none; /*禁用了文本的拖拉且叁，尤其在谷歌下*/ ?
} ??
p { ?
? ? word-wrap:break-word; /* 不夠的單詞自動換行 而不會被截掉 */ ?
} ?
.clearfix:after { ?
? ? content: ""; ?
? ? display: block; ?
? ? visibility: hidden; ?
? ? height: 0; ?
? ? clear: both; ?
} ?
.clearfix { ?
? ? zoom: 1; ?
} ?
a { ?
? ? text-decoration: none; ?
? ? color: #fff; ?
? ? font-family: 'Microsoft YaHei', Tahoma, Arial, sans-serif; ?
} ?
a:hover { ?
? ? text-decoration: none; ?outline: none;
} ?
h1, h2, h3, h4, h5, h6 { ?
? ? font-size: 100%; ?
? ? font-family: 'Microsoft YaHei'; ?
} ?
img { ?
? ? border: none; ?
} ?
input{ ?
? ? font-family: 'Microsoft YaHei'; ?
} ?
/*單行溢出*/ ?
.one-txt-cut{ ?
? ? overflow: hidden; ?
? ? white-space: nowrap; ?
? ? text-overflow: ellipsis; ?
} ?
/*多行溢出 手機端使用*/ ?
.txt-cut{ ?
? ? overflow : hidden; ?
? ? text-overflow: ellipsis; ?
? ? display: -webkit-box; ?
? ? /* -webkit-line-clamp: 2; */ ?
? ? -webkit-box-orient: vertical; ?
} ?
/* 移動端點擊a鏈接出現(xiàn)藍色背景問題解決 */ ?
a:link,a:active,a:visited,a:hover { ?
? ? background: none; ?
? ? -webkit-tap-highlight-color: rgba(0,0,0,0); ?
? ? -webkit-tap-highlight-color: transparent; ?
} ?
.overflow {overflow:hidden; }
.w50{ ?
? ? width: 50%; ?
} ?
.w25{ ?
? ? width: 25%; ?
} ?
.w20{ ?
? ? width: 20%; ?
} ?
.w33{ ?
? ? width: 33.333333%; ?
}
4. CSS的@media規(guī)則
同一個CSS文件中，也可以根據(jù)不同的屏幕分辨率秩伞，選擇應(yīng)用不同的CSS規(guī)則逞带。?
@media screen and (max-device-width: 400px) {?
.column {?
float: none;?
width:auto;?
}?
#sidebar {?
display:none;?
}?
}?
上面的代碼意思是，如果屏幕寬度小于400像素纱新，則column塊取消浮動（float:none）展氓、寬度自動調(diào)節(jié)（width:auto），sidebar塊不顯示（display:none）怒炸。
5.移動端自適應(yīng)高度和寬度
???? 移動端的相對要簡單些带饱，首先，在網(wǎng)頁代碼的頭部，加入一行viewport標簽勺疼。
? <meta name="viewport" content="width=device-width,initial-scale=1" />
???? viewport是網(wǎng)頁默認的寬度和高度教寂，上面的意思表示，網(wǎng)頁的寬度默認等于設(shè)備屏幕的寬度执庐，原始縮放比例為1酪耕，即網(wǎng)頁初始大小占屏幕面積的100%。
1：由于網(wǎng)頁會根據(jù)屏幕寬度調(diào)整布局轨淌，所以不能使用絕對寬度的布局迂烁，也不能使用具有絕對寬度的元素。這一條非常重要递鹉。具體說盟步，CSS代碼不能指定像素寬度：width:xxx?px;只能指定百分比寬度：width:?xx%;或者width:auto;
2：一般使用em,盡量少使用px字體
3：使用流動布局
4：自適應(yīng)網(wǎng)頁設(shè)計”的核心，就是CSS3引入的media query模塊躏结。下載地址：http://download.csdn.net/download/song_121292057/8031781
??? 自動探測屏幕寬度却盘，然后加載相應(yīng)的CSS文件。
-------當屏幕小于400時媳拴，就加載style.css這個文件
?5：除了用html標簽加載CSS文件黄橘，還可以在現(xiàn)有CSS文件中加載。
? @import?url("style2.css")?screen?and?(max-device-width: 800px);//當小于800px屏幕時屈溉，就加載style2.css文件
6:圖片的自動縮放塞关，比較簡單。只要一行CSS代碼：img{?max-width:?100%;}建議根據(jù)不同的屏幕分辨率子巾，加載不同大小像素的圖片帆赢。
