常用的pc端網(wǎng)站適配方案是什么？用的最多的大概就是父元素按照設(shè)計(jì)圖的寬度進(jìn)行固定寬度，margin:0 auto居中，兩邊留白。但是有的設(shè)計(jì)圖不適合這樣兩邊留白的適配方案。

最近接手了一個(gè)pc端的項(xiàng)目，雖然按照常用的柵格布局+postcss-pxtorem插件對(duì)px轉(zhuǎn)換的方法對(duì)頁面做了適配，使頁面無論在pc端打開還是在移動(dòng)端打開都能自適應(yīng)，但是在高清分辨率下的頁面比如5k高清，布局還是有些亂了，這是因?yàn)閜x轉(zhuǎn)換成rem所依賴的根目錄字號(hào)沒有調(diào)整好，于是上網(wǎng)百度了很多方案參考，重新調(diào)整了適配方案，但是在移動(dòng)端打開的時(shí)候布局會(huì)亂掉，因?yàn)閜x的計(jì)算是根據(jù)pc端的寬高來計(jì)算的

1.刪掉html的

刪掉這個(gè)標(biāo)簽，在移動(dòng)端打開的時(shí)候，布局整體不會(huì)亂，但是子元素間距、寬高還是會(huì)和設(shè)計(jì)圖有差距

2.下載依賴：npm install --save-dev postcss-pxtorem

在vue.config.js引入依賴:

const pxtorem = require("postcss-pxtorem");//px轉(zhuǎn)換為rem插件

const autoprefixer = require("autoprefixer");//瀏覽器前綴處理工具

modules.exports={

css: {

loaderOptions: {

postcss: {

plugins: [

pxtorem({

rootValue: 100,

propList: ["*"]

}),

autoprefixer()

]

}

}

}

}

3.我在src/assets/js目錄下新建pc.js文件,在main.js里導(dǎo)入這個(gè)文件

//pc.js

//設(shè)計(jì)圖紙為1366*798

function pagePc(){

let rootValue = 100;

let pc = rootValue / 1366; // 表示1366的設(shè)計(jì)圖,使用100px的默認(rèn)值

let width = window.innerWidth; // 當(dāng)前窗口的寬度

let height = window.innerHeight; // 當(dāng)前窗口的高度

let rem = "";

let currentHeight = (width * 798) / 1366;

if (height < currentHeight) {

// 當(dāng)前屏幕高度小于應(yīng)有的屏幕高度，就需要根據(jù)當(dāng)前屏幕高度重新計(jì)算屏幕寬度

width = (height * 1366) / 798;

}

rem = width * pc; // 以默認(rèn)比例值乘以當(dāng)前窗口寬度,得到該寬度下的相應(yīng)font-size值

document.documentElement.style.fontSize = rem + "px";

}

pagePc();

window.onresize = function() {

pagePc();

};

總結(jié)

以上是生活随笔為你收集整理的html px转换,pc端px转换为rem针对屏幕分辨率进行页面适配的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。