《響應式Web設計實踐》學習筆記 HTML5中類jQuery選擇器querySelector的使用 Media Queries 媒體查詢常見設備斷點

時間  2019-12-07
標籤 響應式Web設計實踐 學習 筆記 html5 html jquery 選擇器 queryselector 使用 media queries 媒體 查詢 常見 設備 斷點 欄目 HTML5 简体版
原文   原文鏈接

原書: 響應式Web設計實踐css

目錄：html

第2章 流動佈局

1. 佈局選項

  • 傳統的固定佈局中存在不少問題, 隨着屏幕大小的愈來愈多元化, 固定佈局已經不能適用了. 
  • 在流動佈局中, 度量的單位再也不是像素, 而是變成了百分比.
  • 彈性佈局與流動佈局相似, 可是一般狀況下, 彈性佈局中會以em來做爲單位. 帶來一個好處是隨着用戶增大或減少字體, 適用彈性佈局的元素的寬度也會等比例地變化. 可是其也可能出現水平滾動條
  • 混合佈局

　　媒體查詢:html5

　　媒體查詢容許根據設備的信息----諸如屏幕寬度, 方向或者分辨率等屬性來使用不一樣的樣式node

　　斷點:ios

　　那些被指定的,開始應用某一新的媒介查詢的點. 例如, 一個在980px處的斷點的意思是, 當瀏覽器寬度大於或小於這一數值時, 新的媒介查詢將被觸發git

2. 字體大小

  • 像素: 不夠靈活
  • em: 可縮放, 可級聯
  • 百分比: 可縮放, 可級聯
  • rem(root em): rem的大小與根元素---html元素有關. 移動平臺尚不支持

3. 網格佈局

  • 一個流動佈局的實現:
        #container{
        width: 95%;
        padding: .625em 1.05% 1.5em;  /*10px/16px 10px/948px 24px/16px*/
        margin: auto 0;
    }
    .main{
        float: left;
        margin-right: 2.53%; /* 24/948 */
        width: 65.823%; /*624/948*/
    }
    .aside{
        float: right;
        width: 31.645%;  /*300/948 */
    }
  • 流動世界中的固定寬度對象: 圖片
        aside img,
    .main img,
    .slats img{
        width:100%;
        max-width: 100%;
    }

     不能夠在html中定義img的height和width的屬性值, 若是設定了這些值, 就不能按比例縮放圖片了.github

4. 混合固定寬度和流動寬度

　　目的: 固定右邊邊欄, 只讓主欄流動
　　方法: 使用表格佈局web

    .main{
        display: table-cell;
        padding-right: 2.53%;   /* 24/948 */
    }
    aside{
        display: table-cell;
        width: 300px;
    }

 

　　使用條件註釋來爲IE 7 及如下版本的IE瀏覽器提供備用樣式: (!IEMobile的條件判斷是由於Windows Phone 7 也會加載這個備用樣式)chrome

<!--[if (lt Ie 8) & (!IEMobile)]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="all">
<![endif]-->

 

第3章 媒介查詢

1. 視口

　　在移動設備上, 不少設備都會給瀏覽器返回一個數值較大的佈局視口. 編程

　　視口標籤: 

<meta name="viewport" content="directive, directive" />

 

　　視口的屬性: 

  • width: 能夠將視口設置爲某一特定的寬度, 或者設置爲設備屏幕的寬度
    最佳選擇是在width聲明中使用device-width

    <meta name="viewport" content="width=device-width" />
  • height: 容許指定一個特定的高度. 最好將佈局視口的高度等於屏幕的高度. 
    可是通常不會常常用到height, height有用時候就是在不想讓頁面垂直滾動的時候
    <meta name="viewport" content="height=device-height" />
  • user-scalable: 告訴瀏覽器是否容許用戶在頁面上進行縮放. 默認值是yes, 即運行縮放
    <meta name="viewport" content="user-scalable=no" />
  • initial-scale: 能夠經過給這個參數賦值爲0.1(10%)到10.0(1000%)之間的某個數來設置頁面初始化時的縮放層級
    <meta name="viewport" content="initial-scale=.5, width=device-width" />

     如這個例子中, width屬性被設成設備的寬度, 同時initial-scale被設置爲.5, 這意味着瀏覽器將會縮小顯示全部東西: 例如在一個320px寬的設備上, 頁面會顯示爲640px

  • maximum-scale: 瀏覽器容許用戶放大頁面到什麼程度. 在移動端Safari中, 其默認值是1.6(160%), 能夠指定0.1-10.0. 若是將其設爲1.0, 則意味着禁止用戶縮放頁面
  • minimum-scale: 告之瀏覽器容許用戶將頁面縮小到什麼程度. 在移動端Safari中, 其默認值是0.25, 可指定0.1-10.0. 若是將其設爲1.0, 則意味着禁止用戶縮小頁面

2. 媒介查詢結構

　　媒介查詢能夠經過問詢瀏覽器來肯定特定的表達式是否爲真. 若是爲真, 就加載一些特殊的, 適用於這種狀況的樣式, 從而達到調整佈局的目的. 

　　媒介查詢的通常形式爲:

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

 

　　包含四個基本組成部分：

  • 媒介類型：　特定的目標設備類型
  • 媒介表達式：　測試某一特性是否爲真
  • 邏輯關鍵詞：　能夠用關鍵詞（例如 and, or, not, only) 來建立出更多複雜的表達式
  • 規則：　調整顯示效果的基本樣式

１) 媒介類型:

　　每一種媒介類型都會告訴用戶代理(例如瀏覽器)是否要加載特定的樣式表. 例如, 若是知道screen媒介類型, 那麼全部經過計算機顯示器來瀏覽頁面的用戶代理都會加載相應的樣式. 若是是print媒介類型, 那麼相應的樣式將會在打印或打印預覽時進行加載.

　　十種類型:

all 全部設備(默認)
braille 盲文觸覺反饋設備
embossed 分頁盲文打印機
handeld 手持設備(一般爲小屏幕而且多是黑白屏幕)
print 打印或打印預覽
projection 投影儀
screen 彩色計算機屏幕
speech 語言合成器
tty 使用固定字符間距的設備(終端或打印設備)
tv 電視機

　　樣式中的查詢語句以下:

@media print {
}

 

　　也能夠採用外部樣式文件的形式, 並在link元素內指定媒介屬性:

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

 

　　不管哪一種方法, 被引用的CSS的效果只有在打印或打印預覽時才能看到.

　　每條媒介查詢都必須包含一種媒介類型,若是沒有設置媒介類型, 該條查詢將使用默認值all, 但在不一樣瀏覽器中的實際行爲是各不相同的.

2) 媒介表達式

　　判斷設備視口的寬度是否大於320px:

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

 

　　先檢測訪問頁面的設備是否屬於screen, 而後測試設備的視口寬度----寬度至少爲320px

　　可使用的媒介特性, 而且min-和max-前綴也都適用於這些特性

特性 描述 值 能夠指定最小或最大
width 描述設備顯示區域的寬度 <長度>(例如320) 是
height 描述設備顯示區域的高度 <長度>(例如600) 是
device-width 描述設備渲染界面的寬度 <長度>(例如320) 是
device-height 描述設備渲染界面的高度 <長度>(例如600) 是
orientation 指定設備處於豎直(高度大於寬度)或者水平(寬度大於高度)狀態 portrait | landscape 否
aspect-ratio width屬性和height屬性的比值 <比值>(例如16/9) 是
device-aspect-ratio device-width屬性和device-height屬性的比值 <比值>(例如16/9) 是
color 設備的每一個顏色份量的比特數 <整數>(例如1) 是
color-index 設備的顏色查找表中的條目數 <整數>(例如256) 是
monochrome 黑白屏幕設備每一個像素的比特數(若是不是黑白屏幕將返回0) <整數>(例如8) 是
resolution 設備的分辨率(像素密度), 能夠以點每英尺[dpi]或者點每釐米[dpcm]來表示 <分辨率>(例如118dpcm> 是
scan "tv"類設備的掃描過程 progressive | interlace 否
grid 返回該設備是網格設備(1)仍是位圖設備(0) <整數>(例如1) 否

 

3) 邏輯關鍵詞

@media screen and (color) {}      /*判斷設備是否配備有彩色屏幕*/

@media not screen and (color){}    /*等於 not (screen and (color))*/

@media screen and (color), projection and (color)   /*逗號表示or */
 
/*不少瀏覽器支持媒介類型, 但不支持媒介查詢, 有時這會致使瀏覽器去嘗試下載那些你不但願用戶看到的樣式. 這時候就能夠用only關鍵字, 對那些較老瀏覽器隱藏媒介查詢, 這樣它們就並不會識別出相應的樣式了. 而支持only關鍵字的瀏覽器則會繼續處理帶有only關鍵字的查詢語句*/
@media only screen and (color)  /* 若是設備不支持媒介查詢, 那麼它將會忽略這條查詢. 若是設備支持媒介查詢, 那麼設備將會將上面這條查詢與下面這條查詢等效對待
@media screen and (color)

 

3. 內嵌樣式與外部樣式

　　媒介查詢既能夠寫在頁面內部, 也能夠經過link元素的media屬性被包含到頁面中去.

  • 內嵌式媒介查詢:
    • 優勢: 只須要一個http請求
    • 缺點: 全部樣式都會被下載, 不管是否用到. 並且單個css文件會變得很大
  • 外部媒介查詢
    • 不管是否會用到, 其實也會下載全部的樣式. 目的在於, 若是瀏覽器的窗口的大小或者方向發生了改變, 它的各自樣式已經各就各位了
    • 優勢: 文件變得很小, 利於維護

4. 媒介查詢順序

  • 從桌面端向下設計 
    • @media all and (max-width: 768px){
}
@media all and (max-width: 320px){
}
    • 缺點: 移動設備對媒介查詢的支持不夠完善
  • 從移動端向上設計 
    • @media all and (min-width: 320px){ 
}
@media all and (min-width: 768px){
}

    • 能得到瀏覽器更好的支持,

    • 且能夠下降css文件的複雜性

5. 建立核心體驗

6. 肯定斷點

　　傳統的作法: 使用一些固定的標準寬度: 320px(iphone和其餘一些設備), 768px(ipad)和1024px

　　存在的問題是: 可能會忽視在這些寬度之間的設備.

　　1) 更好的作法是 追隨內容:

　　根據內容來決定應該在哪裏設置斷點以及須要設置多少個斷點.

　　其實就是縮放瀏覽器, 而後緩慢拉寬窗口直到有些東西須要調整時設置斷點.

　　2) 增長對大屏幕的支持.

　　3) 使用em爲媒體查詢增長靈活性

　　即便用em爲單位來設置斷點

7. 導航欄

  1. 什麼都不作
  2. 轉換爲下拉列表
  3. 切換式菜單

第四章 響應式多媒體

　　優先爲移動平臺建立.

  • 有選擇地爲手機提供圖片

    • 不在html裏下載圖片, 對較大的屏幕來說使用js代碼來讓圖片恢復. 好比設置html5的data-屬性爲: data-src="images/ball.jpg"

      • 自定義數據屬性: 專門爲頁面存儲自定義數據並具備data-前綴的屬性, 一般出於腳本編程的目的而設置

      • display:none 的解決方案並不可行. 雖然它從視覺上隱藏了圖片, 可是圖片仍然會被請求被下載.
    • html代碼:
      <ul class="slats">
    <li class="group" data-src="images/ball.jpg">
        <a href="#">
            <h3>sssssssssss</h3>
        </a>
    </li>
    <li class="group" data-src="images/ball1.jpg">
        <a href="#">
            <h3>sssssssssss</h3>
        </a>
    </li>
    <li class="group" data-src="images/ball2.jpg">
        <a href="#">
            <h3>sssssssssss</h3>
        </a>
    </li>
</ul>

       js代碼:

    • //添加一個用來幫助快速選取元素的工具函數
q: function(query){
    //HTML5向Web API新引入了document.querySelector以及document.querySelectorAll兩個方法用來更方便地從DOM選取元素，功能相似於jQuery的選擇器。
    //兩個方法使用差很少的語法，都是接收一個字符串參數，這個參數須要是合法的CSS選擇語法。其中參數能夠包含多個css選擇器, 用逗號隔開
    //使用這兩個方法沒法查找帶僞類狀態的元素
    //其中, querySelectorAll會返回全部知足添加的元素, 結果是個nodeLists集合
    //querySelector返回知足條件的單個元素,按照深度優先和先序遍歷的原則使用參數提供的css選擇器在DOM進行查找,返回第一個知足條件的元素
    if(document.querySelectorAll) {
        var res = document.querySelectorAll(query);
    } else {
        //addRule()貌似是IE中的方法. DOM中用insertRule()
        var d = document;
        a = d.styleSheet[0] || d.createStyleSheet();
        a.addRule(query, 'f:b');
        //遍歷文檔的全部元素, 若是已經添加了屬性(f:b)的話, 意味着這個元素存在. 將其push到數組c中
        for(var l=d.all, b=0, c=[], f=l.length; b<f; b++){
            l[b].currentStyle.f && c.push(l[b]);
            a.removeRule(0);
            var res = c;
        }
        return res;
    }
}

//加載圖片
var lazy = Utils.q('[data-src]');
for(var i=0; i<lazy.length; i++){
    var source = lazy[i].getAttribute('data-src');
    //建立image
    var img = new Image();
    img.src = source;
    //插入
    lazy[i].insertBefore(img, lazy[i].firstChild);
}
      其中querySelectorAll參考自: HTML5中類jQuery選擇器querySelector的使用
      addRule()參考: insertRule()與addRule()建立規則
    • matchMedia
      • 這是js內部自帶的方法, 能夠將css媒介查詢做爲參數傳遞給它, 它會返回相關媒介查詢是否匹配的信息.
      • 函數會返回一個MediaQueryList對象, 該對象具備兩個屬性: matches和media.
        • matches屬性能夠是true(若是媒介查詢匹配) 或者false.
        • media屬性的值就是剛剛傳遞的參數, 例如對於window.matchMedia("(min-width: 200px)")來講media屬性將會返回"(min-width: 200px)"
      • 支持瀏覽器: Chrome, Safari 5.1+, Firefox 9, Android 3+ 以及 ios5+
      • 不支持的瀏覽器可使用一個polyfill(爲不支持相關功能的瀏覽器提供支持能力的代碼片斷)[http://github.com/paulirish/matchMedia.js]
        //這樣,在手機上或其餘小窗口瀏覽器中加載頁面時, 就不會請求圖片了
if (window.matchMedia("(min-width: 37.5em)").matches) {
    //load in the images
    var lazy = Utils.q('[data-src]');
    for(var i=0; i<lazy.length; i++){
        var source = lazy[i].getAttribute('data-src');
        var img = new Image();
        img.src = source;
        lazy[i].insertBefore(img, lazy[i].firstChild);
    }
}

  • 響應式圖片策略

    也就是如何下載大小合適的圖片
    • 和瀏覽器比賽: 在瀏覽器下載到錯誤的圖片前, 這些方法要盡最大努力切換到應該被下載的正確的圖片上----愈來愈難
    • 默許瀏覽器的行爲: 先使用默認的方法下載小屏幕可使用的圖片, 而後在須要的時候爲大屏幕下載較大的圖片----會產生兩次請求. 不理想
    • 找服務器幫忙
    • 其餘方法
      • 第三方服務: Sencha.io Src: 在圖片前加上這個服務的鏈接, 而後該服務會使用發起請求的設備的用戶代理字符串來計算出設備屏幕的大小, 而後根據該數值來縮放圖片
      • 自適應圖片: [Matt Wilcox]建立

  • 對於高分辨率屏幕(好比Retina)

    • 媒介查詢
      min-resolution                      //非WebKit. 須要兩個值中的一個, 第一個值是屏幕分辨率, 單位多是每英寸的點數, 也能夠是每釐米的點數. 或者新的每像素的點數(dppx)
-webkit-min-device-pixel-ratio      //Webkit. 須要賦予一個十進制的表示像素比的值
    • SVG(可伸縮矢量圖形)
      • 是用XML定義的矢量圖形, 也就是能夠在不增長實際文件大小的前提下自如縮放
      • 問題在於: 瀏覽器的支持狀況不理想 以及 相應工具的缺少

  • 其餘固定寬度的內容

    • 視頻
    • 廣告

中間兩章講設計.

其中涉及到一個模型的問題:

我以前瞭解的是使用圖形處理軟件來建立初始模型(好比PS). 可是靜態模型對響應式設計並無任何幫助. 因此應當到瀏覽器中去設計.

第7章 響應式內容

1. 從內容開始

2. 內容類型

3. 在何時顯示什麼內容

  • 刪除內容
  • 增強內容: 這是一種更好的方法. 即先單獨設計每種體驗, 而後再經過增強內容來使其能按計劃作出不一樣的響應

4. 什麼時候改變內容的順序

5. 構建API

第8章 RESS(響應式設計和服務器端組件)

1. 用戶代理檢測

  • 用戶代理檢測是經過檢測瀏覽器的用戶代理字符串來決定爲設備提供哪一種站點的方法, 這一過程是在服務器端完成的.
  • 用戶代理字符串是在瀏覽器請求某一頁面時發送出去的一種http頭, 其目的在於辨識使用中的客戶端(瀏覽器)
  • 優勢:
    • 提供了詳細的設備信息
    • 由於是在服務器端運行的, 因此能夠刪掉頁面中沒必要下載到設備刪更多內容
  • 缺點:
    • 因爲瀏覽器長期以來的欺騙行爲, 使用不當的話結果就會不可靠
    • 須要使用第三方服務來獲取詳細的設備信息, 增長了額外的項目成本

2. 功能檢測

  • 在客戶端進行. 沒必要再糾纏於複雜的用戶代理字符串中了. 而只需用JS來檢測某一特定功能是否被支持
    return !!window.JSON;        //檢測設備是否原生支持JSON
  • Modernizr: 一個能夠經過功能檢測的腳本.
    • 可測試超過40種不一樣功能, 還能提供另外三樣有助於開發的東西
      • 會建立一個包含測試結果的js對象
      • 會在html元素中增長類名, 以代表對於功能的支持狀況
      • 提供一個腳本加載器, 就能夠有條件地加載polyfill
    • 將這個腳本放在文檔的頭部, 也能夠爲頁面的html元素增長一個nojs的類
  • 服務器端Modernizr
  • 優勢: 
    • 不依賴於用戶代理字符串
    • 容許基於不一樣的需求在js庫中定製功能
  • 缺點
    • js有可能被禁用, 或者瀏覽器壓根不支持js
    • 瀏覽器經常會誇大本身的能力, 而且其支持程度也不只僅是支持或不支持
    • 若是在客戶端實現, 就沒法有效作到內容適應; 若是在服務器端實現, 就又須要額外加載一次頁面

3. 將用戶代理檢測和功能檢測相結合

4. RESS

  • 將服務器端檢測和響應式設計結合起來, 叫作RESS.
  • 首先爲全部設備建立一個核心站點, 而後再在服務器端針對特定的設備定製並渲染單獨的組件
  • 優勢:
    • 響應式設計使得佈局是設備無關的, 所以相比簡單的獨立站點而言, 這種站點可以支持普遍的設備
    • 服務器端檢測減小了用戶下載的數據量, 並將用戶從沒必要要的且漫長的下載時間中解救了出來
    • 可替換的組件容許你針對不一樣設備來定製體驗, 以達到與設備相適應的目的

　　　　

此外參考： Media Queries 媒體查詢常見設備斷點

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程