现有工程项目上加响应式

背景：最近在现有项目上开发导航页面，按照设计稿1920*1080实现的效果偏大很多，所以想加响应式
加完后发现其他很多页面有问题，因为这个项目已开发很久，一开始没加响应式，所以需要调整的内容很多
为了兼容旧的已开发的页面，考虑使用postcss-px-to-viewport的exclude进行过滤文件，实现以.vp.vue、.vp.less的文件才进行转换px单位，后续新开发的页面需要响应式文件名以.vp.vue、.vp.less结尾
配置如下

// postcss.config.js
module.exports = {plugins: {"postcss-px-to-viewport": {unitToConvert: 'px',viewportWidth: 1920,   // 视窗的宽度，对应的是我们设计稿的宽度，一般是750viewportHeight: 1080, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置unitPrecision: 3,     // 指定`px`转换为视窗单位值的小数位数viewportUnit: "vw",   // 指定需要转换成的视窗单位，建议使用vwminPixelValue: 1,     // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值mediaQuery: false,     // 允许在媒体查询中转换`px`landscapeUnit: 'vh', // 横屏时使用的单位landscapeWidth: 1334, // 横屏时使用的视口宽度exclude: [/^.*(?<!^vp|\.vp)\.vue$/, /^.*(?<!^vp|\.vp)\.less$/, /src\/assets\/less/, /node_modules/]}}
}

现有工程项目上加响应式相关推荐

JVM上的响应式流 — Reactor简介
响应式编程作为响应式编程方向上的第一步,微软在.NET生态系统中创建了Rx库(Reactive Extensions).RxJava是在JVM上对它的实现. 响应式编程是一个异步编程范式,通常出现在 ...
JVM平台上的响应式流（Reactive Streams）规范
Reactive Streams 响应式流是一个倡议,用来为具有非阻塞后压的异步流处理提供一个标准.大家努力的目标集中在运行时环境(JVM和JavaScript)和网络协议上. 注:响应式流其实就是一 ...
扫描二维码在移动设备上浏览响应式页面
最近想尝试对一个Ghost博客主题进行移植,因为对一个后端程序员来说,进行前端方面的工作实在是个不小的挑战,而我对CSS更是有种与生俱来的恐惧感,所以我是非常喜欢Bootstrap和Materil ...
响应式Web设计——最佳指南
2012年被称为智能手机年.根据最近一份调查显示,美国的智能手机覆盖率已达50%.现在确实是提升移动终端用户体验的大好时机.如果你正运营一个网站,那就必须有一个响应式的Web设计,以便可以从移动终端上 ...
20个响应式网页设计中的“神话”误区
关于响应式网页的重要性我们已经证实了很长时间了,现在是该把焦点放到如何做出好的响应式网页设计的时候了.一起来看看吧! 虽然很多人都在谈论响应式网页,但并不是每个人都知道他们在说什么.很多时候你看到网上 ...
响应式网页设计的20个误区
响应式网页已经成为当下比较主流的设计形式,似乎每一个人都在谈论,但实际上并不是每一个人都真的懂得.以下总结了在进行响应式网页设计时的20个误区,你可以看看自身是否存在入其中所说的问题. 1.响应式网页 ...
【Spring 5】响应式Web框架前瞻
1 响应式宣言和敏捷宣言一样,说起响应式编程,必先提到响应式宣言. We want systems that are Responsive, Resilient, Elastic and Messa ...
Java的HTTP服务端响应式编程
传统的Servlet模型走到了尽头传统的Java服务器编程遵循的是J2EE的Servlet规范,是一种基于线程的模型:每一次http请求都由一个线程来处理. 线程模型的缺陷在于,每一条线程都要自行处 ...
《实用技巧》——让你的网站变成响应式的3个简单步骤
如今,一个网站只在桌面屏幕上好看是远远不够的,同时也要在平板电脑和智能手机中能够良好呈现.响应式的网站是指它能够适应客户端的屏幕尺寸,自动响应客户端尺寸变化.在这篇文章中,我将向您展示如何通过3个简单 ...

现有工程项目上加响应式

现有工程项目上加响应式

现有工程项目上加响应式相关推荐

最新文章

热门文章