html5響應(yīng)式布局的技巧有哪些

這篇文章主要介紹“html5響應(yīng)式布局的技巧有哪些”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“html5響應(yīng)式布局的技巧有哪些”文章能幫助大家解決問題。

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站設(shè)計、成都做網(wǎng)站、漢源網(wǎng)絡(luò)推廣、微信平臺小程序開發(fā)、漢源網(wǎng)絡(luò)營銷、漢源企業(yè)策劃、漢源品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供漢源建站搭建服務(wù)，24小時服務(wù)熱線：028-86922220，官方網(wǎng)址：www.rwnh.cn

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

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

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

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

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

優(yōu)點：

面對不同分辨率設(shè)備靈活性強

能夠快捷解決多設(shè)備顯示適應(yīng)問題

缺點：

兼容各種設(shè)備工作量大，效率低下

代碼累贅，會出現(xiàn)隱藏無用的元素，加載時間加長

其實這是一種折衷性質(zhì)的設(shè)計解決方案，多方面因素影響而達不到最佳效果

一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)，會出現(xiàn)用戶混淆的情況

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

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

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

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

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

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

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

畫面比例aspect-ratio點陣打印機等。

設(shè)備比例device-aspect-ratio-點陣打印機等。

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

設(shè)備的分辨率resolution

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

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

用法：

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

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

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

復(fù)制代碼

代碼如下:

@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樣式。

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

復(fù)制代碼

代碼如下:

<!DOCTYPE html>

<head>

<!-- 必須加這句話

width – viewport的寬度

height – viewport的高度

initial-scale – 初始的縮放比例

minimum-scale – 允許用戶縮放到的最小比例

maximum-scale – 允許用戶縮放到的最大比例

user-scalable – 用戶是否可以手動縮放

-->

<!--最后對于在IE瀏覽器中不支持media query的情況，我們可以使用Media Query JavaScript來解決，

只需要在頁面頭部引用css3-mediaqueries.js即可 -->

<title>Document</title>

<style>

/**

設(shè)計思路很簡單，首先先定義在標準瀏覽器下的固定寬度（假如標準瀏覽器的分辨率為1024px，那么我們設(shè)置寬為980px），

然后用Media Query來監(jiān)測瀏覽器的尺寸變化，當瀏覽器的分辨率小于1024px的時候，

則通過Media Query預(yù)設(shè)的樣式表來將頁面的寬度設(shè)置為百分比顯示，

這樣子頁面的結(jié)構(gòu)元素就會根據(jù)瀏覽器的的尺寸來進行相對應(yīng)的調(diào)整。

同理，當瀏覽器的可視區(qū)域改變到某個值（假如為650px）的時候，

頁面的結(jié)構(gòu)元素根據(jù)Media Query預(yù)設(shè)的層疊樣式表來進行相對應(yīng)的調(diào)整?？纯次覀兊睦樱?/p>

**/

/* 當瀏覽器的可視區(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;}

}

/* 當瀏覽器的可視區(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的字號自動調(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>

關(guān)于“html5響應(yīng)式布局的技巧有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。

文章標題：html5響應(yīng)式布局的技巧有哪些
本文URL：http://www.rwnh.cn/article34/psjcpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、企業(yè)網(wǎng)站制作、服務(wù)器托管、域名注冊、網(wǎng)頁設(shè)計公司、全網(wǎng)營銷推廣

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

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

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

html5響應(yīng)式布局的技巧有哪些