正文

移動(dòng)端自適應(yīng)（移動(dòng)端自適應(yīng)布局如何實(shí)現(xiàn)）

發(fā)布時(shí)間：2023-04-08 12:52:43 稿源：創(chuàng)意嶺閱讀： 110

大家好！今天讓創(chuàng)意嶺的小編來(lái)大家介紹下關(guān)于移動(dòng)端自適應(yīng)的問(wèn)題，以下是小編對(duì)此問(wèn)題的歸納整理，讓我們一起來(lái)看看吧。

開(kāi)始之前先推薦一個(gè)非常厲害的Ai人工智能工具，一鍵生成原創(chuàng)文章、方案、文案、工作計(jì)劃、工作報(bào)告、論文、代碼、作文、做題和對(duì)話(huà)答疑等等

只需要輸入關(guān)鍵詞，就能返回你想要的內(nèi)容，越精準(zhǔn)，寫(xiě)出的就越詳細(xì)，有微信小程序端、在線(xiàn)網(wǎng)頁(yè)版、PC客戶(hù)端

官網(wǎng)：https://ai.de1919.com。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務(wù)客戶(hù)遍布全球各地，如需了解SEO相關(guān)業(yè)務(wù)請(qǐng)撥打電話(huà)175-8598-2043，或添加微信：1454722008

本文目錄:

1、vue3.0+vite實(shí)現(xiàn)移動(dòng)端自適應(yīng)布局
2、vue移動(dòng)端高度自適應(yīng) 100vh不夠
3、finebi如果是發(fā)電腦店的鏈接,移動(dòng)端查看可以自適應(yīng)屏幕嗎
4、拿到一份設(shè)計(jì)稿，我該如何進(jìn)行移動(dòng)端開(kāi)發(fā)？

移動(dòng)端自適應(yīng)（移動(dòng)端自適應(yīng)布局如何實(shí)現(xiàn)）

一、vue3.0+vite實(shí)現(xiàn)移動(dòng)端自適應(yīng)布局

然后再main.ts中引入amfe-flexible

最后啟動(dòng)項(xiàng)目就會(huì)發(fā)現(xiàn)px已經(jīng)是自適應(yīng)的單位,如果想用原來(lái)的px只需改成大寫(xiě)的PX單位即可

二、vue移動(dòng)端高度自適應(yīng) 100vh不夠

有時(shí)候會(huì)使用100vh，剛進(jìn)入頁(yè)面時(shí)是合適的，但是若果頁(yè)面高度是動(dòng)態(tài)添加的，那么當(dāng)頁(yè)面實(shí)際高度超過(guò)100vh的時(shí)候，100vh的高度設(shè)置就不夠了。

例如：

↑此時(shí)外部容器為100vh 剛好合適

↑但是我添加步驟高度超過(guò)100vh 就不夠了

解決辦法：

在app.vue中設(shè)置

#app{

height: 100%;

}

html,body{

height: 100%;

}

在你要適配的頁(yè)面，將父容器的高度設(shè)為：

}

如果你的背景是一張圖片，那么就這樣：

#home {

width: 100%;

height: 100%;

overflow: scroll;

background-color: rgb(26, 28, 35);

background-image: url("../assets/bg.png");

background-size: 100%;

}

三、finebi如果是發(fā)電腦店的鏈接,移動(dòng)端查看可以自適應(yīng)屏幕嗎

發(fā)電腦店的鏈接在移動(dòng)端進(jìn)行查看會(huì)，在手機(jī)顯示上會(huì)顯示過(guò)小或者是過(guò)大，不可以自適應(yīng)屏幕，它有的端口就是開(kāi)發(fā)的時(shí)候沒(méi)有預(yù)留自適應(yīng)屏幕。

四、拿到一份設(shè)計(jì)稿，我該如何進(jìn)行移動(dòng)端開(kāi)發(fā)？

本文首發(fā)掘金： https://juejin.im/post/5d736747e51d4561ff66688c

出來(lái)混，那些混過(guò)去的，遲早是要還的 (￣Д ￣)┍ 。

讓我們來(lái)解決幾個(gè)問(wèn)題：

提到 viewport ，之前總感覺(jué)挺突兀的，但是當(dāng)我最近做移動(dòng)端項(xiàng)目時(shí)，突然關(guān)注到一直被忽略的 meta 標(biāo)簽的時(shí)候，才恍然大悟（o(╯□╰)o）。那么，首先讓我們來(lái)了解一下 meta 標(biāo)簽☛ 一直被忽略的meta標(biāo)簽了解一下，之后再去看 viewport ，就很容易記住了，不就是 meta 標(biāo)簽中 name 屬性的一個(gè)值嘛。

那么，它的作用是啥呢？要了解它具體的作用，我們需要先來(lái)了解一些相關(guān)的基本知識(shí)。

viewport 指瀏覽器的窗口，即瀏覽器上用來(lái)顯示網(wǎng)頁(yè)的那部分區(qū)域，是用戶(hù)網(wǎng)頁(yè)的可視區(qū)域。

在移動(dòng)端和pc端，視口是不同的。pc端的視口是瀏覽器窗口區(qū)域，而在移動(dòng)端則有三個(gè)不同的視口概念：布局視口、視覺(jué)視口、理想視口。

（👉 viewport移動(dòng)端適配、關(guān)于移動(dòng)端適配，你必須要知道的）

上面這個(gè)基本的設(shè)置：

🌟 viewport 屬性的作用，就是讓布局視口通過(guò)縮放來(lái)適配屏幕寬度， width=device.width 僅僅是讓布局視口初始大小等于設(shè)備寬度，后面設(shè)置的 initial-scale 是用來(lái)縮放布局視口大小，而且默認(rèn)是布局視口初始大小等于設(shè)備寬度，也就是所謂的理想視口。

將設(shè)計(jì)稿轉(zhuǎn)化為手機(jī)屏幕上的內(nèi)容，就類(lèi)似于畫(huà)地圖，按照一定的比例進(jìn)行縮小繪制：

dpr ( device pixel ratio) ：設(shè)備像素比，即設(shè)備物理像素與邏輯像素(css像素)的比例。

【設(shè)計(jì)稿】：設(shè)計(jì)師給的 750px 寬的設(shè)計(jì)稿是根據(jù) 設(shè)備像素（ device pixel，物理像素）為單位制作的設(shè)計(jì)稿。

【web頁(yè)面編寫(xiě)】：前端工程師在編碼 web 頁(yè)面時(shí)所寫(xiě)的 CSS 像素則需要根據(jù) 設(shè)備像素比來(lái)進(jìn)行換算。

縮放會(huì)影響布局視口的大小，當(dāng)我們?cè)谝苿?dòng)端對(duì)頁(yè)面進(jìn)行放大和縮小時(shí)，實(shí)際上是在改變 CSS 像素的大小，而 scale 縮放的目的就是為了使 CSS 像素適應(yīng)移動(dòng)端的設(shè)備像素 ，而這個(gè)縮放是通過(guò)兩個(gè)關(guān)鍵的元素設(shè)置來(lái)實(shí)現(xiàn)的：

width=device-width,initial-scale=1/dpr

做的事情就是先把布局視口放大dpr倍，然后再整體縮放相應(yīng)倍數(shù)以適應(yīng)設(shè)備尺寸，這樣就能夠使css像素和設(shè)備物理像素一對(duì)一了。

淘寶方案中采用了dpr用于解決1px的問(wèn)題，而網(wǎng)易方案并沒(méi)有引入dpr，布局視口沒(méi)有放大，整個(gè)頁(yè)面也沒(méi)有縮放，但是并不影響與設(shè)計(jì)圖的比例。

➹ 真的，移動(dòng)端尺寸自適應(yīng)與dpr無(wú)關(guān)

➹ 詳解適配相關(guān)概念

明白了上述幾個(gè)問(wèn)題了之后，我們就掌握了移動(dòng)端自適應(yīng)的精髓，從而可以進(jìn)行實(shí)戰(zhàn)開(kāi)發(fā)了。

通過(guò)上面的 rem 換算，我們能夠知道，如何把視覺(jué)稿（ 750px ）中元素的 px 轉(zhuǎn)換成 rem 。

（1）設(shè)置 html font-size，如將手機(jī)屏幕分成10份：

（2）假設(shè)元素寬度為 300px ，則元素寬度：

可以通過(guò)以下的方案來(lái)實(shí)現(xiàn)自動(dòng)轉(zhuǎn)換：

✔ Scss 方案

✔ vscode 中進(jìn)行 px 到 rem 的轉(zhuǎn)換： vscode-cssrem