前端解決移動端適配的五種方法

2022-08-26 08:51:10 字數 3225 閱讀 3825

原理：通過設定initial-scale, 將所有裝置布局視口的寬度調整為設計圖的寬度.

//獲取meta節點


var metanode = document.queryselector('meta[name=viewport]');


//定義設計稿寬度為375


var designwidth = 375;


//計算當前螢幕的寬度與設計稿比例


var scale = document.documentelement.clientwidth/designwidth;


//通過設定meta元素中content的initial-scale值達到移動端適配


meta.content="initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no";
rem：css的長度單位， 根元素字型大小的倍數，只有根元素字型大小有關； html 中的根元素即 html 元素。

大部分瀏覽器的預設字型大小都是16px，所以1rem = 16px；

rem適配原理:

//對螢幕大小劃分了html不同的font-size


@media screen and (min-width: 320px) }


@media screen and (min-width: 360px) }


@media screen and (min-width: 375px) }


@media screen and (min-width: 400px) }


@media screen and (min-width: 414px) }


@media screen and (min-width: 440px) }


@media screen and (min-width: 480px) }


@media screen and (min-width: 520px) }


@media screen and (min-width: 560px) }


@media screen and (min-width: 600px) }


@media screen and (min-width: 640px) }


@media screen and (min-width: 680px) }


@media screen and (min-width: 720px) }


@media screen and (min-width: 760px) }


@media screen and (min-width: 800px) }


@media screen and (min-width: 960px) }


var designwidth = 375;  		// 設計稿寬度


var rempx = 100; // 在螢幕寬度375px，的時候，設定根元素字型大小 100px


var scale = window.innerwidth / designwidth； //計算當前螢幕的寬度與設計稿比例


// 根據螢幕寬度 動態計算根元素的 字型大小


document.documentelement.style.fontsize = scale*rempx + 'px';
這裡我們計算當前螢幕的寬度與設計稿比後用比例scale乘上100，是因為rem都是基於font-size值設定的，100便於計算，值可以為任意數，比如10，但是chrome中最小為12，所以這裡選擇用100；

從而達到rem適配。

// 計算螢幕寬度


var screen = document.documentelement.clientwidth;


// 計算字型大小，取螢幕寬度的16分之一


var size = screen / 16;


// 設定根元素字型大小


document.documentelement.style.fontsize = size + 'px';
js獲取當前螢幕的寬度，將螢幕寬度的16分之一設定給html的font-size

// 此時設計稿的寬度為375，定義乙個less變數等於16分之一的設計稿寬度


@rem: 375/16rem;
如果此時設計稿中的16可以為任意值，你設定多少，js中螢幕寬度就除於多少再賦值給html的font-size。

若設計稿中的某元素設定寬高為200px

.box
此時可以替換為：

.box
分析：

設計稿中的元素尺寸都是基於設計稿的寬度而定，如上述，200px的寬度是基於設計稿375px而定的，但當js中獲取的寬度發生改變時，需要解決適配問題。假設js中獲取的此時螢幕寬度為750px，那麼此時html的font-size值為750/16 px；

此時計算box的width為400px

注：1rem = 1 html的font-size

此方法不需要進行單位數值的計算，只需要定義乙個less變數，再查詢替換將單位px換成 /@rem 即可。

這種方法跟第四種雷同，但不需要再在less中定義變數，只需要進行js獲取配合查詢替換px即可。

// 計算螢幕寬度


var screen = document.documentelement.clientwidth;


// 設定根元素字型大小


document.documentelement.style.fontsize = screen + 'px';


.box
.box
分析：

這種方法是js動態獲取螢幕寬度，直接將html的font-size設定為螢幕的寬度，再在less中進行換算。

若此時js獲取的螢幕寬度為750px，html的font-size值設定為750px後，此時計算box的width為400px

200/375rem = 200/375*750 px = 400px

談談移動端螢幕適配的幾種方法

響應式布局 簡而言之，就是頁面元素的位置隨著螢幕尺寸的變化而變化，通常會用百分比來定位，而在設計上需要預留一些可被 壓縮 的空間。如上圖，其實就相當於頁面被壓矮了。cover布局 就跟background size的cover屬性一樣，保持頁面的寬高比，取寬或高之中的較小者佔滿螢幕，超出的內容會被隱...

移動端適配的方法

1.利用meta的viewport做適配 在裡面加乙個script的處理 然後css的寫法就是按照正常量到的設計稿尺寸就可以了，單位為px 2.利用 手淘 rem less 做適配 less編譯成css，頁面只需要引入css就可以了，引入檔案 1 flexible.js 2 less編譯後的css檔...

移動端幾種做前端適配的方法講解

目前我所知道是有幾種方法來做適配 1.使用rem單位來做網頁適配，這個是我比較推薦的一種，效果很好，瀏覽器的相容性也不錯 只要一行 就能適配多個解析度終端 function doc,win docel.style.fontsize 100 clientwidth 750 px recalc if d...