柚子快報(bào)激活碼778899分享：前端 html頁面縮放自適應(yīng)

http://yzkb.51969.com/

html頁面縮放自適應(yīng)

一、為什么頁面要進(jìn)行縮放自適應(yīng)

在我們一般web端進(jìn)行頁面拼接完成后，在web端的顯示正常（畢竟我們是按照web端進(jìn)行頁面拼接完成的），那么要是用其他設(shè)備打開呢，比如手機(jī)或者平板，這時(shí)候顯示的比例和尺寸跟我們看到的就大相徑庭了。

由于手機(jī)屏幕尺寸不一樣，分辨率不一樣，或者你需要考慮橫豎屏的問題，這時(shí)候你也就不得不解決在不同手機(jī)上，不同情況下的展示效果了。

另外一點(diǎn)，UI一般輸出的視覺稿只有一份，比如淘寶就會(huì)輸出：750px 寬度的（高度是動(dòng)態(tài)的一般不考慮）（詳情），這時(shí)候開發(fā)人員就不得不針對(duì)這一份設(shè)計(jì)稿，讓其在不同屏幕寬度下顯示 一致。

這樣做的好處在于：

降低了開發(fā)成本**：**原本要涉及iOS、Android、PC（PC和Mac用同一套Qt實(shí)現(xiàn)）、H5這4個(gè)端的開發(fā)人員，現(xiàn)在采用內(nèi)嵌頁的方式，可以做到完全不涉及移動(dòng)端和桌面端，或者僅是入口放置這類比較簡單的工作。降低了維護(hù)成本：如果有優(yōu)化調(diào)整，可以只改H5頁面，不用各個(gè)端都動(dòng)手。

舉個(gè)栗子：

在 1080px 的視覺稿中，左上角有個(gè)logo，寬度是 180px（高度問題同理可得）。

那么logo在不同的手機(jī)屏幕上等比例顯示應(yīng)該多大尺寸呢？

其實(shí)按照比例換算，我們大致可以得到如下的結(jié)果：

在CSS像素是 375px 的手機(jī)上，應(yīng)該顯示多大呢？結(jié)果是：375px * 180 / 1080 = 62.5px 在CSS像素是 360px 的手機(jī)上，應(yīng)該顯示多大呢？結(jié)果是：360px * 180 / 1080 = 60px 在CSS像素是 320px 的手機(jī)上，應(yīng)該顯示多大呢？結(jié)果是：320px * 180 / 1080 = 53.3333px

二、自適應(yīng)需要解決什么問題

主要有如下幾個(gè)問題：

元素自適應(yīng)問題 文字rem問題 高清圖問題 1像素問題 橫豎屏顯示問題 手機(jī)字體縮放問題

這些問題具體分析可以看看這篇網(wǎng)上文章（未測試）：移動(dòng)端H5解惑-頁面適配_h5移動(dòng)端適配原理-CSDN博客

三、屏幕適配方案

到目前為止，開始實(shí)操一種方式進(jìn)行簡單的屏幕適配操作，以達(dá)到想要的界面效果！

適用框架：Vue2/Vue3 適用設(shè)備：pc端/移動(dòng)端 適配策略：動(dòng)態(tài)rem+動(dòng)態(tài)scale 方案效果：可讓頁面在不同屏幕下、放大縮小時(shí)保持頁面不變形

屏幕拉伸：

項(xiàng)目配置：

Vue項(xiàng)目中使用postcss-pxtorem插件自動(dòng)化px轉(zhuǎn)rem的過程。

要在 Vue 項(xiàng)目中使用 postcss-pxtorem，你需要按照以下步驟操作：

安裝 postcss-pxtorem：

npm install postcss-pxtorem --save

新建 rem.js 文件，內(nèi)容為：

const baseSize = 14;

function setRem() {

const scale = document.documentElement.clientWidth / 750;

document.documentElement.style.fontSize =

baseSize * Math.min(scale, 1.2) + "px";

}

setRem();

window.onresize = function() {

setRem();

}

在main.js中導(dǎo)入rem.js文件：

import "./config/rem";

在vite.config.js中添加

import path from 'path'

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import AutoImport from 'unplugin-auto-import/vite'

import Components from 'unplugin-vue-components/vite'

import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

import postCssPxToRem from 'postcss-pxtorem'

// https://vitejs.dev/config/

export default defineConfig({

plugins: [

vue(),

AutoImport({

resolvers: [ElementPlusResolver()]

}),

Components({

resolvers: [ElementPlusResolver()],

}),

],

resolve: {

// 配置路徑別名

alias: {

'@': path.resolve(__dirname, './src'),

},

},

css:{

postcss:{

plugins:[

postCssPxToRem({

rootValue:14,

propList:['*'],

})

]

}

},

server:{

host:'0.0.0.0'

}

})

在index.html添加：

...

...

配置好后就可以直接在css文件中用px單位

柚子快報(bào)激活碼778899分享：前端 html頁面縮放自適應(yīng)

http://yzkb.51969.com/

推薦文章