響應(yīng)式開發(fā)

響應(yīng)式布局

  • 什么是響應(yīng)式布局？
    • 可以讓一個網(wǎng)站兼容不同分辨率設(shè)備的布局
  • 為什么要使用響應(yīng)式布局？
    • 給用戶更好的視覺使用體驗(yàn)
  • 怎么使用響應(yīng)式布局？
    • CSS3-Media Query（媒體查詢），推薦使用，最簡單
    • 借助原生javascript ，不推薦使用，成本太高
    • 第三方開源框架，如：bootstrap是一個響應(yīng)式布局應(yīng)用的框架

響應(yīng)式設(shè)計的原則

  • 移動優(yōu)先：
    • 在設(shè)計初期就要考慮頁面在多終端上展示（優(yōu)先）
    • 傳統(tǒng)網(wǎng)頁再改移動端有些功能會損失，難度也比較大
  • 漸進(jìn)增強(qiáng)：保證基本功能，再發(fā)揮設(shè)備支持的最大功能
  • 優(yōu)雅降級(推薦)
    • 充分發(fā)揮硬件設(shè)備的最大功能（能支持最新技術(shù)的瀏覽器就使用最新的技術(shù)，不能最新技術(shù)的瀏覽器就降級或使用hack技術(shù)）

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

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

網(wǎng)站能夠自動切換以適應(yīng)不同分辨率，圖像大小和腳本。他應(yīng)該有一個靈活的網(wǎng)格和布局，圖像和CSS能夠智能的組合 使用

應(yīng)用技術(shù)

1.flexible grid layout 彈性網(wǎng)格布局

2.flexible image 彈性圖片

3.media queries 媒體查詢

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

  • 減少工作量
  • 節(jié)省時間
  • 適配所有設(shè)備
  • 搜索優(yōu)化
  • 統(tǒng)計用戶訪問流量

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

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

該如何實(shí)現(xiàn)？

  • 圖片：如何根據(jù)設(shè)備不同的分辨率及屏幕大小來加載對應(yīng)的圖片？

    • 思維：標(biāo)簽的data屬性
    <img src="small.jpg" data-full="larger.jpg">

<!--也可以使用picture 標(biāo)簽，但是瀏覽器兼容性不好，需要使用picturefill.min.js-->
<div class="item">
      <picture>
      <source srcset="img/ad001-l.png" media="(min-width:50em)">
      <source srcset="img/ad001-m.png" media="(min-width:30em)">
      <img src="img/ad001.png" alt="2015年度報告">
      </picture>
</div>

  • 視口：禁用圖片的自動縮放

    <meta name="viewport" content="width=device-width; initial-scale=1.0">

    ?

  • 打造布局結(jié)構(gòu)：不同設(shè)備的屏幕尺寸差異過大時應(yīng)加載不同的樣式文件以適配不同的結(jié)構(gòu)或使用CSS media query。

    我們可以使用一個默認(rèn)主樣式表來定義頁面的主要結(jié)構(gòu)元素，比如#wrapper、#content、#sidebar、#nav等的默認(rèn)布局方式，以及一些全局性的配色和字體方案。

    我們可以監(jiān)測頁面布局隨著不同的瀏覽環(huán)境而產(chǎn)生的變化，如果它們變的過窄過短或是過寬過長，則通過一個子級樣式表來繼承主樣式表的設(shè)定，并專門針對某些布局結(jié)構(gòu)進(jìn)行樣式覆寫。我們來看下代碼示例：

    下面的代碼可以放在默認(rèn)主樣式表style.css中：

    /* 大眾化使用時的默認(rèn)樣式 */
html,body{
   background...
   font...
   color...
}
h1,h2,h3{}
p, blockquote, pre, code, ol, ul{}
/* 主要結(jié)構(gòu)樣式 */
#wrapper{
    width: 80%;
    margin: 0 auto;
    background: #fff;
    padding: 20px;
}
#content{
    width: 54%;
    float: left;
    margin-right: 3%;
}
#sidebar-left{
    width: 20%;
    float: left;
    margin-right: 3%;
}
#sidebar-right{
    width: 20%;
    float: left;
}

/* 下面代碼可以放在子級樣式表mobile.css中，專門針對移動設(shè)備進(jìn)行樣式覆寫： */
#wrapper{
    width: 90%;
}
#content{
    width: 100%;
}
#sidebar-left{
    width: 100%;
    clear: both;
    /* 不同設(shè)備上可以附加適合的樣式 */
    border-top: 1px solid #ccc;
    margin-top: 20px;
}
#sidebar-right{
    width: 100%;
    clear: both;
    /* 不同設(shè)備上可以附加適合的樣式 */
    border-top: 1px solid #ccc;
    margin-top: 20px;
}*/

    大致的視覺效果如下圖所示：

css.jpg

  • media query(媒體查詢)

    CSS3支持CSS2.1所支持的所有媒體類型，例如screen、print、handheld等，同時添加了很多涉 及媒體類型的功能屬性，包括 max-width(最大寬度)、device-width(設(shè)備寬度)、orientation(屏幕定向，橫屏或豎屏)和color。

    在CSS3發(fā)布 之后出現(xiàn)的新玩具，如iPad或Android相關(guān)設(shè)備，都可以完美的支持這些屬性。所以我們可以通過media query為新設(shè)備設(shè)置獨(dú)特的樣式，而忽略那些不支持CSS3的臺式機(jī)中的舊瀏覽器。

    media query使用實(shí)例：屏幕寬度不超過480px，則加載shetland.css樣式表。

    <link rel="stylesheet" type="text/css"  media="screen and (max-device-width: 480px)"    href="shetland.css" />

    我們可以創(chuàng)建多個樣式表，以適應(yīng)不同設(shè)備類型的寬度范圍。但更有效率的做法是，將多個media queries整合在一個樣式表文件中，減少請求數(shù)量。如下：

    /* CSS2.1與CSS3都支持的代碼 */
/* 智能手機(jī) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* 或 ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* 或 ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

  • 可以使用媒體查詢過濾屏幕尺寸

    /* 設(shè)備屏幕尺寸在320-480之間的時候使樣式生效 */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

  • 使用代碼加載樣式

    <script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(window).bind("resize", resizeWindow);
        function resizeWindow(event) {
            var newWindowWidth = $(window).width();
            if (newWindowWidth < 600) {
                  // 手機(jī)
                $("link[rel=stylesheet]").attr({href: "mobile.css"});
            } else if (newWindowWidth > 600) {
                  // 電腦
                $("link[rel=stylesheet]").attr({href: "style.css"});
            }
        }
    });
</script>

媒體查詢詳解

  • 外聯(lián)CSS語法
  • 內(nèi)嵌樣式的語法
<style>
    body{
        background-color: pink;
    }

    /*方式一：內(nèi)嵌式*/
    @media screen and (min-width: 992px){
        body{
            background-color: purple;
        }
    }
</style>


<!--方式二：外聯(lián)式 ： 外聯(lián)式要在默認(rèn)樣式的后面-->
<link type="text/css" rel="stylesheet" href="media.css" media="screen and (max-width:480px)" />

<!-- 
css3的使用 

all : 可以省略不寫，默認(rèn)就是all
or  : 邏輯的操作符，代表或，只要匹配一個條件就是true
not ：邏輯的操作符，代表非，
and : 邏輯的操作符，代表與，全部條件都要匹配才是true
only：邏輯的操作符, 代表僅僅，為了適配老版本的瀏覽器
-->
<!-- 1. --> 
@media all and (min-width:800px) and (orientation:landscape) {
    ...
}
等價于下面的
@media and (min-width:800px) and (orientation:landscape) {
    ...
}

<!-- 2. --> 
@media not all and (monochrome) {...}
等價于下面的
@media not (all and (monochrome)) {...}


<!-- 3. --> 
@media not screen and (color), print and (color) {...}
等價于下面的
@media not screen and (color) or print and (color) {...}
等價于下面的
@media (not (screen and (color))), print and (color) {...}

css3媒體屬性

  • 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ī)的分辨率 如：min-resolution : 300dpi

viewport視口的概念

視口分 3 種

  1. 布局視口 980px ，布局視口不會被改變的
  2. 可視視口 即設(shè)備上可見的視口，使用手指縮放時改變的是可視視口的大小
  3. 理想視口 是指布局視口在一個設(shè)備上的最佳尺寸，便于使用瀏覽器瀏覽，閱讀
<!--  指定下面的代碼后，布局視口就成為理想視口，閱讀體驗(yàn)會更好，網(wǎng)頁不會出現(xiàn)被放大的效果 -->
<meta name="viewport" content="width=device-width"/>

<!--  還可以這樣 -->
<meta name="viewport" content="width=device-width,
                               minimum-scale=1.0,   //最小的縮放比例
                               maximum-scale=1.0,   //最大的縮放比例
                               user-scalable=no     //禁用用戶縮放
                               " />

響應(yīng)式網(wǎng)站開發(fā)過程

1.分析頁面結(jié)構(gòu)

ui設(shè)計師根據(jù)需求文檔做好ui設(shè)計圖，前端拿到效果圖后根據(jù)效果圖進(jìn)行頁面分析，確定哪些部分可以復(fù)用，哪些不能復(fù)用。哪些內(nèi)容是固定尺寸，哪些內(nèi)容可以自適應(yīng)等

2.依照設(shè)計原則

優(yōu)先考慮優(yōu)雅降級(漸進(jìn)增強(qiáng)不太適合)

案例

案例1：改變?yōu)g覽器的width加載不同的背景色

  1. media.html文件代碼如下：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 媒體查詢</title>

    <style>
        body{
            background-color: pink;
        }

        /*內(nèi)嵌式*/
        @media screen and (min-width: 992px){
            body{
                background-color: purple;
            }
        }
    </style>

    <!--外聯(lián)式-->
    <link type="text/css" rel="stylesheet" href="media.css" media="screen and (max-width:480px)" />
</head>
<body>

</body>
</html>

    ?

  2. 外聯(lián)文件media.css

    body{
    background-color: chartreuse;
}

學(xué)習(xí)響應(yīng)式開發(fā)的參考連接

http://gs.statcounter.com/ 可以按照國家來劃分,瀏覽器使用率
http://caniuse.com/usage-table 瀏覽器使用統(tǒng)計, 面向世界
http://necolas.github.io/normalize.css/ 在保證各瀏覽器呈現(xiàn)一致的情況下，保留了各標(biāo)簽元素原有的特點(diǎn)
http://autoprefixer.github.io/ 自動補(bǔ)全各游覽器前綴css代碼
http://editor.method.ac/ 在線繪制SVG
https://icomoon.io/ 在線繪制SVG
http://dillinger.io/ markdown 文件在線編寫
https://tinypng.com/ 圖片壓png
http://caniuse.com/ 查詢屬性、標(biāo)簽兼容性
http://www.genymotion.net/ 最快的安卓模擬器
http://owlcarousel.owlgraphic.com/ 幻燈片插件
https://modernizr.com/ 會主動檢測瀏覽器對css3、HTML5等等功能性的支持情況。
http://browsehappy.com/ 最新游覽器下載
http://www.browsersync.cn/ 各瀏覽器終端同步測試
http://browserhacks.com/ 各瀏覽器hack寫法查詢
https://github.com/aFarkas/html5shiv 讓老版本瀏覽器支持HTML5新標(biāo)簽
https://github.com/scottjehl/Respond IE6-8支持媒體查詢min/max-width特性
https://modernizr.com/ 檢測瀏覽器是否支持某特性

鏈接：http://www.imooc.com/article/12343#parent_6

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,180評論 1贊 92
  • 1 前期準(zhǔn)備 1.1 響應(yīng)式概念 響應(yīng)式網(wǎng)站是一個多項(xiàng)技術(shù)構(gòu)成的設(shè)計理念，實(shí)現(xiàn)利用一套代碼，實(shí)現(xiàn)網(wǎng)站對不同分辨率，...
    EvanBell閱讀 2,376評論 0贊 8
  • 什么是響應(yīng)式設(shè)計？ 1.讓一個網(wǎng)站可兼容不同分辨率的設(shè)備 2.給用戶更好的視覺體驗(yàn) 響應(yīng)式布局的優(yōu)點(diǎn)和缺點(diǎn) 優(yōu)點(diǎn)：...
    be_keeper閱讀 395評論 0贊 1
  • 問：有那句話激起了你的上進(jìn)心和學(xué)習(xí)欲望？ 答：你知道高矮能夠遺傳、胖瘦能夠遺傳，近視能夠遺傳，基因能夠遺傳，但是你...
    趙小煥閱讀 538評論 0贊 1
  • 如水的時光，緩緩不停地流逝著，天氣漸漸地冷了起來。門外的大榕樹上吵鬧了一夏的蟬聲，早已被這凌冽的秋風(fēng)吹散了，取而代...
    古城蒼狼閱讀 800評論 7贊 14

友情鏈接更多精彩內(nèi)容