三步實現響應式網頁佈局

時間 2019-12-06

標籤三步實現響應網頁佈局欄目 HTML 简体版

原文原文鏈接

第一步：Meta標籤css

大多數移動瀏覽器將HTML頁面放大爲寬的視圖（viewport）以符合屏幕分辨率。你能夠使用視圖的meta標籤來進行重置。下面的視圖標籤告訴瀏覽器，使用設備的寬度做爲視圖寬度並禁止初始的縮放。在<head>標籤里加入這個meta標籤。css3

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

IE8或者更早的瀏覽器並不支持Media Query。你能夠使用media-queries.js或者respond.js來爲IE添加Media Query支持。web

<!--[if lt IE 9]>  
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>  
<![endif]-->

第二步：HTML結構瀏覽器

在這個例子裏，我有一個包括頭部、內容、側邊欄和頁腳的基本頁面佈局。頭部有固定的高度180像素，內容容器是600像素而側邊欄是300像素。ide

第三步：媒介查詢-Media Queriessvn

CSS3 Media Query-媒介查詢是響應式設計的核心。它根據條件告訴瀏覽器如何爲指定視圖寬度渲染頁面。
當視圖寬度爲小於等於980像素時，以下規則將會生效。基本上，我會將全部的容器寬度從像素值設置爲百分比以使得容器大小自適應。佈局

而後爲小於等於700像素的視圖指定#content和#sidebar的寬度爲自適應而且清除浮動，使得這些容器按全寬度顯示。字體

對於小於等於480像素（手機屏幕）的狀況，將#header元素的高度設置爲自適應，將h1的字體大小修改成24像素並隱藏側邊欄。google

你能夠根據你的喜愛添加足夠多的媒介查詢。我在示例中僅僅展現了3個媒介查詢。媒介查詢的目的在於爲指定的視圖寬度指定不一樣的CSS規則，來實現不一樣的佈局。媒介查詢能夠寫在同一個或者單獨的樣式表中。spa

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。