自适应
wow Larissa
这个作者很懒,什么都没留下…
展开
-
vue cli3适配所有端方案
vue cli3适配所有端方案应用场景页面需要在pc端和移动端同时兼容,以前我的方案都是使用媒体查询来判断当前设备大小,然后写两套或者三套css代码来兼容他们,能达到目的,并且效果不错,但是感觉还是稍微麻烦了一丢丢。后面了解了一下flexable.js脚本,稍作修改,基本可以满足我的需求。postcss-px2remyarn add postcss-px2rempostcss-px2rem插件可以将px转为rem,需要在vue.config.js(项目没有的话就手动创建一个)中配置插件// c原创 2020-09-15 15:27:49 · 474 阅读 · 0 评论 -
总结一下vue移动端适配方案
方案一:amfe-flexible+px2rem-loaderamfe-flexible:根据设备宽度,修改根元素html的大小,以适配不同终端px2rem-loader:将css中的px转为rem单位,用了它就不用自己计算rem值了注意:amfe-flexible是lib-flexible的优化,主要区别是amfe-flexible不会改变视口大小安装 + 配置1. 安装amfe-flexible和px2rem-loadernpm install -s amfe-flexiblenpm i转载 2020-09-15 15:01:37 · 1639 阅读 · 0 评论 -
如何在vue中使用flexible
1. 安装lib-flexiblenpm i lib-flexible --save2. 在项目入口文件main.js里引入lib-flexibleimport 'lib-flexible/flexible.js'3.在项目根目录的index.html 头部删除自动生成的meta标签, lib-flexible会根据屏幕自动生成相对于的meta标签// 删除<meta name="viewport" content="width=device-width, initial-scale=原创 2020-08-28 16:07:16 · 9908 阅读 · 0 评论 -
如何实现自适应
**如何实现自适应**利用视口单位实现适配布局响应式布局的实现依靠媒体查询( Media Queries )来实现,选取主流设备宽度尺寸作为断点针对性写额外的样式进行适配,但这样做会比较麻烦,只能在选取的几个主流设备尺寸下呈现完美适配。即使是通过 rem 单位来实现适配,也是需要内嵌一段脚本去动态计算根元素大小。近年来,随着移动端对视口单位的支持越来越成熟、广泛,使得我们可以尝试一种新的办法去真正地适配所有设备尺寸。认识视口单位( Viewport units )首先,我们要了解什么是视口。转载 2020-08-28 15:05:27 · 3457 阅读 · 3 评论