html px转换,pc端px转换为rem针对屏幕分辨率进行页面适配

常用的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针对屏幕分辨率进行页面适配相关推荐

html分辨率的适配方法,pc端px转换为rem针对屏幕分辨率进行页面适配
常用的pc端网站适配方案是什么?用的最多的大概就是父元素按照设计图的宽度进行固定宽度,margin:0 auto居中,两边留白.但是有的设计图不适合这样两边留白的适配方案. 最近接手了一个pc端的项目 ...
vue怎么给pc端浏览器设置一个最小屏幕_vue项目实现移动端适配的案例
前言:使用vue开发移动端页面时,往往需要实现页面根据不同设备屏幕进行尺寸的适配,实现将px自动换算成rem单位,其实只需要安装下面的两个插件即可快速实现移动端适配问题. 1 准备工作: a. 安装 ...
vue怎么给pc端浏览器设置一个最小屏幕_图文讲解uni-app的PC宽屏适配方案
天下苦平台碎片化已久. 在移动互联网以前,开发者只需幸福的面对web.进入移动互联网时代,iOS.Android.H5以及各种小程序快应用层出不穷,开发者再也幸福不起来. 学习n个技术开发n个版本 ...
【护眼阅读】PC端通过主流常用浏览器打开本地WEB页面阅读本地TXT小说
自用-通过WEB页面阅读本地小说,生成章节导航,设置字色和背景色达到护眼目的,HTML+CSS+JS 章节导航需求分析 HTML代码 CSS代码 JS代码总结章节导航从分析需求入手,查找资料, ...
vue怎么给pc端浏览器设置一个最小屏幕_创新PC应用、打通云端体验，360小程序引发SaaS软件变革...
进入2019年,我国云计算产业发展正在从"单点突破"迈入"整体效能提升"的新阶段,这是中国信通院<云计算发展白皮书(2019)>的重要判断. 云计算 ...
JavaScript判断页面当前浏览设备为移动端还是PC端，实现自动加载对应端页面
我们想要的效果是pc文件和mobile文件统一入口,适配不同的设备. 先看看项目的目录: 在index.html里面配置js控制选择那一个文件夹下的文件就可以了. 我们要利用:Navigat ...
js页面自适应屏幕大小_Web页面适配移动端方案研究
源宝导读:由于我们ERP目前大都是在在PC上面运行,大家现在关注移动端比较少,谈到移动端适配时,可能都有些生疏也可能比较好奇.以前做过一些移动端的little项目,那么借助这次分享的机会,和大家一起讨 ...
PC端网站转换为webApp工具
百度开发云site App:http://siteapp.baidu.com/ 转载于:https://www.cnblogs.com/Ann-wxp/p/4043493.html
使PC端网页宽度自适应手机屏幕大小
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scal ...

html px转换,pc端px转换为rem针对屏幕分辨率进行页面适配

html px转换,pc端px转换为rem针对屏幕分辨率进行页面适配相关推荐

最新文章

热门文章