lib-flexible + px2rem Loader

lib-flexible 阿里伸缩布局方案

px2rem-loader:px转rem;

依赖

首先需要安装 vue-cli 脚手架,这里我安装的是 cli3。

项目初始化完成后,在项目目录中安装 lib-flexible 和 px2rem-loader。

  npm install lib-flexible --save-dev
npm i postcss-px2rem --save

接着在项目入口文件 main.js 中引入 lib-flexible

import 'lib-flexible/flexible'

配置 postcss-px2rem

在实际开发中得到的设计稿都是 px 单位的,如果手动将 px 转为 rem ,显然是一件较为麻烦的事情,因此可以通过一些工具来帮助我们实现。

vue-cli3 因为减少了对于 webpack 的配置,因此有些文件就被隐藏起来了。可以在文件的根目录下新建一个 vue.config.js 文件,在这个文件里就可以自己增加或修改一些 webpack 配置。

vue-cli2 在config下的index.js里配置。

首先添加一个新的 Loader,vue-cli 的文档中也写的非常清楚了,需要在文件中添加以下代码

module.exports = {
chainWebpack: config => {
config.module
.rule('css')
.test(/\.css$/)
.oneOf('vue')
.resourceQuery(/\?vue/)
.use('px2rem')
.loader('px2rem-loader')
.options({ remUnit: 192 })
.end()
}
}

此时重启服务器就生效以上配置了。但还是存在一些问题,虽然可以转换为 rem 了,但是计算出来的比例确实 1rem = 54px,这是因为 flexible.js 文件会默认写死了一个比例,我们需要作出一些修改。



flexible.js文件中,找到refreshRem方法,替换掉;

function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
// width = 540 * dpr; 就是这里的问题,需要将 540 修改为 width,不将宽度写死就ok了。
width = width * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}

这时候重新跑以下项目;就会发现1rem=192px了;

以下代码意思是 设计稿是1920宽度的;量出来100px 传入conversinon函数中,处理后 就是换算后rem的值;这样就可以实现自适应pc端页面了;

必要时可以考虑加入流式布局,弹性盒,媒体查询结合使用;

<style scoped lang="scss">

@function conversion($num) {
//换算rem适配pc端
@return $num/192;
} .boxTest{
width:conversion(100)+rem;
height:conversion(100)+rem;
border: 1px solid #000;
}

原文链接:https://blog.csdn.net/zhangyubababa/article/details/109624275

vue实现PC端分辨率适配的更多相关文章

  1. vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式

    进入正题 1. PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template> <div> &l ...

  2. 基于vue-cli的vue项目移动端样式适配,lib-flexible和postcss-px2rem

    安装 flexible和 postcss-px2rem(命令行安装) npm install lib-flexible --save npm install postcss-px2rem --save ...

  3. 基于vue-cli3的vue项目移动端样式适配,lib-flexible和postcss-px2rem

    1,安装 flexible和 postcss-px2rem(命令行安装) npm install lib-flexible --save npm install postcss-px2rem --sa ...

  4. vue实现pc端上拉加载功能,不兼容移动端

    所用插件:Mock.js 这个只用到它简单的功能,拦截ajax请求. vue和axios,vue基础知识请看文档. axios类似于jquery的ajax方法. 以下是是该功能所有代码,其中mock的 ...

  5. vue实现pc端无限加载功能

    主要思路通过自定义指令,在视图初始化完成后,绑定scroll事件.当scrollTop + clientHeight >= scrollHeight时(此时滚定条到了底部)触发loadMore事 ...

  6. 基于react/vue的移动端终极适配方案vw单位(更新css-modules配置)

    传送门:  https://segmentfault.com/a/1190000014185590

  7. 【vue】vue +element 搭建项目,要求既支持pc端又支持移动端

    使用场景:有适配pc端改为适配pc端和移动端,使用2套css 代码实现App.vue created: function () { if(document.documentElement.client ...

  8. PC端、移动端的页面适配及兼容处理

    转自 一.关于移动端兼容性 目前针对跨终端的方案,主要分为两大阵营:一套资源Vs两套资源. 第一种是通过响应式或页面终端判断去实现一套资源适配所有终端: 第二种是通过终端判断分别调取两套资源以适配所有 ...

  9. 了解css中px、em、rem的区别并使用Flexible实现vue移动端的适配

    本人java菜鸟一名,若有错误,还请见谅. 1.px和em和rem的定义和区别 px:px像素,是相对单位,相对于屏幕的分辨率而言,也就是说,当屏幕的分辨率不同那么px相同,实际看到的大小也会不同. ...

随机推荐

  1. 华为HMS Core图形引擎服务携手三七游戏打造移动端实时DDGI技术

    在2021年HDC大会的主题演讲中提到,华为HMS Core图形引擎服务(Scene Kit)正协同三七游戏一起打造实时DDGI(动态漫反射全局光照:Dynamic Diffuse Global Il ...

  2. threejs 贴图动画总结

    引言 在三维可视化中,会涉及到很多动画,其中贴图动画是其中很重要的一种,本文介绍几种贴图动画的思路,供大家一起探讨. 流动动画 流动动画通过设置贴图的repeat属性,并不断改变贴图对象的offset ...

  3. [BUUCTF]PWN——ciscn_2019_n_3

    ciscn_2019_n_3 附件 步骤 例行检查,32位,开启了nx和canary保护 本地试运行一下,经典的堆题的菜单 3.32位ida载入 new(),申请了两个chunk,第一个chunk(1 ...

  4. 如何在 GitHub 上高效阅读源码?

    原文链接: 如何在 GitHub 上高效阅读源码? 之前听说过一个故事,一个领导为了提高团队战斗力,把团队成员集中起来,搞封闭开发,重点还是在没有网的条件下. 结果就是一个月过去了,产出基本为零. 我 ...

  5. Nacos——注册中心

    目录 1.什么是nacos 2.使用--依赖+配置文件 3.Nacos服务分级存储模型 4.服务跨集群调用问题 5.服务集群属性--配置服务集群 6. Nacos-NacosRule负载均衡 7.根据 ...

  6. echarts map 地图在react项目中的使用

    需求 展示海南省地图,点击市高亮展示,并在右侧展示对应市的相关数据. 准备工作 Echarts 海南地图json 效果图 代码 index.tsx import React, { useRef, us ...

  7. 页面图片懒加载、延迟加载(lazyload)

    文档:http://www.h-ui.net/lib/jQuery.lazyload.js.shtml github地址:https://github.com/jieyou/lazyload Lazy ...

  8. 【LeetCode】1465. 切割后面积最大的蛋糕 Maximum Area of a Piece of Cake After Horizontal and Vertical Cuts

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 找最大间隔之积 日期 题目地址:https://lee ...

  9. 【LeetCode】969. Pancake Sorting 解题报告(Python & C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 模拟法 日期 题目地址:https://leetco ...

  10. 【LeetCode】62. Unique Paths 解题报告(Python & C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址:https://leetcode.com/problems/unique-pa ...