關於響應式設計的一些關鍵點

一、響應式設計關鍵點在於：

媒體查詢、流動網格、彈性圖片，而不是flex佈局或者是自適應佈局

響應式和自適應的最直觀的區別是：
自適應是爲了解決如何才能在不一樣大小的設備上呈現一樣的網頁，直觀地來看就是盒子會根據屏幕分辨率的大小進行伸縮變換。
因此，就是PC端與手機端瀏覽的時候就是一個設計的板式，這樣子固然是體驗比較差的。

響應式設計就解決了這個問題，即不一樣大小的設備，不一樣類型的設備顯現不一樣的網頁，具體的區別在於不一樣的大小或設備類型的設備，加載不一樣的css。
這裏使用到的最多的css3中的@media屬性，即媒體查詢

二、響應式設計實踐原則

• progressive enhancement（漸進加強）

漸進加強(英語：Progressive enhancement)是網頁設計的一種策略，強調可訪問性，語義HTML標記，外部樣式表和腳本技術。 漸進加強使用Web技術以分層的方式，容許全部人訪問網頁的基本內容和功能，使用任何瀏覽器或互聯網鏈接，同時還給更先進的瀏覽器軟件或更大的帶寬提供了這些頁面的一個加強版本。

• graceful degradation (優雅降級)

優雅降級，用一句話來講就是：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。

區別：優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給，而漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要。降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地帶。

三、設置斷點

應用css3中的媒體查詢屬性，常見的斷點設置以下：

（小屏幕）----（中屏幕）----（大屏幕）
-- 0~480 ------- 481~800------801~1400

小屏幕對應的是咱們最經常使用的移動設備，即手機。中屏幕通常是平板的視覺效果，而大屏幕則是咱們平時的筆記本或者是大屏幕了。

四、一個原則：先針對受衆多的進行設計

咱們在進行設計的時候，一個原則就是，那一種設備的用戶比較多，就先針對它來設計。設計完再考慮其餘的使用狀況。抓住主要的目標用戶。

五、相關單位

vw、vh、em、rem

vw 相對於視窗的寬度：視窗寬度是100vw
vh 相對於視窗的高度：視窗寬度是100vh
這裏重點要理解視窗的定義，避免掉坑，譬如，當咱們手機輸入文本，彈出鍵盤的時候，vh就縮小來。這時候vh並不近似等於屏幕大小，而是除來手機鍵盤以外的部分。

並非全部瀏覽器都會兼容rem，爲了代碼的健壯性，在css中寫兩行：

font-size: 16px;
font-size: 1rem;

六、常見的響應式框架

如下列出一些對響應式設計作出相應處理的前端框架，咱們能夠根據使用習慣與實際狀況進行相應的選擇：

• bootstrap
• foundation
• semantic UI
• Pure.css（輕量級）