當下流行的響應式布局介紹

什麼叫做響應式布局？

也即是響應式web設計。響應式布局是ethan marcotte在2023年5月份提出的乙個概念，簡而言之，就是乙個**能夠相容多個終端——而不是為每個終端做乙個特定的版本。這個概念是為解決移動網際網路瀏覽而誕生的。

響應式布局可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗，隨著現在各種終端的快速發展，做出一些能夠適應不同解析度、不同平台、不同螢幕大小的網頁尤為重要，這不僅使得自己的**適應不同終端的能力更強，同時也為使用者帶來了良好的體驗。而且隨著目前大螢幕移動裝置的普及，用大勢所趨來形容也不為過。隨著越來越多的設計師採用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式。

怎樣實現響應式布局？

對於這個問題，我們可以通過css3中的media query來實現，即媒介查詢。**查詢讓css可以更精確作用於不同的**型別和同一**的不同條件。**查詢的大部分**特性都接受min和max用於表達"大於或等於"和"小與或等於"。如：width會有min-width和max-width**查詢可以被用在css中的@media和@import規則上，也可以被用在html和xml中。通過這個標籤屬性，我們可以很方便的在不同的裝置下實現豐富的介面，特別是移動裝置，將會運用更加的廣泛。

首先我們要允許網頁寬度自動調整

在網頁**的頭部，加入一行viewport元標籤：

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

viewport是網頁預設的寬度和高度，上面這行**的意思是，網頁寬度預設等於螢幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小佔螢幕面積的100%。

下面通過media query我們可以得到不同裝置螢幕的寬和高，從而我們就可以分別處理了。根據不同的裝置螢幕寬度，設定不同的css。那麼這裡有兩種方法：

1、外聯樣式表

在這裡我們可以根據不同的裝置載入不同的css樣式表

<
linkrel
="stylesheet"
type
="text/css"
media
="screen and (min-width:960px)"
href
="css/gt-960px.css"
>

當頁面寬度大於等於960px時，載入樣式表gt-960px.css

<
linkrel
="stylesheet"
type
="text/css"
media
="screen and (min-width:600px) and (max-width:960px)"
href
="css/gt-600px-lt-960px.css"
>

當頁面寬度大於等於600px且小於等於960px時，載入樣式表gt-600px-lt-960px.css

<
linkrel
="stylesheet"
type
="text/css"
media
="screen and (max-width:600px)"
href
="css/lt-600px.css"
>

當頁面寬度小於等於600px時，載入樣式表lt-600px.css

2、樣式表中內嵌法

當頁面寬度大於等於960px時

@media screenand (min-width:960px).sidebarleft,
.main,
.sidebarright...
}

當頁面寬度大於等於600px且小於等於960px時

@media screenand (min-width:600px) and (max-width:960px).sidebarleft,
.main...
}

當頁面寬度小於等於600px時

@media screenand (max-width:600px).sidebarleft,
.sidebarright...
}

請注意，我這裡還是用到了絕對寬度，如"width:400px;"，嚴謹地說，這還是不夠規範的，當然這還要看具體情況了，如果想完全響應式布局的話，那麼就不能使用固定的寬度了，可以設為自動或百分比，如"width:auto;"或"width:xx%;"，另外字型也要設為百分比。

彈性

我們需要為設定max-width: 100%和height: auto，來實現其彈性化。

img

.video embed,

.video object,

.video iframe

最後，我們來看個示例吧：

示例

當下流行的響應式布局介紹

當下流行的開源框架

響應式布局介紹

當下流行的語音識別技術是不是發展錯了方向

當下流行的響應式布局介紹

當下流行的開源框架

響應式布局 介紹

當下流行的語音識別技術是不是發展錯了方向

相關推薦

響應式布局介紹