響應式佈局詳細介紹

時間 2019-11-29

標籤響應佈局詳細介紹简体版

原文原文鏈接

1、響應式佈局css

　　定寬佈局的侷限：屏幕愈來愈寬，而定寬的寬度是固定的，看定寬的網頁不美觀html

　　　　　　　　　　屏幕也在一直往小變，定寬也不合適，看不到完整的網頁內容前端

　　在這種狀況之下，就出現了一種自適應佈局，分別是早起的流動式佈局（根據浮動，基本淘汰）和百分比寬度佈局（還有一些應用）。css3

　　百分比佈局的侷限：不夠完美，無法獲得一個很好的顯示效果。bootstrap

　　　　　　　　　　　屏幕太大，撐滿整個屏幕，很差，屏幕過小，畫面太過拘謹也很差。瀏覽器

　　屏幕尺寸過於碎片化，咱們到底要設計什麼樣的網頁才能知足全部人呢？iphone

　能夠採起一個網站有多個尺寸的適配，兩套設計方案，可是這樣畢竟是浪費了人力成本。佈局

　　有沒有一套方案，就在全部終端都有比較好的呈現效果呢？字體

　　方案就是響應式佈局！網站

　　在同一張網頁，根據屏幕大小的不一樣，自動調整網頁之中的內容佈局

響應式佈局如何實現？

　　一、實現響應式佈局的三個要素：

　　　　viewport視口設置

　　　　@media媒體查詢

　　　　不要把尺寸寫死：多用百分比寬度來肯定佈局尺寸

　　　　　　　　　　多用rem em來肯定佈局尺寸（在第六部分有更具體的說明）

　　　　　　　　　　多用vh vw來肯定佈局尺寸（在第七部分有更具體的說明）

　　二、視口設置：

　　　　視口就是可見的屏幕尺寸

　　　　視口不說高度只說寬度，由於高度是根據內容撐開的，寬度纔是須要設置的

　　　　移動端：視口就是屏幕的大小

　　　　　　　　由於都是全屏顯示的通常

　　　　設置方法：設置meta標籤就能夠

　　媒體查詢：查詢咱們用什麼設備來訪問網頁

　　　　　　　媒體查詢查的實際上是視口寬度

2、媒體查詢的寫入方式：

　　　　一、style標籤中的media屬性

　　　　　　<style media="screen and (max-width:340px)"> 屏幕不超過340的時候才執行下面的內容

　　　　　　body{

　　　　　　　　　background:#00a9c1;

　　　　　　　　　}

　　　　　　<style>

　　　　　　不一樣的媒體查詢能夠並列起來（上下兩個媒體查詢能夠一塊兒寫）

　　　　　　　　body{　　　　

　　　　　　　　　　background:rgb(16,136,65);

　　　　　　　　　　　}

　　　　　　　</style>　　　　

 1 <head>
 2     <meta charset="UTF-8">
 3     <meta name="viewport"
 4           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 5     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 6     <title>Document</title>
 7     <style>
 8         body{
 9             margin: 0;
10         }
11     </style>
12     <style media="screen and (max-width:340px)">
13         body{  background: #00a9c1; }
14     </style>
15 
16     <style media="screen and (min-width:340px) and (max-width:720px)">
17         body{  background: rgb(16,136,65); }
18     </style>　　　　　
19 </head>

　　二、在link標籤中設置media屬性

　　　　上述代碼分別設置了寬度小於340px和340-720px的背景顏色。下面咱們經過引入外部css樣式的方法來繼續寫720px-1080px的樣式。

<link rel="stylesheet" href="720-1080.css" media="screen and (min-width:720px) and (max-width:1080px)">

　　　　並制定css的內容 body{ background: rgb(34,205,210); }

　　三、外鏈css樣式中的@media屬性（用的最多）

　　　　只引入外部css文件，查詢所有寫在外部css文件中。完美的實現了內容和樣式的分離。

　　　　在head標籤中寫入： <link rel="stylesheet" href="1080.css">

　　　　在1080.css中寫入：

1 @media screen and (min-width:1080px) and (max-width:1100px) {
2     body{
3         background: rgb(255,0,255);
4     }
5 }

　　　　這段代碼指定了網頁的寬度在1080-1100的寬度的時候顯示背景爲紫色。

3、媒體查詢的尺寸是如何肯定的？

　　　　http://screensiz.es/phone 是一個前端開發者必備的一個網站，上面列出了市面上大部分常見機型的分辨率大小。

　　咱們在設計分辨率的節點的時候，要以比較關機的機型的分辨率做爲參考來設置。

　　好比iPhone四、5的寬度是320px，這個節點就很是重要，它是小屏幕手機的一個分界點，通常都會在媒體查詢的時候設置這個點。

　　ipad mini的寬度是768，因此第二個節點就設置爲768 。

　　附：iPad媒體查詢的寫法

　　　　@media only screen and (min-width:768px) and (max-width:1024px){

　　　　　　語句

　　　　}

　　　　iPhone媒體查詢的寫法

　　　　@media only screen and (min-width:320px) and (max-width:767px){

　　　　　　語句

　　　　}

4、到底如何使用媒體查詢設置網頁？

　　響應式網頁、或者說媒體查詢的本質是佈局。

　　首選須要考慮的是：你是想從小往大作，仍是想從大往小作。這是兩種徹底不一樣的設計方案。

　　你的網頁自己是現有電腦端，從電腦端往手機端適配，仍是一開始就是作給移動端看的，再適配pc。

　　對於媒體查詢的影響就是：媒體查詢是從小往大了寫仍是從大往小了寫，是寫min-width仍是寫max-width（真正用的時候只寫一個）。

　　附連接：優雅降級和漸進加強　　　　　　

　　　　　　響應式佈局CSS3 Media Queries中屏幕分辨率順序寫法比較

5、最麻煩的問題——兼容性

　　IE六、IE七、IE8是不支持媒體查詢的。

　　解決方案：css3-mediaqueries.js。引入此文件能夠解決IE6-8沒法實現響應式媒體查詢的尷尬。

　　在Bootstrap上面咱們能夠找到這個在線的庫。

　　（在bootstrap上面搜索css3以後就能夠看到）

　　引入地址的寫法：

<!--[if lt IE 9]> //條件註釋判斷是IE9如下版本的瀏覽器

　　<script src="https://cdn.bootcss.com/livingston-css3-mediaqueries-js/1.0.0/css3-mediaqueries.js"></script>（完整版）

　　<script src="https://cdn.bootcss.com/livingston-css3-mediaqueries-js/1.0.0/css3-mediaqueries.min.js"></script>（min版，兩個版本任選其一）　　

　　<![endif]-->

6、　　em & rem

　　em、rem是尺寸單位，能夠用在字體上面，也能夠用在其餘元素上面。

　　取值來源：

　　　　em：父級元素上定義的font-size爲基準的倍率尺寸。

　　　　　　好比：html結構爲<div><p></p></div>

　　　　　　　　樣式裏面設置div{

　　　　　　　　　　　　　　　　font-size:20px;

　　　　　　　　　　　　　　　　}

　　　　　　　　　　　　　　　　width:30em;

　　　　　　　　　　　　　　　　height:2em;

　　　　　　　　　　　　　　　}

　　　　經過例子咱們能夠知道，em取值的大小是根據父級設置的字體大小來肯定的，默認狀況下1em=16px（就是瀏覽器默認字體大小），但em不只能夠用於設置字體的大小，還能夠用於設置其餘元素的大小（如p、input等）。

　　　　第二個例子：<div class="outer">

　　　　　　　　　　　　　　</div>

　　　　而後設置樣式：.outer{ font-size=100px }

　　　　　　　　　　　.middle{ font-size=0.5em }

　　　　　　　　　　　.inner{ width:3em;height:3em }

　　　　inner的寬高是150px。由於字體的尺寸是能夠繼承的，middle的大小是50px，inner的大小就是3個0.5em，也就是150px，而不是300px。

　　　　經過這個例子咱們能夠知道，在嵌套中計算字體大小是比較麻煩的，因此有了rem的這個單位。

　　　　rem：root font-size+em，即設定html的字體大小，根據這個大小來設定其餘元素的大小。這個html的字體大小不能設定爲10px，推薦爲20px。

　　　　經過引入resize.js，能夠方便設置rem。

 1 /*得到頁面寬度後動態修改html上的fontsize
 2 * 320爲iphone5設計稿下的頁面寬度，以下設置後頁面的頁面在iphone5等寬屏幕上html
 3 * 的font-size會變爲20px，即 1rem = 20px    1px=0.05rem
 4 * 因此設置元素尺寸的時候，若是測量設計稿 15px  則需設置尺寸爲 (0.05*15)rem = 0.75rem   
 5 */
 6 
 7 
 8 !(function(doc, win) {
 9     var docEle = doc.documentElement,
10         evt = "onorientationchange" in window ? "orientationchange" : "resize",
11         fn = function() {
12             var width = docEle.clientWidth;
13             width && (docEle.style.fontSize = 20 * (width / 320) + "px");
14         };
15      
16     win.addEventListener(evt, fn, false);
17     doc.addEventListener("DOMContentLoaded", fn, false);
18  
19 }(document, window));