第一步,引入vue文件中js代码 <script> // 单独设置jsrem适配文件 // 根标签文字大小 当前设备宽度 / 基数 function setFontSize () {// 确定基数const i 80// 获取设备const htmlClient document.documentElement// 设备宽度let htmlWidth htmlClient.offsetWidth…

pc端自适应 使用amfe-flexible 和 postcss-px2rem依赖包 步骤: 1.安装依赖包 npm install amfe-flexible -S npm install postcss-px2rem -S2.在main.js中引入 import lib-flexible3.在vue.config.js中配置 remUnit是根据设计稿自定义的&#xff0c;用设计稿尺寸/10&#xff…

手机的屏幕比较小&#xff0c;宽度通常在600像素以下&#xff1b;PC的屏幕宽度&#xff0c;一般都在1000像素以上&#xff08;目前主流宽度是1366768&#xff09;&#xff0c;有的还达到了2000像素。同样的内容&#xff0c;要在大小迥异的屏幕上&#xff0c;都呈现出满意的效果…

使用的方案 lib-flexible-computer px2remLoader postcss-px2rem lib-flexible&#xff1a;阿里可伸缩布局方案 px2rem-loader&#xff1a;px 转 rem postcss-px2rem&#xff1a; 将代码中px自动转化成对应的rem的一个插件下面这个插件会代替lib-flexible 更好一些 适用于pc…

因为在做超市POS收银系统的时候&#xff0c;遇到需要适配不同的PC端的分辨率&#xff0c;原来PC还能做自适应的呀&#xff0c;感觉发现了新大路&#xff0c;于是打算做一下笔记。 当然我在做的过程中也借鉴了其他大佬的写的&#xff0c;如&#xff1a; https://blog.csdn.net…

1.npm i lib-flexible-computer -S //根节点会根据页面视口变化而变化font-size大小 安装这个的话就不需要下面flexible文件修改了 2.yarn add px2rem-loader -D&#xff1a;px 转 rem 3.yarn add postcss-px2rem-exclude -D&#xff1a; 将代码中px自动转化成对应的rem的一…

1.HTML部分 <template><div id"app" ><div class"app-view" :style"{--scale:scale}"><div><router-view /></div></div></div> </template>2.JS部分 <script>export default {n…

http://www.webkaka.com/blog/archives/how-to-modify-a-web-page-to-be-responsive.html 一天完成把PC网站改为自适应&#xff01;原来这么简单&#xff01; 作者:Kaka 时间:2015-8-27 11:26:9 浏览:5279 评论:8 网站自适应&#xff0c;很多人都认为是很高级需要很多…