適配移動端解決思路

閱讀本文前，先了解一篇文章 移動端視口

1.適配移動端方法一：PC+ 移動端使用媒體查詢

PC端，移動端使用媒體查詢，使用同一套代碼
html頭部添加
<meta name="viewport" content="width=device-width, initial-scale=1.0">
內容區域：
採用媒體查詢的方式佈局頁面。主要是通過查詢設備的寬度來執行不同的css代碼，最終達到界面的配置

 @media screen and (min-width: 414px){
         /*iphone6/7/8*/
         }
 @media screen and (min-width: 375px){
		 /*iphone6/7/8plus*/
      }

媒體查詢優勢
簡單, 哪裏不對改哪裏
調整屏幕寬度的時候不用刷新頁面即可響應式展示
特別適合對移動短和PC維護同一套代碼的時候
問題：
由於移動端和PC端維護同一套代碼, 所以代碼量比較大，維護不方便
爲了兼顧大屏幕或高清設備，會造成其他設備資源浪費，特別是加載圖片資源(大圖，小圖都要寫在html中。用戶都要下載)
爲了兼顧移動端和PC端各自響應式的展示效果，難免會損失各自特有的交互方式

應用場景
對於比較簡單(界面不復雜)的網頁, 諸如: 企業官網、宣傳單頁等
我們可以通過媒體查詢、伸縮佈局、Bootstrap來實現響應式站點

對於比較複雜(界面複雜)的網頁, 諸如: 電商、團購等
更多的則是PC端一套代碼, 移動端一套代碼（如：京東，淘寶）

如何實現PC端一套代碼,移動端一套代碼,（界面自動跳轉：域名不同）
在PC端打開自動打開PC端界面
在移動端打開自動打開移動端界面

實現步驟:
1、默認打開PC端界面
2、在PC端界面中通過BOM拿到當前瀏覽器信息（navigator.userAgent）
3、通過正則判斷當前瀏覽器是否是移動端瀏覽器
4、通過BOM的location對象實現跳轉到移動端界面

2.適配移動端方法二：移動端使用媒體查詢 + rem

解決媒體查詢中所有元素需要根據不同設備重複編寫，
當下在企業開發中設計師提供給我們的移動端設計圖片是750xxx的或者1125xxx的，
所以我們需要對設計師提供的圖片進行等比縮放, 這樣才能1:1還原設計圖片的問題

• 如何等比縮放?

  • 將設計圖片等分爲指定份數,求出每一份的大小
    例如: 750設計圖片分爲7.5份, 那麼每一份的大小就是100px

  • 將目標屏幕也等分爲指定份數,求出每一份的大小
    例如: 375屏幕也分爲7.5份, 那麼每一份的大小就是50px

  • 用 原始元素尺寸 / 原始圖片每一份大小 * 目標屏幕每一份大小 = 等比縮放後的尺寸
    例如: 設計圖片上有一個150150的圖片, 我想等比縮放顯示到375屏幕上
    那麼: 150 / 100 * 50 = 1.550 = 75px

• .如何在前端開發中應用這個計算公式?

  • 目標屏幕每一份的大小就是html的font-size: 50px
  • 使用時只需要用 “原始元素尺寸 / 原始圖片每一份大rem” 即可
    150 / 100 = 1.5 / 1.5rem
    1rem = 50px / 1.5rem === 1.5*50 = 75px

rem：前端開發常用單位

 @media screen and (max-width: 320px){
            /*
            原始圖片750。一份一百，分7.5份
            iphone5：目標屏幕320,7.5份，一份42.67
            */
            html{
                font-size: 42.67px;/*1rem=42.67*/
            }
        }
@media screen and (min-width: 375px){
            /*
            原始圖片750。一份一百，分7.5份
            iphone6：目標屏幕375, 7.5份，一份50
            */
            html{
                font-size: 50px;/*1rem=50*/
            }
        }
.top>p{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top:0.8rem;/*80/100元素大小/原始圖片每份大小*目標屏幕每份大小*/
            font-size: 0.36rem;/*36/100*/
            color: #fff;
        }

3.適配移動端方法三：移動端使用js + rem

解決上百設備，每個設備都要使用媒體查詢計算設備每份大小的問題。
解決方案：使用js獲取設備寬度
document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";
css的編寫同方法二

4.適配移動端方法四：移動端使用js + rem

解決設備像素同css像素不同的問題。設備（物理）像素和CSS（邏輯）像素

let scale = 1.0 / window.devicePixelRatio;
let text = `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scaleable=no">`;
 document.write(text);
 document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";//可視區域一份的大小

css的編寫同方法二