前端页面最佳适配方案px转rem(野草蛮生)

1. 安装lib-flexible

npm i lib-flexible --save

2. 在main.js里引入lib-flexible

import 'lib-flexible/flexible.js'

3.然后在node_modules文件夹下找到lib-flexible文件夹下的flexible.js

function refreshRem(){var width = docEl.getBoundingClientRect().width;if (width / dpr > 540) {width = 540 * dpr;}var rem = width / 10;docEl.style.fontSize = rem + 'px';flexible.rem = win.rem = rem;
}
把上面的函数注释掉换成下面这个函数
function refreshRem() {var rem = docEl.clientWidth / 24;docEl.style.fontSize = rem + 'px'
}

4.在APP.vue中加入如下代码(这是适配的屏幕尺寸,根据项目需求手动更改)

@media screen and (max-width: 1024px) {html {font-size: 42.66px!important;注释: 1024/24可得}
}
@media screen and (min-width: 2560px) {html {font-size: 106.66px!important;注释: 2560/24可得}
}

5.安装插件把页面写的px转换成rem

6.最后找到设置中的扩展设置把font-size改为80即可

前端页面最佳适配方案px转rem(野草蛮生)相关推荐

html px转换,pc端px转换为rem针对屏幕分辨率进行页面适配
常用的pc端网站适配方案是什么?用的最多的大概就是父元素按照设计图的宽度进行固定宽度,margin:0 auto居中,两边留白.但是有的设计图不适合这样两边留白的适配方案. 最近接手了一个pc端的项目 ...
前端页面适配的rem换算
为什么要使用rem 之前有些适配做法,是通过js动态计算viewport的缩放值(initial-scale). 例如以屏幕320像素为基准,设置1,那屏幕375像素就是375/320=1.18以此类 ...
html分辨率的适配方法,pc端px转换为rem针对屏幕分辨率进行页面适配
常用的pc端网站适配方案是什么?用的最多的大概就是父元素按照设计图的宽度进行固定宽度,margin:0 auto居中,两边留白.但是有的设计图不适合这样两边留白的适配方案. 最近接手了一个pc端的项目 ...
html页面如何按需导入vant,vue脚手架中使用Vant，实现自动按需引入组件，并将px转换为rem...
偶然间看到一款不错的移动端vue组件库Vant,照着官方文档敲了一下,感觉还是不错的.想着以后的项目中可能会运用到,特此记录下,方便之后使用. 现在很多的组件库为了减小代码包体积,都支持按需加载了.V ...
【前端页面缓存技术方案】
前端页面缓存技术方案关于页面缓存数据的纯前端技术方案背景项目存在的现有方案思考
vue工程px转rem，postcss-px2rem插件的使用，移动端适配方案
vue工程实现px转rem 使用px单位在不同宽高比设备上显示样式比例有差异,rem是相对于根元素,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高.可以使用rem实现自适应. ...
前端页面生成pdf方案
前端页面生成pdf方案使用jsPDF的html方法生成直接将html节点传入jsPDF生成pdf,效果一般 const pdf = new jsPDF('p', 'pt', 'a4'); cons ...
移动端页面单位的选择(px em rem)
移动端页面单位的选择(px em rem) 绝对单位: px 相对单位: rem em em具有继承性继承自直接父类所以说在移动端很少用浏览器默认的字体大小 16px 那么 1em= ...
html移动端怎么做城市选择,移动端页面单位的选择（px, em, rem, vw）
px, em, rem的区别: px:绝对字体大小 em:基于一个基数来计算出相对字体大小.(移动端用的少) rem:基于根节点(html)的字体大小来计算. vw:可视区宽度单位.1vw等于可视区宽 ...

前端页面最佳适配方案px转rem(野草蛮生)

前端页面最佳适配方案px转rem(野草蛮生)相关推荐

最新文章

热门文章