html5響應(yīng)式布局的詳細(xì)介紹

本篇內(nèi)容主要講解“html5響應(yīng)式布局的詳細(xì)介紹”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“html5響應(yīng)式布局的詳細(xì)介紹”吧!

為寧陜等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及寧陜網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、寧陜網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

一、什么是響應(yīng)式布局?

響應(yīng)式布局是Ethan Marcotte在2010年5月份提出的一個(gè)概念，簡(jiǎn)而言之，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。

這個(gè)概念是為解決移動(dòng)互聯(lián)網(wǎng)瀏覽而誕生的。響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗(yàn)，而且隨著目前大屏幕移動(dòng)設(shè)備的普及，用大勢(shì)所趨來形容也不為過。

隨著越來越多的設(shè)計(jì)師采用這個(gè)技術(shù)，我們不僅看到很多的創(chuàng)新，還看到了一些成形的模式。

二、響應(yīng)式布局有哪些優(yōu)點(diǎn)和缺點(diǎn)?

優(yōu)點(diǎn)：

面對(duì)不同分辨率設(shè)備靈活性強(qiáng)
能夠快捷解決多設(shè)備顯示適應(yīng)問題
缺點(diǎn)：

兼容各種設(shè)備工作量大，效率低下
代碼累贅，會(huì)出現(xiàn)隱藏?zé)o用的元素，加載時(shí)間加長(zhǎng)
其實(shí)這是一種折衷性質(zhì)的設(shè)計(jì)解決方案，多方面因素影響而達(dá)不到最佳效果
一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)，會(huì)出現(xiàn)用戶混淆的情況

三、響應(yīng)式布局該怎么設(shè)計(jì)?

1、如何解決不同設(shè)備間的兼容問題？

CSS3中的Media Query（媒介查詢）可以解決這個(gè)問題。

2、media query能夠獲取哪些值?

設(shè)備的寬和高device-width，device-heigth顯示屏幕/觸覺設(shè)備。

渲染窗口的寬和高width，heigth顯示屏幕/觸覺設(shè)備。

設(shè)備的手持方向，橫向還是豎向orientation(portrait|lanscape)和打印機(jī)等。

畫面比例aspect-ratio點(diǎn)陣打印機(jī)等。

設(shè)備比例device-aspect-ratio-點(diǎn)陣打印機(jī)等。

對(duì)象顏色或顏色列表color，color-index顯示屏幕。

設(shè)備的分辨率resolution

3、語法結(jié)構(gòu)及用法

語法：@media 設(shè)備名 only (選取條件) not (選取條件) and(設(shè)備選取條件)，設(shè)備二{sRules}

用法：

a、示例一：在link中使用@media：

上面使用中only可省略，限定于計(jì)算機(jī)顯示器，第一個(gè)條件max-width是指渲染界面最大寬度，第二個(gè)條件max-device-width是指設(shè)備最大寬度。

b、在樣式表中內(nèi)嵌@media：

代碼如下:

@media (min-device-width:1024px) and (max-width:989px),screen and (max-device-width:480px),(max-device-width:480px)
and (orientation:landscape),(min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) {srules}

設(shè)置了電腦顯示器分辨率（寬度）大于或等于1024px（并且最大可見寬度為989px）；屏寬在480px及其以下手持設(shè)備；屏寬在480px以及橫向（即480尺寸平行于地面）放置的手持設(shè)備；

屏寬大于或等于480px小于1024px以及垂直放置設(shè)備的css樣式。

四、實(shí)現(xiàn)響應(yīng)式布局

代碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="<a href="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script">http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script</a>>
<title>Document</title>
<style>
/**
設(shè)計(jì)思路很簡(jiǎn)單，首先先定義在標(biāo)準(zhǔn)瀏覽器下的固定寬度（假如標(biāo)準(zhǔn)瀏覽器的分辨率為1024px，那么我們?cè)O(shè)置寬為980px），
然后用Media Query來監(jiān)測(cè)瀏覽器的尺寸變化，當(dāng)瀏覽器的分辨率小于1024px的時(shí)候，
則通過Media Query預(yù)設(shè)的樣式表來將頁面的寬度設(shè)置為百分比顯示，
這樣子頁面的結(jié)構(gòu)元素就會(huì)根據(jù)瀏覽器的的尺寸來進(jìn)行相對(duì)應(yīng)的調(diào)整。
同理，當(dāng)瀏覽器的可視區(qū)域改變到某個(gè)值（假如為650px）的時(shí)候，
頁面的結(jié)構(gòu)元素根據(jù)Media Query預(yù)設(shè)的層疊樣式表來進(jìn)行相對(duì)應(yīng)的調(diào)整。看看我們的例子：
**/
/* 當(dāng)瀏覽器的可視區(qū)域小于980px */
@media screen and (max-width: 980px) {
#wrap {width: 90%; margin:0 auto;}
#content {width: 60%;padding: 5%;}
#sidebar {width: 30%;}
#footer {padding: 8% 5%;margin-bottom: 10px;}
}
/* 當(dāng)瀏覽器的可視區(qū)域小于650px */
@media screen and (max-width: 650px) {
#header {height: auto;}
#searchform {position: absolute;top: 5px;right: 0;}
#content {width: auto; float: none; margin: 20px 0;}
#sidebar {width: 100%; float: none; margin: 0;}
}
/** 為了更好的顯示效果，我們往往還要格式化一些CSS屬性的初始值：***/
/* 禁用iPhone中Safari的字號(hào)自動(dòng)調(diào)整 */
html {
-webkit-text-size-adjust: none;
}
/* 設(shè)置HTML5元素為塊 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
/* 設(shè)置圖片視頻等自適應(yīng)調(diào)整 */
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
.video embed, .video object, .video iframe {
width: 100%;
height: auto;
}
</style>
</head>
<body>
</body>
</html>

到此，相信大家對(duì)“html5響應(yīng)式布局的詳細(xì)介紹”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

網(wǎng)頁標(biāo)題：html5響應(yīng)式布局的詳細(xì)介紹
地址分享：http://jinyejixie.com/article30/ppsjso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、自適應(yīng)網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)、外貿(mào)建站、網(wǎng)頁設(shè)計(jì)公司、響應(yīng)式網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

html5響應(yīng)式布局的詳細(xì)介紹