移動(dòng)端適配方案具體實(shí)現(xiàn)以及對(duì)比

• media queries
• flex 布局
• rem + viewport
• vh vw
• 百分比
• bootstrap

一、Meida Queries

meida queries 的方式可以說(shuō)是我早期采用的布局方式，它主要是通過(guò)查詢(xún)?cè)O(shè)備的寬度來(lái)執(zhí)行不同的 css 代碼，最終達(dá)到界面的配置。

二、Flex 彈性布局

以天貓的實(shí)現(xiàn)方式進(jìn)行說(shuō)明：
它的 viewport 是固定的：
高度定死，寬度自適應(yīng)，元素都采用 px 做單位。
隨著屏幕寬度變化，頁(yè)面也會(huì)跟著變化，效果就和 PC 頁(yè)面的流體布局差不多，在哪個(gè)寬度需要調(diào)整的時(shí)候使用響應(yīng)式布局調(diào)

三、rem+viewport 縮放

實(shí)現(xiàn)原理：
根據(jù) rem 將頁(yè)面放大 dpr 倍, 然后 viewport 設(shè)置為 1/dpr.
如 iphone6 plus 的 dpr 為 3, 則頁(yè)面整體放大 3 倍, 1px(css 單位)在 plus 下默認(rèn)為 3px(物理像素)
然后 viewport 設(shè)置為 1/3, 這樣頁(yè)面整體縮回原始大小. 從而實(shí)現(xiàn)高清。
這樣整個(gè)網(wǎng)頁(yè)在設(shè)備內(nèi)顯示時(shí)的頁(yè)面寬度就會(huì)等于設(shè)備邏輯像素大小，也就是 device-width。這個(gè) device-width 的計(jì)算公式為：
設(shè)備的物理分辨率/(devicePixelRatio * scale)，在 scale 為 1 的情況下，device-width = 設(shè)備的物理分辨率/devicePixelRatio。

四、rem 實(shí)現(xiàn)

rem是相對(duì)長(zhǎng)度單位，rem方案中的樣式設(shè)計(jì)為相對(duì)于根元素font-size計(jì)算值的倍數(shù)。根據(jù)屏幕寬度設(shè)置html標(biāo)簽的font-size，在布局時(shí)使用 rem 單位布局，達(dá)到自適應(yīng)的目的。
viewport 是固定的：。

五、純 vw 方案

視口是瀏覽器中用于呈現(xiàn)網(wǎng)頁(yè)的區(qū)域。
vw : 1vw 等于 視口寬度 的 1%
vh : 1vh  等于 視口高度 的 **1% **
vmin : 選取 vw 和 vh 中 最小 的那個(gè)
vmax : 選取 vw 和 vh 中 大 的那個(gè)

六、vw + rem 方案

// scss 語(yǔ)法
// 設(shè)置html根元素的大小 750px->75 640px->64
// 將屏幕分成10份，每份作為根元素的大小。
$vw_fontsize: 75
@function rem($px) {
// 例如：一個(gè)div的寬度為100px，那么它對(duì)應(yīng)的rem單位就是（100/根元素的大?。? 1rem
@return ($px / $vw_fontsize) * 1rem;
}
$base_design: 750
html {
// rem與vw相關(guān)聯(lián)
font-size: ($vw_fontsize / ($base_design / 2)) * 100vw;
// 同時(shí)，通過(guò)Media Queries 限制根元素大最小值
@media screen and (max-width: 320px) {
font-size: 64px;
}
@media screen and (min-width: 540px) {
font-size: 108px;
}
}
// body 也增加大最小寬度限制，避免默認(rèn)100%寬度的 block 元素跟隨 body 而過(guò)大過(guò)小
body {
max-width: 540px;
min-width: 320px;
}

七、百分比

使用百分比%定義寬度，高度用px固定，根據(jù)可視區(qū)域?qū)崟r(shí)尺寸進(jìn)行調(diào)整，盡可能適應(yīng)各種分辨率，通常使用max-width/min-width控制尺寸范圍過(guò)大或者過(guò)小。

網(wǎng)頁(yè)標(biāo)題：移動(dòng)端適配方案具體實(shí)現(xiàn)以及對(duì)比
網(wǎng)站路徑：http://muchs.cn/news/167716.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、ChatGPT、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)公司、定制開(kāi)發(fā)、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)