PC端 VUE 官网项目 前端开发 响应式布局(宽+高 等比例缩放)
背景
最近开发了3个门户网站,一般程序员都会有显示器,一开始我使用的是flex响应式 + 宽度百分比
去进行适配,但是开发完之后发现在显示器上看着正常,但是到了笔记本上就发现宽度是自适应了,但是高度并没有随着宽度去等比例缩小
,就显得页面很别扭,所以我就查了很多文章,一个一个去试,下面来总结一下,方便以后去开发:
方案
lib-flexible
+px2remLoader
+postcss-px2rem
lib-flexible
:阿里可伸缩布局方案px2rem-loader
:px转rem
安装依赖
npm install postcss-px2rem px2rem-loader --save
npm i lib-flexible --save
1、vue-cli2 项目
引入依赖:
main.js
引入lib-flexible
import 'lib-flexible'
px转换成rem
vue-loader的options和其他样式文件loader最终是都是由build/utils.js里的方法生成的,我们只需在cssLoader后再加上一个px2remLoader即可,px2rem-loader的remUnit选项意思是 1rem=多少像素,结合lib-flexible的方案,我们将px2remLoader的options.remUnit设置成设计稿宽度的1/10,这里假设设计稿宽为1920px
- build/utils.js中添加px2remLoader
//utils.js
const cssLoader = {loader: 'css-loader',options: {sourceMap: options.sourceMap}}// 增加代码,px转rem配置(需要将px2remloader添加进loaders数组中)const px2remLoader = {loader: 'px2rem-loader',options: {remUnit: 192, //根据视觉稿,rem为px的十分之一,1920px 192 rem// remPrecision: 8//换算的rem保留几位小数点}}
- 放进loaders数组中
// //utils.js
function generateLoaders (loader, loaderOptions) {const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]if (loader) {loaders.push({loader: loader + '-loader',options: Object.assign({}, loaderOptions, {sourceMap: options.sourceMap})})}//...}
- 修改flexible.js
function refreshRem(){var width = docEl.getBoundingClientRect().width;if (width / dpr > 540) {width = width * dpr;}//缩放比例,可按实际情况修改var rem = width / 8;docEl.style.fontSize = rem + 'px';flexible.rem = win.rem = rem;
}
2、vue-cli3 项目
- 在根目录src中新建util目录下新建rem.js等比适配文件
找到node_modules
里的lib-flexible
包,拷贝一份放在utils
里面取名为flexible.js
,修改lib-flexible的源码,(更改refreshRem函数)修改为下面的代码就可以了,当然if判断是根据自己需求的调整。
目的:因为lib-flexible的源码是针对移动端的设计方案,我们要实现PC的自适应所以屏幕尺寸也要更换。
// 更改refreshRem函数
function refreshRem(){var width = docEl.getBoundingClientRect().width;if (width / dpr > 540) {width = width * dpr;}//缩放比例,可按实际情况修改var rem = width / 8;docEl.style.fontSize = rem + 'px';flexible.rem = win.rem = rem;
}
- 在 main.js中引入我们刚修改过的flexible.js文件(因为我们更改了源码 ,所有我们需要引入我们改过的文件)
import "@/utils/flexible";
- 在vue.config.js中配置插件
// // 引入等比适配插件
const px2rem = require("postcss-px2rem");
// 配置基本大小
const postcss = px2rem({//配置rem基准值 基准大小 baseSize,需要和rem.js中相同remUnit: 192, // 设计稿尺寸1920/10
});
module.exports = {chainWebpack: (config) => {config.module.rule("css").test(/\.css$/).oneOf("vue").use("px2rem-loader").loader("px2rem-loader").options({remUnit: 192,remPrecision: 8,}).end();},css: {loaderOptions: {postcss: {plugins: [postcss]},},},
}
3、备用方案
由于我开发的时候第一次没有发现cli2 和 cli3 的区别 ,是修改flexible文件的时候才发现的(自己项目是cli3),所以会有两个步骤结合的情况,后来因为项目着急也没有去删除一些没用的去验证哪个需要哪个不需要,所以后来我就又找了找,看有没有准确的,发现很多文章都是乱的,凭自己的判断在这里提供一个看上去可行的(cli3):
- 安装 postcss-px2rem及px2rem-loader
npm install postcss-px2rem px2rem-loader --save
- 在根目录src中新建utils目录下新建rem.js等比适配文件
// rem等比适配配置文件
// 基准大小
const baseSize = 16
// 设置 rem 函数
function setRem () {// 当前页面屏幕分辨率相对于 1920宽的缩放比例,可根据自己需要修改const scale = document.documentElement.clientWidth / 1920// 设置页面根节点字体大小(“Math.min(scale, 2)” 指最高放大比例为2,可根据实际业务需求调整)document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {setRem()
}
- 在main.js中引入适配文件
import './utils/rem.js'
- 到vue.config.js中配置插件
// 引入等比适配插件
const px2rem = require('postcss-px2rem')// 配置基本大小
const postcss = px2rem({// 基准大小 baseSize,需要和rem.js中相同remUnit: 16
})// 使用等比适配插件
module.exports = {lintOnSave: true,css: {loaderOptions: {postcss: {plugins: [postcss]}}}
}
注意事项
1、配置这些之后需要重新编译项目
2、如果个别地方不想转化px,可以简单的使用大写的PX
或 Px
,或者在其后添加/*no*/
保证不被转换
3、这种响应式配置法对于行内样式是无用的
总结:
各位大佬有好方法或者想指正的可以在评论去告诉我们,大佬们辛苦了(抱大腿)!!!
PC端 VUE 官网项目 前端开发 响应式布局(宽+高 等比例缩放)相关推荐
- 前端开发响应式布局和移动端布局有哪些特点和区别?
同学们在进行前端开发的时候经常会运用到响应式布局,在进行移动端页面开发的时候还会使用到移动端布局的知识,那么你知道他们都有哪些优缺点和相同之处吗?下面小千就来给大家列举一下. 响应式布局 响应式布局是 ...
- 移动端WEB开发——响应式布局
移动端WEB开发之响应式布局 1.0 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: 设备划分 尺寸区间 超 ...
- Vue官网所说的低侵入式含义
人生天地之间,若白驹之过隙,忽然而已 提出问题 在观看vue官网当中,在深入响应式系统出现一段话: Vue 最标志性的功能就是其低侵入性的响应式系统.组件状态都是由响应式的 JavaScript 对象 ...
- 2.4移动Web网页开发——响应式布局(含媒体查询和bootstrap)
响应式布局 适合用于企业网站和非常非常小的布局,不适合电商网站(PC.移动分开做) 媒体查询 视口宽度变化@media(max-width: 768px){} @media(max-width: 76 ...
- java企业官网源码 自适应响应式 freemarker 静态引擎 SSM 框架
前台:支持(5+3[时尚单页风格])八套模版,可以在后台切换 业务模块(首页管理) 1. 网站信息:维护网站基本信息,比如标题.描述.关键词.联系方式.地址等 2. 业务说明:网站首页文字业务 ...
- HTML学生个人网站作业设计:(宠物官网8页)——bootstarp响应式含有轮播图,响应式页面
⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 公司官网网站 | 企业官网 | 酒店官网 | 等网站的设计与制 ...
- 从零开始学习前端开发 — 7、CSS宽高自适应
一.宽度自适应 语法:width:100%; 注: a)块状元素的默认宽度为100% b) 当给元素设置宽度为100%时,继承父元素的宽度 c) 通常使用宽度自适应实现通栏效果 二.高度自适应 语法: ...
- vue项目中页面响应式布局设计方案
针对全屏页面开发,兼容 19201080,以及 1366768 js设置原型属性$screen: 获取当前是什么屏幕 isS: 1366定义的最小屏幕 isM: 1366-1600的中间屏幕 isB: ...
- [前端积累]--响应式布局(二)
media query 的使用 先看一个简单的例子: <link rel="stylesheet" media="screen and (max-width: 60 ...
- 移动端WEB开发之响应式布局(响应式开发原理、bootstrap、阿里百秀案例)
移动端WEB开发之响应式布局 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: <!DOCTYPE html> & ...
最新文章
- 睡眠不足,记忆力还有救吗?Nature:饿着
- HMM 模型输入数据处理的优雅做法 来自实际项目
- 新京报快评:浙大设“新生高额奖学金”,为何就成了“抢生源”?
- STMF4x 固件库V1.25.0
- leetcode253. 会议室 II
- 论文浅尝 | AMUSE: 基于 RDF 数据的多语言问答语义解析方法
- cmake find_package路径详解
- mysql mgr监控_说MGR - MGR的监控
- Ansible安装MySQL5.7.24
- Enterprise Library 4.1学习笔记3----安全应用程序块
- bug1-tensorflow中自定义模型的bug-input_signature
- android q beta3更新功能,Android Q Beta 3更新内容:拥抱5G和可折叠设备
- Excel创建堆积柱形混合折线图
- cesium 实现地形挖洞的拖动效果
- 5G工业路由器的工厂自动化应用
- svg实现水滴相融效果
- 直播实录|百度大脑EasyDL是如何帮助NLP文本提升标注效率的?又如何进行复杂文本分类的?
- amoled下载_AMOLED的完整形式是什么?
- 吃肉的时候一桌人,洗碗的时候一个人,这个世界,总有一些没良心的人,吃肉的时候夸肉香,洗碗的时候嫌碗脏;
- 易语言制作一款屏幕锁,锁屏并且透明