當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

04-移动适配

發布時間：2023/12/20 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 04-移动适配小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

移動適配

當前用戶的屏幕寬度不同，網頁元素尺寸不同，那如何在不同的屏幕尺寸中實現網頁元素的等比縮放，實現寬高自適應呢？px單位或百分比布局是否可以實現這種效果呢？今天讓我們來了解一下移動適配。

百分比布局特點寬度自適應，高度固定，并不能做到寬高隨著屏幕尺寸的變化而完全自適應。想要實現屏幕適配，重點就在相對單位上，只能選擇相對長度單位。

目前解決這種問題的方法有兩種：

rem ：目前多數企業在用的解決方案
vw / vh：未來的解決方案

初識vw/vh

文字解析

1.什么是vw/vh？

vw是相對長度單位，相對于視口寬度（1vw=1/100屏幕寬度）

vh是相對長度單位，相對于視口高度（1vw=1/100屏幕高度）

有什么作用呢？

實現移動端屏幕適配，一套代碼可以實現：

大一點的屏幕看起來里面的元素就越大
小一點的屏幕看起來里面的元素就越小

我們要使用vw/vh，那如何根據設計稿以及里面元素的大小，來確定對應數值的vw或者vh呢？

分析：我們已知的只有設計稿跟元素div的寬高，對用戶使用什么尺寸的屏幕觀看一無所知，那我們要寫多少的vw，才能夠做好移動適配呢？

已知1vw=1/100屏幕寬度，那么手機屏幕就是100vw（只是不同尺寸屏幕的手機中，vw的值不同）,那要如何獲取適配手機中的div的寬度呢。讓我們用簡單的數學運算來分析一下：

已知手機中div的寬度/要適配手機的屏幕100vw=設計稿中div的寬度/設計稿的寬度，經過左右轉換可得出：

要適配的手機中的div的寬度= (要適配的手機的屏幕100vw) * 設計稿中div的寬度/設計稿的寬度。

分析題目：假如設計稿寬度為375px，div為100px；手機屏幕為750px，那么手機中盒子div的寬度為多少呢？

手機盒子div=100vw*100/375=26.6667vw

上方的解析過于冗雜，簡而言之就是個字：“等比例縮放”

只要得出設計稿中div占據總提寬度的比值，再乘以100vw，就可以得出手機屏幕中div的寬度。

*（設計稿div寬度 / 總寬度）100vw=手機屏幕中div的寬度

圖片解析

感覺文字過于抽象的，可以查看下方的圖片解析：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-QjENtTff-1648710218193)(04-移動適配.assets/1647830264909.png)]

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ftRdd5Uk-1648710218194)(04-移動適配.assets/1647830368729.png)]

練習測試

看完之后，嘗試一下是否能做出下方練習哦

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-9r7PpTNB-1648710218194)(04-移動適配.assets/1647830938616.png)]

完成代碼：

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vw練習</title><style>* {padding: 0;margin: 0;box-sizing: border-box;} /* 1.vw跟px單位不同，所以無法直接進行計算，需要在中間添加calc() 2. calc()是計算的縮寫，方便計算3. 運算符兩側要添加空格 */.box1 {width: calc(100vw * 100 / 375);height: calc(100vw * 50 / 375);/* 運算符兩個要添加空格 */background-color: red;}.box2 {width: calc(100vw * 200 / 375);height: calc(100vw * 80 / 375);background-color: yellow;font-size: calc(100vw *40 / 375);}</style> </head><body><div class="box1"></div><div class="box2">good</div></body></html>

添加vscode插件輔助運算vw

學習之后，是否覺得計算太過麻煩，為了提升我們的開發體驗，可以添加vscode插件來輔助我們運算

先體驗一下結果圖：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-EFAE7Gsp-1648710218194)(04-移動適配.assets/1647832986525.png)]

安裝插件的步驟：

在vscode的擴展中直接搜索“px2vw”,并下載

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-S5FsAEK6-1648710218194)(04-移動適配.assets/1647833228739.png)]

安裝好之后點擊軟件左下角的“管理——設置——打開設置（右上角）——打開之后在里面添加一行代碼【 “px2vw.width”: 375,】(直接復制中括號里面的字符，符號不要漏了)——添加完之后重啟即可

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-rdBnp4aT-1648710218195)(04-移動適配.assets/1647833799638.png)]

使用：安裝好之后，設置盒子div的寬度跟高度時，按照設計稿給的數據直接給div盒子添加數值即可，如上述效果圖中的高度直接寫 height: 100px;然后按回車鍵，即可選擇運算好的vw單位數值

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-L4ChSuN2-1648710218195)(04-移動適配.assets/1647833644317.png)]

語法：

rem移動適配

初識rem

rem是什么？

rem是一個相對單位，rem單位是相對于HTML標簽的字號計算結果
1rem = 1HTML字號大小
使用方法：需要先設置html標簽的大小，后續設置寬高的時候單位選擇rem即可

目標：設置跟標簽hteml以及能夠使用rem單位設置網頁元素的尺寸

語法：

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>體驗rem匹配移動適配</title><style>/* 體驗rem移動適配,首先要設置html標簽的字體大小原理： 1.rem單位是相對于HTML標簽的字號計算結果;2.1rem = 1HTML字號大小 */html {font-size: 20px;}/* 設置盒子的寬高為5rem，實際上獲得的寬高長度為：5*20=100px */.box {width: 5rem;height: 5rem;background-color: pink;}</style> </head><body><div class="box"></div> </body></html>

3.那要如何做到rem屏幕適配呢？

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-SKOM6tKb-1648710218195)(04-移動適配.assets/1647856122546.png)]

flexible

1.flexible 的作用

目標：使用flexible js配合rem實現在不同寬度的設備中，網頁元素尺寸等比縮放效果

flexible.js是手淘開發出的一個用來適配移動端的js框架
核心原理就是根據不同的視口寬度給網頁中html根節點設置不同的font-size
引入flexile.js 之后，屏幕寬度和html字體大小的關系為：根標簽字體大小=1/10屏幕大小 → 10rem=屏幕寬度。

引入語法：

驗證代碼：10rem等于屏幕寬度

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flexible</title><style>.box1 {width: 10rem;height: 200px;background-color: pink;}.box2 {width: 5rem;height: 100px;background-color: yellow;}</style> </head><body><div class="box1"></div><div class="box2"></div><script src="./flexible.js"></script> </body></html>

2.使用flexible實現屏幕適配

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用flexible 讓rem實現屏幕適配</title><style>.box1 {width: calc(10rem * 100 / 375);height: calc(10rem * 50 / 375);background-color: yellow;}.box2 {width: calc(10rem * 200 / 375);height: calc(10rem * 80 / 375);background-color: pink;font-size: calc(10rem * 40 / 375);}</style> </head><body><div class="box1"></div><div class="box2">帥氣</div><script src="./flexible.js"></script> </body></html>

3.添加vscode插件輔助使用rem

在剛才的使用過程中，還需要使用calc()來輔助計算，比較繁瑣。我們現在使用vscode插件來優化我們的開發體驗

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-I1hm6fg1-1648710218195)(04-移動適配.assets/1647856980407.png)]

具體的使用跟安裝方法跟上方的vw一樣，建議參考之前的使用步驟。

less

初識less

什么是less？

less 是一種提高我們編寫css效率的技術 = > css預處理器。

less工作流程

我們寫樣式代碼直接寫在less文件中

通過插件來把less文件編譯成我們熟悉的css文件

網頁中來引入編譯好的 css文件! !

使用less的過程

新建一個less文件 (后綴名就是.less)

會按照less的語法要求在less文件中編寫代碼

通過easy less vscode插件來編譯less文件

會生成對應的css文件

在網頁中直接引入編譯好的css文件即可

// 聲明一個變量 @color: green;div {// color: @color;width: 100px;height: 100px;background-color: @color;border: 1px solid @color; }p {color: @color; } // 聲明變量的名稱可以隨便取聲明一個變量之后，后續可以直接調用

less變量使用

less變量的作用：

方便我們快速的去修改樣式（把一些CSS屬性設置在一個地方，實現一改全改的效果。）

比如頁面有一種主題色(天貓。京東紅色。美團黃色。餓了嗎藍色)，當我們要修改主題顏色的時候，只改一個地方less變量。懂得了使用less變量技術就可以做到改一個地方就會達到全局修改的結果（所有使用該變量的地方，都會跟隨改變）

使用方法

在less文件中設置固定語法：@+任意變量名稱(有語義的英文)

設置less變量以及使用的語法案例：

// 字體大小 @fontsize: 20p; // 主題顏色 @tmeme-color: gray;// 字體顏色 @color: red; // 寬度 @width: 200px; // 高度 @height: 100px;div {// 字體直接引用上方的less變量 @fontsizefont-size: @fontsize;// 背景顏色直接引用上方的less變量 @tmeme-colorbackground-color: @tmeme-color;color: @color; }p {color: @color;width: @width;height: @height; }

CSS文件轉化的代碼：

div {font-size: 20p;background-color: gray;color: red; }p {color: red;width: 200px;height: 100px; }

less進行運算

// 默認的css不支持運算，要添加calc才可以 div {/* 加減乘直接使用即可width: 100px - 20px;height: 50px + 30px;font-size: 20px * 2;/*在使用除法的時候，需要用括號將數值包起來*/width: (200px / 2); }

? CSS語法展示：

div {/* 加減乘直接使用即可width: 100px - 20px;height: 50px + 30px;font-size: 20px * 2;/*在使用除法的時候，需要用括號將數值包起來width: 100px; }

less混合mixin使用(類似公共樣式)

寫法：.類名(){}

.aaa(){}

mixi混合寫法類似于寫公共樣式，就是將一大堆相同的代碼放在一起，哪里需要直接調用即可。

// less 混合mixin語法 // 精靈圖所在的位置 // A (100px, 200px) B (200px, 100px) C (-100px, -200px) // 設置公共混合樣式使用 /*定義一個mixin*/ .aaa(@a1, @a2) {background-image: url(1.png);background-repeat: no-repeat;background-size: 100%;background-position: @a1 @a2;}div {.aaa(300px, 200px);// background-position: 100px 200px; }a {.aaa(100px, 200px);// background-position: 200px 200px; }p {background-image: url(2.png);background-repeat: no-repeat;background-size: 100%;background-position: 100px 200px; }

less嵌套：按照html的嵌套結構，來編寫CSS嵌套

less嵌套有一點需要注意，在寫偽元素的時候，需要在偽元素前添加一個連接符“&”

.box {background-color: red;width: 100px;height: 100px;.box1 {width: 50px;height: 50px;background-color: blanchedalmond;/*嵌套偽元素選擇器時，需要在前面添加一個“&”連接符*/.img {&::after {content: '這是一個偽元素';}font-size: 20px;width: 10px;height: 20px;background-color: aqua;overflow: hidden;.box2 {background-color: yellow;width: 100px;height: 100px;}}} }.main {width: 800px;height: 800px;background-color: tomato;>.te {font-size: 200px;} } }font-size: 20px;width: 10px;height: 20px;background-color: aqua;overflow: hidden;.box2 {background-color: yellow;width: 100px;height: 100px;}}}

}

.main {
width: 800px;
height: 800px;
background-color: tomato;

>.te {font-size: 200px; }

}

總結

以上是生活随笔為你收集整理的04-移动适配的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：本体的概念起源
下一篇： laravel框架 APP 支付宝支付