柚子快報激活碼778899分享：前端 html頁面縮放自適應
柚子快報激活碼778899分享：前端 html頁面縮放自適應
html頁面縮放自適應
一、為什么頁面要進行縮放自適應
在我們一般web端進行頁面拼接完成后，在web端的顯示正常（畢竟我們是按照web端進行頁面拼接完成的），那么要是用其他設備打開呢，比如手機或者平板，這時候顯示的比例和尺寸跟我們看到的就大相徑庭了。
由于手機屏幕尺寸不一樣，分辨率不一樣，或者你需要考慮橫豎屏的問題，這時候你也就不得不解決在不同手機上，不同情況下的展示效果了。
另外一點，UI一般輸出的視覺稿只有一份，比如淘寶就會輸出：750px 寬度的（高度是動態(tài)的一般不考慮）（詳情），這時候開發(fā)人員就不得不針對這一份設計稿，讓其在不同屏幕寬度下顯示 一致。
這樣做的好處在于：
降低了開發(fā)成本**：**原本要涉及iOS、Android、PC（PC和Mac用同一套Qt實現(xiàn)）、H5這4個端的開發(fā)人員，現(xiàn)在采用內嵌頁的方式，可以做到完全不涉及移動端和桌面端，或者僅是入口放置這類比較簡單的工作。降低了維護成本：如果有優(yōu)化調整，可以只改H5頁面，不用各個端都動手。
舉個栗子：
在 1080px 的視覺稿中，左上角有個logo，寬度是 180px（高度問題同理可得）。
那么logo在不同的手機屏幕上等比例顯示應該多大尺寸呢？
其實按照比例換算，我們大致可以得到如下的結果：
在CSS像素是 375px 的手機上，應該顯示多大呢？結果是：375px * 180 / 1080 = 62.5px 在CSS像素是 360px 的手機上，應該顯示多大呢？結果是：360px * 180 / 1080 = 60px 在CSS像素是 320px 的手機上，應該顯示多大呢？結果是：320px * 180 / 1080 = 53.3333px
二、自適應需要解決什么問題
主要有如下幾個問題：
元素自適應問題 文字rem問題 高清圖問題 1像素問題 橫豎屏顯示問題 手機字體縮放問題
這些問題具體分析可以看看這篇網(wǎng)上文章（未測試）：移動端H5解惑-頁面適配_h5移動端適配原理-CSDN博客
三、屏幕適配方案
到目前為止，開始實操一種方式進行簡單的屏幕適配操作，以達到想要的界面效果！
適用框架：Vue2/Vue3 適用設備：pc端/移動端 適配策略：動態(tài)rem+動態(tài)scale 方案效果：可讓頁面在不同屏幕下、放大縮小時保持頁面不變形
屏幕拉伸：
項目配置：
Vue項目中使用postcss-pxtorem插件自動化px轉rem的過程。
要在 Vue 項目中使用 postcss-pxtorem，你需要按照以下步驟操作：
安裝 postcss-pxtorem：
npm install postcss-pxtorem --save
新建 rem.js 文件，內容為：
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中導入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單位
柚子快報激活碼778899分享：前端 html頁面縮放自適應
推薦文章
本文內容根據(jù)網(wǎng)絡資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。
轉載請注明，如有侵權，聯(lián)系刪除。
Kakaku比價出海坊
