響應(yīng)式網(wǎng)站是一個設(shè)計理念鹏溯，它是多項技術(shù)的綜合體

2010 年 Ethan Marcotte 發(fā)表了 Responsive web design 一文

響應(yīng)式網(wǎng)站三要素

• flex image 流動圖片
• flexble grid layout 流動網(wǎng)格
• media queries 媒體查詢

響應(yīng)式網(wǎng)站優(yōu)點

• 減少工作量
  • 網(wǎng)站罢维、設(shè)計、代碼丙挽、內(nèi)容都只需要一份
  • 多出來的工作量只是js腳本
• 節(jié)省時間
• 每個設(shè)備都得到正確的設(shè)計
• 搜索優(yōu)化

響應(yīng)式網(wǎng)站缺點

• 會加載更多的樣式和腳本資源
• 設(shè)計比較難精確定位和控制
• 老版本瀏覽器兼容不好

國內(nèi)外主流瀏覽器

查看瀏覽器占比肺孵，兼容性情況

• can i use
• statecounter

媒體查詢

• css2 就出現(xiàn)了

<link rel="stylesheet" href="site.css" media="screen"/>
<link rel="stylesheet" href="print.css" media="print"/>

• css3中進(jìn)行了進(jìn)一步增強(qiáng)，包含了更多的媒體類型和函數(shù)

  @media all and (min-width:800px) and (orientation: landscaape){
    ...
  }
  
  
  /* only 僅僅颜阐，只有
  防止老舊的瀏覽器平窘，不支持帶媒體屬性的查詢，而應(yīng)用到給定的樣式
  */
  
  

  • 主要的媒體屬性：
    • width：視口寬度
    • height：視口高度
    • device-width：渲染表面的寬度凳怨，就是設(shè)備屏幕的寬度
    • device-height：渲染表面的高度瑰艘，就是設(shè)備屏幕的高度
    • orientation：檢查設(shè)備處于橫向還是縱向
    • aspect-ratio：基于視口寬度和高度的寬高比是鬼。width/height，例如16/9,4/3
    • device-aspect-ratio：渲染表面的寬度紫新，就是設(shè)備屏幕的寬度
    • color：每種顏色的位數(shù)bits 如min-color:16位均蜜，8位
    • resolution：檢測屏幕或者打印機(jī)的分辨率

viewport

• layout viewport 布局視口
• visual viewport 可視視口
• ideal viewport 理想視口

怎樣分析設(shè)計圖

• 和設(shè)計師，產(chǎn)品經(jīng)理交流網(wǎng)站如何交互芒率，需求如何體現(xiàn)
• 是否有相應(yīng)的設(shè)計規(guī)范 字體囤耳，顏色，字號偶芍，間距等
• 什么地方必須100%還原充择，那些地方可以靈活處理
• 前端設(shè)計師，要有前端開發(fā)功底匪蟀，前端開發(fā)椎麦，有一定的設(shè)計能力，便于前端設(shè)計與前端開發(fā)溝通

設(shè)計圖案例

• 大屏幕 pc和平板用戶
• 中屏幕 小平板材彪、大屏手機(jī)用戶
• 小屏幕 移動用戶

響應(yīng)式網(wǎng)站設(shè)計原則

為什么：兼容老的瀏覽器观挎，讓新的瀏覽器體驗更好。移動終端查刻，兼容性問題少一些

• progressive enhancement 漸進(jìn)增強(qiáng)

• graceful degradation 優(yōu)雅降級

優(yōu)先小屏幕 or 大屏幕

根據(jù)用戶群體和喜好進(jìn)行選擇

新的創(chuàng)業(yè)公司

• pc端：兼容最新chrome键兜，firefox，ie
• 移動端：兼容蘋果穗泵，安卓自帶瀏覽器普气，QQ瀏覽器，uc瀏覽器即可

優(yōu)先對最新版本chrome進(jìn)行調(diào)試（調(diào)試簡單佃延，占比高）

斷點的選擇（寬度數(shù)值的選擇）

• 不要針對某一特定設(shè)備去分類现诀，下列做法不可取：

/*iPhone 4 and 4S*/

/*Portrait and Landscape*/
@media only screen
    and (min-device-width:320px)
    and (max-device-width:480px)
    and (-webkit-min-device-pixel-ratio:2){

    }

/*iPhone 5 and 5S*/

/*Portrait and Landscape*/
@media only screen
    and (min-device-width:320px)
    and (max-device-width:568px)
    and (-webkit-min-device-pixel-ratio:2){

    }

• 正確分類
  • 0-480 小屏幕
  • 481-800 中屏幕
  • 801-1400 大屏幕
  • 1400+ 巨屏幕