移動端響應式設計筆記

時間 2019-11-17

標籤移動響應設計筆記欄目無線简体版

原文原文鏈接

五、Media（媒體查詢器）、@mediacss

Media（媒體查詢器），是響應式設計的核心CSS技術html

全部參數彙總：html5

width：瀏覽器可視寬度。chrome

height：瀏覽器可視高度。編程

device-width：設備屏幕的寬度。（例如："width=device-width"）小程序

device-height：設備屏幕的高度。微信小程序

orientation：檢測設備目前處於橫向仍是縱向狀態。瀏覽器

aspect-ratio：檢測瀏覽器可視寬度和高度的比例。(例如：aspect-ratio: 16/9)微信

device-aspect-ratio：檢測設備的寬度和高度的比例。app

color:檢測顏色的位數。（例如：min-color: 32就會檢測設備是否擁有32位顏色）

color-index：檢查設備顏色索引表中的顏色，值不能是負數。

resolution：檢測屏幕或打印機的分辨率。(例如：min-resolution: 300dpi或min-resolution: 118dpcm)

grid：檢測輸出的設備是網格的仍是位圖設備。

monochrome：檢測單色楨緩衝區域中的每一個像素的位數。（這個過高級，也不多會用到）

首先，咱們要使用Media須要先在html頁面添加以下代碼來兼容移動設備的展現效果

1 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

參數解析：

①width=device-width：寬度等於當前設備的寬度

②initial-scale=1.0：初始縮放比例默認爲1.0

🌂minimum-scale：容許用戶縮放到的最小比例（默認設置爲1.0），maximum-scale：容許用戶縮放到的最大比例（默認設置爲1.0）

④user-scalable：用戶是否能夠手動縮放，通常不但願用戶放大縮小頁面

其次，須要加載兼容文件，由於IE8既不支持HTML5也不支持CSS3 Media，加載兩個js文件保證能實現兼容效果

1 <!--[if lt IE 9]>
2   <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
3   <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
4 <![endif]-->

最後，咱們能夠在css文件裏面使用@media來進行響應式編程

1 @media screen and (max-width: 960px){
2     body{
3         background: #000;
4     }
5 }

代碼解析：

max-width: 960px：當頁面小於960px的時候執行如下css樣式代碼

screen：告知設備在打印頁面時使用襯線字體，在屏幕上顯示無襯線字體，目前不少網站會直接省略該值，由於不多須要用戶打印

因此每每爲

1 @media (max-width: 960px){
2     body{
3         background: #000;
4     }
5 }

拓展：

一、實現等於960px尺寸、大於或者大於小於

/* 等於960px*/
@media (max-device-width:960px){
    body{
        background:red;
    }
}

/* 大於960px */
@media (min-width:960px){
    body{
        background:black;
    }
}

/* 混合使用：當頁面寬度大於960px而且小於1200px時執行 */
@media screen and (min-width:960px) and (max-width:1200px){
    body{
        background:yellow;
    }
}

二、導航欄變側邊欄

三、多列變單列

二、淘寶flexible

問題：

如何使用Flexible實現手機淘寶H5頁面的終端適配

解決：

手機淘寶的flexible的設計和實現

手機淘寶，從2014年中開始全面推行flexible設計。flexible是responsive響應式設計的低端形態和基礎。

最直觀感覺就是，在超寬屏幕上，網頁顯示不會兩邊留白。

之前的PC時代的流體佈局，其實就是一種flexible design，只不過，流體的表述角度是實現，flexible的表述角度是結果。

首先，須要瞭解三個關鍵概念

ppi，pixel per inch，每英寸像素數	顯示世界每英寸的像素數，決定了屏幕的顯示質量
dpr，device pixel ratio，設備像素比率	物理像素與邏輯像素px的對應關係
resolution，分辨率	屏幕區域的寬高所佔像素數

場景一：resolution，分辨率適配

問題：

一張banner圖片，當你面對不一樣的屏幕時，會出現什麼行爲？而你但願它的行爲是什麼？

分析：

咱們須要考慮到，多數網頁都是縱向滾動，在不一樣的屏幕尺寸下，banner圖片的行爲應該是鋪滿屏幕寬度以及保持寬高比（放大縮小時把持比例）

解決：

使用百分比寬度，即width: 100%；

接着，須要固定寬高比，咱們有兩種思路來實現：一是利用img標籤的特性，只設置寬度，等圖片加載完，這種方法會致使大量的重排，而且非固定高度會致使懶加載等功能難以實現，因此果斷放棄；二是使用before僞元素的margin撐開高度，這種方法是比較乾淨的純css實現，可是不具有任何複用性並且要求特定html結構，因此一樣放棄。

因此，剩下最適合的方法：使用相對單位，rem，使用js給html設置一個跟屏幕寬度成正比的font-size，而後把元素高度都以rem做爲單位

遺留問題：

佔用了rem單位、不是純css方案

場景二：ppi適配

問題：

一段文字，當針對不一樣的屏幕，會是怎樣的行爲？你但願它的行爲是什麼？

分析：

咱們通常但願在不一樣手機上看到的文字尺寸是相同的，即不但願文字在Retina屏尺寸變小，而但願在大屏上看到更多文字；

另外如今絕大多數字體都是自帶點陣尺寸，一般爲16px和24px，咱們不但願出現13px或者15px這樣的奇葩尺寸；

因此，字體不適合使用rem（在咱們的但願前提下），而應該使用px

解決：

考慮到Retina，咱們利用media query來指定不一樣的字體；考慮到dpr斷定的兼容性，咱們用寬度替換來代替

1 .a {
2     font-size:12px
3 }
4 @media (min-width: 401px){
5     .a {
6         font-size:24px
7     }

備註：

有一些標題性文字，咱們但願隨着屏幕寬而增大的，因此咱們仍然使用rem做爲單位。

通常超過35px（我的直觀感覺）的文字，已經不用太考慮點陣信息了，靠字體的矢量信息也能渲染的很好。

場景三：dpr匹配

設備像素比率，物理像素和邏輯像素px的對應關係

問題：

一個區塊，設計稿上有1像素邊框，當針對不一樣的屏幕會出現什麼行爲？你但願它是什麼行爲？

分析：

通常狀況下咱們但願在任何屏幕上這條線仍然是1物理像素

解決：

由於這類問題不是使用px就能解決的，好比，在Retina屏下，假如你寫了viewport的設置，

你將永遠沒法寫出1px寬度的東西，另外，inline的SVG等元素，也會按照邏輯像素來渲染，致使整個頁面的清洗度會大打折扣。

因此，手機淘寶用JavaScript來動態寫meta標籤

 1 var metaEl = doc.createElement('meta');
 2 var scale = isRetina ? 0.5:1;
 3 metaEl.setAttribute('name', 'viewport');
 4 metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
 5 if (docEl.firstElementChild) {
 6     document.documentElement.firstElementChild.appendChild(metaEl);
 7 } else {
 8     var wrap = doc.createElement('div');
 9     wrap.appendChild(metaEl);
10     documen.write(wrap.innerHTML);
11 }