html分辨率的适配方法,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分辨率的适配方法,pc端px转换为rem针对屏幕分辨率进行页面适配相关推荐
- html px转换,pc端px转换为rem针对屏幕分辨率进行页面适配
常用的pc端网站适配方案是什么?用的最多的大概就是父元素按照设计图的宽度进行固定宽度,margin:0 auto居中,两边留白.但是有的设计图不适合这样两边留白的适配方案. 最近接手了一个pc端的项目 ...
- pc端和移动端px和rem的转换
关于pc端和移动端px和rem的转换 直接复制下方代码 (function (doc, win) {var docEl = doc.documentElement,resizeEvt = 'orien ...
- 移动端px和rem的换算
今天又遇到了移动端rem的计算,感觉自己弄了很多遍,还是迷迷糊糊,今天参考了很多网站上的文章,重新整理一遍: 看根元素html里面设置的font-size是多少(50)px,即认为1rem为多少(50 ...
- html页面如何按需导入vant,vue脚手架中使用Vant,实现自动按需引入组件,并将px转换为rem...
偶然间看到一款不错的移动端vue组件库Vant,照着官方文档敲了一下,感觉还是不错的.想着以后的项目中可能会运用到,特此记录下,方便之后使用. 现在很多的组件库为了减小代码包体积,都支持按需加载了.V ...
- vue怎么给pc端浏览器设置一个最小屏幕_图文讲解uni-app的PC宽屏适配方案
天下苦平台碎片化已久. 在移动互联网以前,开发者只需幸福的面对web.进入移动互联网时代,iOS.Android.H5以及各种小程序快应用层出不穷,开发者再也幸福不起来. 学习n个技术 开发n个版本 ...
- 基于vue2的移动端适配与pc端各一套样式
公司需求基于vue2的一套代码能适应pc端与移动端,检测到为pc端就显示pc端样式,检测为移动端就做适配 移动端rem适配,utils辅助文件夹里创建一个rem.js ps:此处是750设计稿,如需修 ...
- vue怎么给pc端浏览器设置一个最小屏幕_vue项目实现移动端适配的案例
前言:使用vue开发移动端页面时,往往需要实现页面根据不同设备屏幕进行尺寸的适配,实现将px自动换算成rem单位,其实只需要安装下面的两个插件即可快速实现移动端适配问题. 1 准备工作: a. 安装 ...
- js页面自适应屏幕大小_Web页面适配移动端方案研究
源宝导读:由于我们ERP目前大都是在在PC上面运行,大家现在关注移动端比较少,谈到移动端适配时,可能都有些生疏也可能比较好奇.以前做过一些移动端的little项目,那么借助这次分享的机会,和大家一起讨 ...
- JavaScript判断页面当前浏览设备为移动端还是PC端,实现自动加载对应端页面
我们想要的效果是pc文件和mobile文件统一入口,适配不同的设备. 先看看项目的目录: 在index.html里面配置js控制选择那一个文件夹下的文件就可以了. 我们要利用:Navigat ...
最新文章
- 是你写程序时的样子吗? | 每日趣闻
- 截取年月日在hana中怎么写_写完作业就不学了怎么办?焦虑中的家长不妨先低头看看...
- 正则表达式验证六位数以上数字,符号,字母任意两种混合的密码验证策略
- mysql安装完只有黑框_MySQLMySQL的安装及安装中存在的问题
- Java作业-多线程
- PNG in IE - 1 - pngfix.js
- (转)招商银行这一招,引起了各大银行的注意
- Tomcat Server
- 厉害了!20年【科比NBA】生涯|数据分析
- 谷歌浏览器安装json-handle插件
- Nacos官方Docker版安装
- PHP手册 2009国庆版
- Cadence封装尺寸总结
- ティラミス / 龙枪
- 【English】元音辅音
- python设置电脑ip代理_设置代理IP在Python中使用
- 贪心算法or背包问题
- QT4.6.3在TQ2440上的移植
- [转]Python中找出dataframe中的重复的行 DataFrame.duplicated()方法
- 力扣每日一题2022-05-04中等题:找出游戏的获胜者
热门文章
- 微信小程序云开发---vant组件 van-uploader 实现视频文件上传到云存储,发动态功能
- Dynpro PBO和PAI
- 我的叔叔精通计算机英语翻译,第3单元This is my father._人教版三年级英语下册(精通)课文翻译...
- 有的歌声音大有的歌声音小_为什么有些歌曲特别大声,有些特别小声,有什么...
- Elastic认证考试:30天必过速通学习指南
- Hadoop内部的限流机制
- android studio手机模拟器开启刘海屏
- 【强烈推荐】音频文件免费批量一键格式转换好工具——酷狗音乐
- 家用投影仪哪个品牌好?最便宜的投影仪是什么牌子的?
- 联想lenovo天逸510s mini台式机(10代)安装Win7系统