響應式設計三部曲

時間 2019-11-11

標籤響應設計三部曲简体版

原文原文鏈接

譯文：響應式設計的三個步驟html

譯者：dwqscss3

如今，響應式Web設計無疑是很是流行的。若是你對響應式設計還不熟悉，能夠看看我以前發表過的關於這方面的responsive sites。對於新人，responsive design可能聽起來有點複雜，但實際上，它比你想的要簡單的多。爲了幫助你快速入門響應式Web設計，我寫了一篇快速入門教程。我保證你經過三步就能夠學會響應式設計的基本邏輯和媒體查詢(media query)(假設你有基本的CSS知識)。web

第一步：Meta標籤（看demo）

大部分移動瀏覽器會把HTML頁面縮放成較寬的viewport的寬度，這樣內容就能夠屏幕上正確的展現了。你可使用viewport這個meta標籤來重置這個行爲。下面的viewport標籤告訴瀏覽器使用設備寬度(device-width)作爲viewport的寬度，而且禁用初始的縮放比例。在<head>中加入這個meta標籤。瀏覽器

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

IE 8以及更早版本不支持媒體查詢，你可使用media-queries.js或者respond.js來增長IE對媒體查詢的支持。ide

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

第二步：HTML結構

在這個例子中，我擁有一個由頭部，內容容器，側邊欄，以及一個底部構成的基本的頁面佈局。頭部擁有一個固定的180px高度，內容容器600px寬，而後側邊欄是300px寬。svn

第三步：媒體查詢

CSS3 media query是進行響應式設計的戲法，它跟寫if條件同樣，來告訴瀏覽器對於特定的viewport寬度如何渲染頁面。佈局

下面的規則是針對視口寬度小於等於980px設計的。基本上，我把全部容器的寬度從像素值改爲了百分比值，這樣容器就會變得具備流動性(fluid)。字體

而後對於寬度小於或等於700px的viewport，指定#content和#sidebar爲自動寬度，而且移除浮動，因此他們能夠以全寬度進行展現。ui

對於寬度小於等於480px(移動設備屏幕)的，重置#header的高度爲auto，修改h1的字體大小爲24px，而且隱藏#sidebar。

你能夠想寫多少媒體查詢就寫多少。我在demo中只展現了三個媒體查詢。媒體查詢的目的是對於指定的viewport寬度能夠經過應用不一樣的CSS規則來得到不一樣的佈局。媒體查詢能夠在同一個樣式表中或者在一個單獨的文件中。

總結

這個教程意圖在於向你展現基本的響應式設計，若是你想更深刻的瞭解，能夠看看我以前的文章：Responsive Design With Media Queries.

原文首發：http://www.ido321.com/1395.html

相關標籤/搜索

每日一句

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