同樣的(de)一個(gè)網頁會在不同設備上顯示不同的(de)布局，從而帶來(lái)良好的(de)用(yòng)戶體驗。本文将通(tōng)過設計一個(gè)簡單到不能再簡單的(de)響應式框架來(lái)昆山建站公司展現響應式設計的(de)基本原理(lǐ)。網頁的(de)響應式設計是一種設計實踐，這(zhè)種設計實踐是随著(zhe)移動互聯網時(shí)代的(de)到來(lái)而逐漸興起的(de)。随著(zhe)智能設備的(de)興起，人(rén)們不再僅僅是通(tōng)過個(gè)人(rén)電腦(nǎo)來(lái)訪問網頁，還(hái)有可(kě)能使用(yòng)智能手機或者平闆電腦(nǎo)昆山建站公司，如何适配各種不同尺寸大(dà)小，不同分(fēn)辨率的(de)設備，爲網頁設計帶來(lái)了(le)新的(de)挑戰。而響應式設計就是一種解決方案，采用(yòng)響應式設計後，

一. 什(shén)麽是響應式設計

就像我們可(kě)以用(yòng)盒子模型的(de)思維來(lái)看待網頁一樣，我們同樣可(kě)以使昆山建站公司用(yòng)“格子”的(de)思維來(lái)看待網頁的(de)結構。我們的(de)眼睛在看東西時(shí)會遵循一定的(de)模式，比如先從左往右看，然後從上往下(xià)看。比如先看文字，然後看标題，最後再閱讀下(xià)面的(de)文字等等。我們将這(zhè)樣的(de)設計稱爲網格布局，很多(duō)網站都遵昆山建站公司循網格布局。

編寫一個(gè)響應式框架的(de)原理(lǐ)就是通(tōng)過創建一些通(tōng)用(yòng)的(de)CSS類來(lái)定義所需要的(de)樣式，特别是控制元素寬度的(de)技巧以及在頁面上排布的(de)方式。創建用(yòng)于控制布局的(de)CSS類是一種最佳實踐。

二. 一個(gè)非常簡單的(de)響應昆山建站公司式框架

要實現響應式設計，讓網站根據浏覽器的(de)大(dà)小來(lái)改變元素的(de)大(dà)小，肯定不能用(yòng)絕對(duì)尺寸，比如300px，必須使用(yòng)百分(fēn)比代表的(de)相對(duì)尺寸。在上一個(gè)學習(xí)筆記中我們提到，如果将元素的(de)尺寸設置爲百分(fēn)比，那麽該元素的(de)昆山建站公司大(dà)小由離它最近的(de)父元素大(dà)小決定。響應式框架的(de)基本原理(lǐ)就是将一行（row）拆分(fēn)爲12個(gè)網格（grid），這(zhè)樣我們就可(kě)以基于網格進行各種形态的(de)布局設計。

三. 一些小技巧

1. 負空間

設計中有個(gè)概念叫“負空間昆山建站公司”，即不包含任何内容的(de)空間。如果你發現相鄰的(de)文字之間靠的(de)太近，可(kě)以使用(yòng)padding爲元素增加内邊距。内邊距是元素之間創建負空間的(de)絕佳手段。如果想在元素外邊創建負空間，還(hái)可(kě)以使用(yòng)外邊距margin。

四昆山建站公司. 媒體查詢

可(kě)以使用(yòng)媒體查詢（media queries），使得(de)CSS随著(zhe)頁面的(de)變化(huà)而發生改變。這(zhè)樣無論用(yòng)戶是使用(yòng)手機還(hái)是台式機，都可(kě)以根據用(yòng)戶所用(yòng)設備類型來(lái)改變頁面的(de)CSS。例如以下(xià)媒體查詢将在屏幕昆山建站公司小于300px時(shí)将段落中的(de)文字背景顔色改爲藍色。

五. 适配各型浏覽器

一旦建立了(le)HTML的(de)結構，就可(kě)以考慮添加其他(tā)東西了(le)，比如語義标簽。對(duì)于頁面昆山建站公司上比較重要的(de)信息，可(kě)以使用(yòng)h1，h2和(hé)h3這(zhè)樣的(de)元素來(lái)顯示，同時(shí)也(yě)可(kě)以用(yòng)語義元素劃分(fēn)頁面的(de)區(qū)域，比如header，footer等等。