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

最近接手了一個pc端的項目，雖然按照常用的柵格布局+postcss-pxtorem插件對px轉換的方法對頁面做了適配，使頁面無論在pc端打開還是在移動端打開都能自適應，但是在高清分辨率下的頁面比如5k高清，布局還是有些亂了，這是因為px轉換成rem所依賴的根目錄字號沒有調整好，于是上網百度了很多方案參考，重新調整了適配方案，但是在移動端打開的時候布局會亂掉，因為px的計算是根據pc端的寬高來計算的

1.刪掉html的

刪掉這個標簽，在移動端打開的時候，布局整體不會亂，但是子元素間距、寬高還是會和設計圖有差距

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

在vue.config.js引入依賴:

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

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

modules.exports={

css: {

loaderOptions: {

postcss: {

plugins: [

pxtorem({

rootValue: 100,

propList: ["*"]

}),

autoprefixer()

]

}

}

}

}

3.我在src/assets/js目錄下新建pc.js文件,在main.js里導入這個文件

//pc.js

//設計圖紙為1366*798

function pagePc(){

let rootValue = 100;

let pc = rootValue / 1366; // 表示1366的設計圖,使用100px的默認值

let width = window.innerWidth; // 當前窗口的寬度

let height = window.innerHeight; // 當前窗口的高度

let rem = "";

let currentHeight = (width * 798) / 1366;

if (height < currentHeight) {

// 當前屏幕高度小于應有的屏幕高度，就需要根據當前屏幕高度重新計算屏幕寬度

width = (height * 1366) / 798;

}

rem = width * pc; // 以默認比例值乘以當前窗口寬度,得到該寬度下的相應font-size值

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

}

pagePc();

window.onresize = function() {

pagePc();

};

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。