前端幾種常見適配方式的方法總結

幾種檢測瀏覽器大小方法

方法一:媒體查詢（css3的新語法）

媒體查詢可以用於檢測很多東西：自動檢測viewpoint（視窗）的寬度和高度；設備的寬度和高度；旋轉方向（智能手機橫屏或豎屏）；分辨率大小。

（一）直接寫在css樣式中

• 使用@media查詢，可以針對不同的媒體類型類型定義不同的樣式
• 使用@media查詢，在重置瀏覽器大小的過程中，頁面根據瀏覽器的寬度和高度重新渲染頁面
• 目前針對很多蘋果手機、android手機，平板等設備都用到多媒體查詢
• 語法規范：

 @media mediatype and|not|only (media feature) {
        CSS-Code;
    }

注意

1、用@media開頭，注意@符號

2、mediatype 媒體類型

值	解釋說明
all	用於所有設備
print	用於打印機瀏覽
screen	用於電腦屏幕、平板電腦、智能能手機等

3、關鍵字and not only

值	解釋說明
and	用來連接多種媒體特性，一個媒體查詢中可以包含0或多個表達式，表達式可以是0或多個關鍵字，以及一種媒體類型。 如：@media screen and (max-width:800px) and (min-width:400px)
not	用來排除某種設備。比如，排除打印設備 @media not print；
only	指定某特定媒體設備

4、media feature媒體特性，必須有小括號包含。

值	解釋說明
width	定義輸出設備中的頁面可見區域寬度。
min-width	定義輸出設備中的頁面最小可見區域寬度。
max-width	定義輸出設備中的頁面最大可見區域寬度

【舉例】

common.less文件

//設置常見的屏幕尺寸，修改里面的html文字大小，常見的屏幕尺寸有320px/375px/384px/400px/414px/424px/424px/480px/540px/720px/750px
//如果在普通pc端打開，直接將html大小指定為50px，不再除以15等份。一定要寫在最上面,因為樣式具有層疊性
html{
    font-size: 50px;
}
//我們此次定義的划分份數為15
@part:15;
//320
@media screen and (min-width:320px) {
    html {
        font-size: 320px/@part;
    }
}
//360
@media screen and (min-width:360px){
    html{
        font-size: 360px/@part;
    }
}
//375
@media screen and (min-width:375px){
    html{
        font-size: 375px/@part;
    }
}
//384
@media screen and (min-width:384px){
    html{
        font-size: 384px/@part;
    }
}
……
……
……
//720
@media screen and (min-width:720px) {
    html{
        font-size: 720px/@part;
    }
}
//750
@media screen and (min-width:750px) {
    html{
        font-size: 750px/@part;
    }
}

(二) 針對不同的媒體設備外部鏈入不同的 stylesheets（外部樣式表）

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

定義媒體查詢的部分放在<link>標簽內，用media屬性標注，media="  媒體類型 and/not/only（媒體特性）"

【舉例】

<link media="screen and (min-widtn:320px)" rel="stylesheet" href="css/index.css">
<link media="screen and (min-widtn:360px)" rel="stylesheet" href="css/index1.css">
<link media="screen and (min-widtn:375px)" rel="stylesheet" href="css/index2.css">

方法二：js自動獲取瀏覽器寬度

1、window.onresize是調整窗口大小加載事件，當觸發時就調用的處理函數

 window.onresize = function() {}
 window.addEventListener("resize", function() {})

2、window.innerWidth當前屏幕的寬度

【舉例】

  //1、窗口加載事件
    window.addEventListener("load", function() {
        var box = document.querySelector('div');
        //2、調整窗口大小加載事件，當觸發時就調用相應的處理函數
        window.addEventListener("resize", function() {
            if (window.innerWidth <= 800) {
                box.style.display = 'none';
            } else {
                box.style.display = 'block';
            }
        })

    })

方法三：flexible.js插件(檢測瀏覽器寬度、修改html文字大小)

1、手機淘寶團隊出的簡潔高效移動端適配布局，不需要再寫不同屏幕的媒體查詢，因為里面的js做了處理

2、原理是：自動把當前設備屏幕大小划分成10等份，不再需要媒體查詢，不同設備下，元素大小的比例是一致的

3、我們要做的就是，下載並引入flexible.js文件，注意引入后最好檢驗一下是否引入正確，githup地址：GitHub - amfe/lib-flexible: 可伸縮布局方案

<script src="js/flexible.js"></script>

4、我們只需要確定好當前設備的html的文字大小（設計稿大小/10），將頁面里各元素大小以rem值(頁面元素的px值/html大小)表示即可，剩余交給flexible.js去自動處理適配不同

【舉例】

頁面引入flexible.js文件以后：