響應式網站的設計技巧

——關于呼應式

在移動互聯網的大時代iOS 和 Android的發布，智能手機、平板電腦、智能家電等新設備層出不窮，極大便利了咱們的生活，但面臨五花八門的終端設備，千差萬別的屏幕分辨率，給網

頁設 計帶來了新的挑戰，咱們無法估計用戶的終端設備和網絡狀況，更不可能為每種設備都專門規劃一套網站，怎么完成網頁在多終端設備中的適配呢？

呼應式，火火火火起來了！

2010 年 Ethan Marcotte 曾經在 A List Apart 發表過一篇文章"Responsive Web Design"，呼應式網頁規劃提供了一種規劃辦法，可以使同一網站在智能手機、桌面電腦，以及介于這

兩者 之間的恣意設備上好顯示。這種辦法能夠根據用戶的屏幕尺度，合理地為現有及將來的各種設備的閱讀體驗。

Ethan Marcotte稱呼應式規劃是基于網格樹立一個網站。Marcotte界說這項技術后，網格引進網頁規劃，出現了許多CSS網格結構，幾乎成了網頁規劃的標準。目的是讓網頁布局更合理，

是給 予一種標準，令排版者可以較為便利的組織標題、列表、段落、圖片等元素，保持版面元素之間的一致性。對“流體式”的呼應式網站更是一個重要的規劃標準。

以前有很長一段時間，我一向搞不明白究竟什么是柵格，首先咱們有必要要對柵格體系有一個根本的認知，關于柵格，柵格是由網格演化而來的另一種說法，都是一個意思——格子，所以

——標準。將柵格視為一種秩序體系來進行使用，是網頁規劃師某種特定的精神和情緒的表達，應為它表現規劃師是以一種結構、邏輯的方法來進行構思和規劃的。

在網頁規劃中，如果把網頁寬度均勻切分為多個網格單元，每個單元之間預留必定的空隙，此刻整個頁面就如同一個柵格體系。標準的柵格體系中所包括的幾個部分，分別是總寬w、列寬

槽寬g=2*m

總寬w=g+N*c+(N-1)*g

總寬w=N*(c+g)

巨細 的調配，畫面圖形松緊，使用柵格規劃出對畫面更有節奏呼吸的排版，奇妙使用柵格，呼應式網站更合理。

當前文章：響應式網站的設計技巧
文章源于：http://m.kartarina.com/news38/60688.html

網站建設、網絡推廣公司-創新互聯，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有網站設計、響應式網站等

廣告

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