響應式Web初級入門

時間 2019-12-01

標籤響應 web 初級入門欄目 HTML 简体版

原文原文鏈接

本文來自個人前端博客，原文地址：http://www.hacke2.cn/about-responsive/

跨終端時代的到來

當你乘坐各類交通工具(公交、地鐵、輕軌、火車)時你會發現，人們都個個低下頭在玩本身的手機、平板、Kindle，沒錯，你正在處於一個多終端設備的時代！手機用戶連年上升，前幾天咱們在感嘆之前玩沙包、陀螺，如今小孩的娛樂就是玩手機–。另外，微軟的Xbox和任天堂的Wii等遊戲設備也有本身的瀏覽器。設備真的來了。。css

如今網站主流跨終端的有如下方式：html

單域

好比前端亂燉和個人我的博客都屬於此一類。此類網站具備只編寫一次就能實現跨終端的需求，維護起來至關方便。但缺點也很明顯，加載沒必要要的JS和CSS比往常相比巨多。前端

單域還有一種狀況，就是多個模板，你用移動設備可能訪問一個網站，最底下會有訪問桌面版，訪問觸屏版等，他會從新加載模板。css3

提示訪問移動版隨之進入移動版，HTML結構也會發生變化git

多域

如神馬搜索和百度(http://www.baidu.com)，當用桌面瀏覽器和移動瀏覽器訪問的結果是不同的。其中的手段可能有兩種：github

Ngix反向代理判斷
服務端直接判斷UA輸出不一樣的界面，JAVA和PHP等後臺語言都提供了支持框架

兩家都對移動端作了專門的頁面，這樣進行功能的拆減，用戶體驗固然大大提升，但有需求發生變化時，每每要更改兩處地方。web

多終端

也就是前端最不想看到的，不少公司爲了提升更好地用戶體驗都使用native開發，如IOS的OC,SWIFT，Andriod SDK等。功能強大，接口豐富，缺點就是更新起來異常困難，不少用戶都不想過幾天就安裝一個APP。bootstrap

本文主要講第一種單域(響應式)的狀況瀏覽器

響應式Web

響應式Web設計最先在2010年EthanMarcotte發表過一篇文章《Responsive Web Design》，基本每本將響應式的書籍都將他提起，那個例子太經典提起，文中援引了響應式建築設計的概念：緩存

最近出現了一門新興的學科——」響應式建築(responsive architecture)」——提出，物理空間應該能夠根據存在於其中的人的狀況進行響應。結合嵌入式機器人技術以及可拉伸材料的應用，建築師們正在嘗試建造一種能夠根據周圍人羣的狀況進行彎曲、伸縮和擴展的牆體結構；還可使用運動傳感器配合氣候控制系統，調整室內的溫度及環境光。已經有公司在生產」智能玻璃」：當室內人數達到必定的閥值時，這種玻璃能夠自動變爲不透明，確保隱私。

澄清一點，響應式站點不等同於移動站點，他只是一種開發移動站點的策略。其實按照這個說法神馬搜索是一款純粹的移動WEB APP，由於它沒有桌面版。

爲移動而生，專一移動搜索的神馬搜索

三種佈局方式

現存的佈局哪種更加適合作響應式的網站呢？通常來講有如下三種佈局：

固定佈局

應該是新手開發人員最喜歡用的佈局方式，簡單粗暴，設計稿是多少PX，寫CSS時就多少PX，對頁面的控制力度是最強的，上下級沒有聯繫，想調哪一個就調那個，若是設置box-sizing:border-box;,甚至對整個佈局都沒有影響。

最多見的就是body使用960px的像素，有如下兩個因素：

適應正方形的老式屏幕；
兩邊補白，讓寬屏用戶不以爲那麼彙集；
960能夠被三、四、五、六、八、十、十二、15整除。

點擊戳DEMO

但問題是這麼作毫無響應式可言，會出現很噁心的橫向滾動條，另外，移動端的瀏覽器會默認的將網頁縮小，根本無多終端性可言。

流式佈局

在流式佈局中，度量單位再也不是簡單的像素，而是百分比。這使得頁面具備可變性。

點擊戳DEMO

當縮小瀏覽器邊框時，萬惡的橫向滾動條消失了。缺點就是有些文本的行寬會看起來太寬，而在小屏幕看起來太窄

固然，在良好的支持CSS3的移動瀏覽器下，使用flex佈局更加有優點！

彈性佈局

此次度量單位又變了，一般狀況以em爲單位，可是em太依賴於父級，好在CSS3提供了更好的rem方式(這個demo找的很差，由於table表格原本就有流動的屬性display:table;display:table-cell;)。

點擊戳DEMO

其實細想一下，選擇佈局方式實際上是對度量單位的選擇!

另外還有網格佈局方式，bootstrap就是採用12柵欄佈局，另外前不久winner也談了一些淘寶提供的可伸縮佈局方案：lib.flexible，按照DEMO來看，其使用的是rem方式，在改變視窗大小的時候動態的改變基準的比例(瀏覽器默認是16px，設置器基準大小爲62.5%)。還有人提出來的混合佈局，但不管哪種，都離不開上面固定佈局,流式佈局,彈性佈局,三種的支撐。

綜上所述，流式佈局或彈性佈局或許是響應式佈局的更好方式。

媒體查詢

難道有流式佈局或彈性佈局就夠了嗎？就像一個屌絲升職加薪就夠了？不當上CEO怎麼贏取白富美？

媒體查詢可讓你根據在特定環境下查詢到的各類屬性值-好比分辨率，色彩深度，高度和寬度(包括設備寬度與視覺寬度)，橫向縱向,設備像素比來決定應用什麼樣的樣式。

咱們能夠看到咱們上面的那些DEMO(我認可這個DEMO找的很差，是從今年阿里校招題目裏面摳出來的)，當咱們改變瀏覽器大小時，左邊的列表實在是太醜，可是使用媒體查詢後的效果就不同了。

點擊戳DEMO

媒體查詢的語法

語法很簡單

@media [not|only] type [and] [expr] { rules }

解釋一下：

not only：邏輯關鍵字
expr：媒體表達式
type：媒體類型
rules：CSS樣式

1.邏輯關鍵字

有and,not,or,only等，前三個很少說，最後一個是由於不少較老的瀏覽器支持媒體類型，卻不支持媒體查詢，有時候致使瀏覽器去嘗試下載那些你不但願用戶看到的樣式。

2.媒體表達式

表達式支持的也不少，這裏也不列舉了，重點有: * 表示顯示區域的width和height * 表示設備區域的device-width和device-height * 表示橫屏仍是豎屏的orientation * 表示設備像素比device-pixel-ratio

3.媒體類型

媒體類型有不少，感興趣下來查一下，這裏就不列舉了，通常大多網站設置的是screen，如不你嫌麻煩能夠什麼都不寫(默認爲all)，支持全部設備。

4.規則

就是你想要在這個環境下想展現出的CSS

下面一個簡單的示例：

@media sreen and (min-width: 320px) { }

另外，媒體查詢也可使用在外部樣式上，如：

<link media="only sceen and (min-width:1300px)" type="text/css" href="style.css">

關於斷點

這裏說的斷點不是傳統意義的調試斷點，而是一些經常使用的標準寬度:

320px(iPhone和其餘一些設備)
769px(iPad)
1024

依賴這些斷點會有一個問題，今天流行的明天未必流行，並且在斷點過渡的時候會顯得很突兀，因此，肯定斷點的一個原則是追隨內容。讓設計稿，內容來肯定你的斷點。

前端亂燉的斷點

兼容性

通常的，在IE9一下，加載下列CSS

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

圖片和視頻

圖片

對於背景圖片來講，CSS3有個屬性爲background-size，設置爲100%就能夠自適應，可是在小屏幕的移動設備加載大圖片有點殺雞焉用宰牛刀，通常爲了加快速度，咱們的策略是：有選擇性的加載圖片，通常會有如下四種方法：

1.萬能的媒體查詢

只加載與當前屏幕相匹配的圖片

2.JS作判斷

JS提供了一個方法：window.matchMedia，能夠把CSS媒體查詢做爲參數傳入，返回相關媒體查詢是否匹配的信息。

使用方法：

if(window.matchMedia('(min-width:320px)').matches) { //其餘代碼 }

咱們能夠利用他來加載合適的圖片。

3.使用src.sencha.io

src.sencha.io能夠傳入須要的尺寸和圖片地址，自動來壓縮圖片，使用了CDN+緩存策略技術。固然，咱們的服務端也能夠本身來實現

圖片已經被壓縮到320px

點擊戳圖片

4.SVG

對於圖片伸縮的問題，也能夠採用可伸縮矢量圖(SGG)來解決。

有關SVG的資料請戳大漠的w3cplusSVG標籤。

視頻

視頻的方式與上面相似，可使用媒體查詢和js matchMedia，固然，用設備看視頻的通常是WIFI下，因此直接使用max-width:100%;height:auto;也是能夠的。若是是鏈接站外資源，如優酷難麼，通常解決方法是放到一個iframe裏面，詳情請看站外引用的優酷視頻，怎樣讓視頻高度自適應？

<div style="width:320px;height:180px" > <iframe height="100%" width="100%" src="http://player.youku.com/embed/XNjA3NjQ0MzE2" frameborder=0 allowfullscreen></iframe> </div>