html5 響應式佈局

時間 2019-11-17

標籤 html5 html 響應佈局欄目 HTML5 简体版

原文原文鏈接

1、什麼是響應式佈局?css

響應式佈局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站可以兼容多個終端——而不是爲每一個終端作一個特定的版本。html

這個概念是爲解決移動互聯網瀏覽而誕生的。響應式佈局能夠爲不一樣終端的用戶提供更加溫馨的界面和更好的用戶體驗，並且隨着目前大屏幕移動設備的普及，用大勢所趨來形容也不爲過。css3

隨着愈來愈多的設計師採用這個技術，咱們不只看到不少的創新，還看到了一些成形的模式。web

2、響應式佈局有哪些優勢和缺點?

優勢：

面對不一樣分辨率設備靈活性強
可以快捷解決多設備顯示適應問題

缺點：

兼容各類設備工做量大，效率低下
代碼累贅，會出現隱藏無用的元素，加載時間加長
其實這是一種折衷性質的設計解決方案，多方面因素影響而達不到最佳效果
必定程度上改變了網站原有的佈局結構，會出現用戶混淆的狀況

3、響應式佈局該怎麼設計?

一、如何解決不一樣設備間的兼容問題？瀏覽器

CSS3中的Media Query（媒介查詢）能夠解決這個問題。ide

二、media query可以獲取哪些值?svn

設備的寬和高device-width，device-heigth顯示屏幕/觸覺設備。佈局

渲染窗口的寬和高width，heigth顯示屏幕/觸覺設備。網站

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

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

設備比例device-aspect-ratio-點陣打印機等。

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

設備的分辨率resolution

三、語法結構及用法

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

用法：

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

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

b、在樣式表中內嵌@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}

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

屏寬大於或等於480px小於1024px以及垂直放置設備的css樣式。

4、實現響應式佈局

<!DOCTYPE html>

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

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

<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<title>Document</title>
<style>
/**

設計思路很簡單，首先先定義在標準瀏覽器下的固定寬度（假如標準瀏覽器的分辨率爲1024px，那麼咱們設置寬爲980px），
而後用Media Query來監測瀏覽器的尺寸變化，當瀏覽器的分辨率小於1024px的時候，
則經過Media Query預設的樣式表來將頁面的寬度設置爲百分比顯示，
這樣子頁面的結構元素就會根據瀏覽器的的尺寸來進行相對應的調整。
同理，當瀏覽器的可視區域改變到某個值（假如爲650px）的時候，
頁面的結構元素根據Media Query預設的層疊樣式表來進行相對應的調整。看看咱們的例子：
**/

/* 當瀏覽器的可視區域小於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;}
}
/* 當瀏覽器的可視區域小於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的字號自動調整 */
html {
-webkit-text-size-adjust: none;
}
/* 設置HTML5元素爲塊 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
/* 設置圖片視頻等自適應調整 */
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
.video embed, .video object, .video iframe {
width: 100%;
height: auto;
}
</style>
</head>
<body>