到底什麼是響應式佈局

時間 2019-12-14

標籤到底什麼響應佈局简体版

原文原文鏈接

經常聽人詬病，響應式佈局都不精，作什麼前端，那麼到底什麼是響應式佈局，其實現的原理在哪，我我的的見解以下：css

1.目的：在項目中你會遇到不一樣的終端，因爲終端分辨率不一樣，因此你要想讓用戶體驗更好，就必要讓你的頁面可以適配多個終端。html

2.先說一下PC端，首先rem在IE9及如下版本的瀏覽器是不被支持的，單位基本都是用px來寫，因此PC端的響應式設計，在我看來，主要是最外圍的包裹元素寬度百分百，而後第二層的包裹元素水平居中而且寬度固定，至於多寬，就要看你的UI設計圖怎麼給了，這裏提到的最外圍的包裹元素經常帶有必定的背景顏色，或者水平居中的背景圖案，這樣當瀏覽器在水平方向向兩端無限拉長時，正文的兩旁是沒有內容的，要麼是空白，要麼是帶有必定底色或者圖案，banner圖的話，通常是放在中間正文的部分，不會受瀏覽器拉昇的影響，若是不是拉昇而是向裏縮小，當縮小到視窗寬度比中間正文要小時，就會出現橫向滾動條，不多會讓中間的正文部分跟着視窗一塊兒縮小，因此總而言之，PC端的響應式設計較爲簡單，畢竟光兼容問題就夠咱們受的了~。可是，有時須要咱們先去判斷設備類型，而後再去加載相應的樣式和腳本（例如計算rem），能夠根據媒體查詢（帶IE兼容的hack）去判斷，也能夠根據JS腳本，貼一段代碼以下：前端

function browserType() {
　　if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)){
　　　　alert('移動端')
　　}else{
　　　　alert('PC端')
　　}
}ios

3.因爲響應式佈局可能是針對移動端，因此首先要在<head>標籤中添加下面這行代碼：bootstrap

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />

這將設置屏幕按1：1的尺寸顯示，在 iPhone 和其餘智能手機的瀏覽器提供網站全視圖瀏覽，並禁止用戶縮放頁面。瀏覽器

4.媒體查詢，即針對不一樣的屏幕尺寸設置不一樣的樣式，它告訴瀏覽器頁面如何呈現，假如一個終端的分辨率小於980px，那麼能夠這樣寫：
iphone

@media only screen and (max-width:980px){   
     #head { … }   
     #content { … }   
     #footer { … }   
}

或者佈局

<link rel="stylesheet" href="style.css" media="only screen and (max-width:980px)"/>

若是兼容的終端類型多了，就要多寫幾個@media或者引入多個<link/>標籤。字體

5.rem，經過根元素進行適配的（只參照<html>中的font-size，和<body>沒有任何關係），這主要是針對響應式字體大小，能夠寫成：網站

@media only screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media only screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media only screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media only screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media only screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media only screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media only screen and (min-width:800px){html{font-size:25px}}

注意：上面是先統計本身網站有哪些主流的屏幕設備，而後去針對那些設備去作media query設置。

6.徹底適配，若是要全部設備分辨率都能兼容適配，能夠經過JS去動態計算根元素的font-size，最好把這個腳本放在<head>標籤裏，代碼以下：

(function (doc, win) {
    var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
        console.log($("html").css("font-size"));
    };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

注意：我所在公司的UI給的是750寬度的設計圖，因此在該屏幕尺寸下的根元素的font-size是100px，而後直接將設計圖中具體部位的尺寸大小除以100就能夠獲得對應的rem值，即完成了從px到rem的換算；

若是如今的屏幕尺寸是375（iphone 6），是750的一半，也就是說，設計圖裏指定寬度爲200px(對應的width值爲2rem)的地方，如今放在iphone 6上就顯示爲100px，但對應的width值仍是2rem，因此只須要給該元素添加width:2rem，就實現了寬度的全適配。

7.背景圖片，主要是運用background-size這個新屬性，使用background簡寫屬性的時候會將它覆蓋，因此須要把它在background簡寫屬性的後面，合在一塊兒寫也行，但在低版本的IE瀏覽器中會有兼容問題。

8.背景圖片鋪滿整個屏幕的適配問題，現有一張設計圖750*1200，規定鋪滿用戶設備的整個屏幕，在用js監聽設備尺寸的寬度進行適配的時候，若是出現高度放大的比例比寬度小，或者高度縮小的比例比寬度大，那麼圖片就會變矮，若是仍然採起原來同比例縮放狀況下的rem，元素出現的位置就比原來的位置更靠下，爲了解決這個問題，有兩種方案：

(1)記住垂直方向上元素的相對位置（相對於整個設備的高度）是不變的，只須要將垂直方向上涉及到rem的單位值所有上乘以壓縮比例（即當前設備尺寸的屏幕高度/同比例縮放狀況下的屏幕高度），即

// 計算相同縮放比例下背景圖片的高度
var sameRatioHeight=1200 * ($(window).width() / 750);                                     
                   
// 計算垂直方向每一單位的壓縮比例
var changeRatio=$(window).height() / sameRatioHeight;

注意：最後在重置垂直方向DOM元素的rem單位值的時候，由於要先獲取重置以前的值，因此須要在DOM頁面渲染完成以後操做，即放進window.onload=function(){}中執行，若是直接在DOM節點樹生成以後當即執行的話，即放進$(function(){})裏面，獲取到的重置以前的單位值就不是js監聽適配得來的單位值，而是以根節點中原始的font-size（引入bootstrap的話就是12px）去做rem操做的獲得的單位值，一個正確的例子以下：

$(function(){
       // 計算相同縮放比例下背景圖片的高度
       var sameRatioHeight=1209 * ($(window).width() / 750);                                     
                   
       // 計算垂直方向每一單位的壓縮比例
       var changeRatio=$(window).height()/sameRatioHeight;                                          
                   
       // 將垂直方向涉及到rem的單位值所有乘以上面得出的壓縮比例;           
       $(window).on("load",function(){
           $(".container").css("padding-top",parseInt($(".container").css("padding-top"))*changeRatio);
           $(".box").css("height",parseInt($(".box").css("height"))*changeRatio);
           $(".box1").css("margin-top",parseInt($(".box1").css("margin-top"))*changeRatio);
           $(".box2").css("top",parseInt($(".box2").css("top"))*changeRatio);                                        
           $("p").css("font-size",parseInt($("p").css("font-size"))*changeRatio);
      })
})