自適應(yīng)網(wǎng)頁的實現(xiàn)

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像素之間，則導航欄移到網(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ù)不同的屏幕分辨率，加載不同大小像素的圖片。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 14,168評論 1贊 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML標準。 注意：講述HT...
    kismetajun閱讀 28,829評論 1贊 45
  • 雖然這是一個“講文明、樹新風”的時代，但讓人看不懂的是，一夜之間，就連“嘿嘿嘿”這種簡單地語氣詞竟突然也變成了千夫...
    妙計旅行閱讀 889評論 0贊 49
  • 第1章 好消息？ 2017年2月12日，美國紐約，早上八點整。 一陣悠揚的小提琴音樂聲準時響起。 是董青青的手機鬧...
    蘇菲的后花園閱讀 646評論 0贊 0
  • 本文由玄學翻譯社企劃制作！歡迎關(guān)注。 企劃：宋雅文、楊雍；翻譯：滿月、王蛇無毒、Thest、一個兔角鹿、風語時；校...
    奶牛關(guān)游戲社區(qū)閱讀 69,259評論 1贊 16

友情鏈接更多精彩內(nèi)容