这次因为公司有一个app需要做一个推广的下载页面,虽然简单,但也值得一试那篇文章里提到的适配方法,所以本文的内容就是介绍该文中提到的淘宝的做法:《lib-flexible弹性布局方案》。...相较于淘宝的做法,淘宝的方法更能称之为一个方案,网易的做法代码质量实在不敢恭维,所以从本文的角度,推荐淘宝的lib-flexible) 1. 页面需求 ? 这是尺寸标注图(750*1334): ?...引入flexible.js 这一步其实非常简单,只要把https://github.com/amfe/lib-flexible源码里flexible.js的内容复制出来,在本地新建一个flexible.js...less编译之后,会将正确的rem值计算出来: .btn { width: 5.52rem; height: 1.06666667rem; } 到此,lib-flexible的基本实践就结束了,...虽然只是一个小页面,但是也见识到了lib-flexible的威力,毕竟一个页面如果成功应用了这个方案,更多页面也就不是问题了。 我把源码发出来,有兴趣的人可以下载参考:本页源码。
第一步 在项目中安装lib-flexible npm install lib-flexible --save 第二步 在main.js中引入lib-flexible import 'lib-flexible
前言 相信大多数移动端前端开发者都是用过 lib-flexible来作为移动端适配的解决方案。...lib-flexible是淘宝项目组开发出来的一个小插件,属于开源项目,可以在各类项目中引入并使用,为移动端的开发者带来了无穷的便利。 但是,有人提出为什么在屏幕尺寸超出一定分辨率后便不再适配?...---- 关于lib-flexible 1....移动端适配步骤 一般而言, lib-flexible并不独立出现,而是搭配 px2rem-loader一起做适配方案,目的是自动将css中的px转换成rem。以下为它在vue中的使用。...2.1 安装 lib-flexible npm install lib-flexible --save-dev 2.2 引入 lib-flexible 在 main.js中引入lib-flexible
另附github地址:https://github.com/amfe/lib-flexible,在github的readme中,作者建议大家开始使用viewport来代替flexible这个方案,其中我也看了一下抛出了文章链接...,有一些postCSS新技术的运用,但人水平有限,如果大家感兴趣,可以用作者推荐的方案代替, 二、项目中使用 1、安装 $ cnpm install lib-flexible --save ?...install 2、main.js中引入 import 'lib-flexible/flexible.js' ?
postcss-px2rem不能忽略指定文件 需要安装postcss-px2rem-exclude
vue项目移动端、pc端适配方案 lib-flexible 根据屏幕宽度,自动设置html的font-size postcss-px2rem 自动将px单位转换成rem 一、第一步先安装 flexible...和 postcss-px2rem(命令行安装) npm i lib-flexible -S npm i postcss-px2rem -S 简要介绍这两个包的用途: flexible会为页面根据屏幕自动添加标签...二、引入lib-flexible 在项目入口文件main.js 中引入lib-flexible import 'lib-flexible' 注意事项(important): 由于flexible会动态给页面...三、修改lib-flexible源码 因为lib-flexible主要用于手机自适应,当屏幕尺寸大于540px时,它设置html的font-size固定为54px,并不能根据屏幕尺寸调整html的font-size...的大小,所以这里需要修改lib-flexible源码。
移动端设计图稿一般按iphone6 的750px 设计,经过此适配之后,可直接写图纸测量的数据,包括文字大小 1.lib-flexible npm i lib-flexible --save 2.引入lib-flexible...在main.js中引入lib-flexible import 'lib-flexible/flexible' 3.设置meta标签 通过meta标签,设置设备宽度以及缩放比例 <meta name="
依赖 项目基础配置使用 vue-cli2 生成 自适应方案核心: 阿里可伸缩布局方案 lib-flexible px转rem:px2rem,它有webpack的loader px2rem 开始 先使用...vue脚手架初始化一个webpack项目 vue init webpack 项目名 项目初始化好了之后,进入项目目录中 (cd 项目名) 安装 lib-flexible 和 px2rem-loader...npm i lib-flexible -S npm i px2rem-loader -D 安装好了之后还需要在项目的入口文件 main.js 里引入 lib-flexible // main.js import...'lib-flexible' 接下来为了验证 lib-flexible 是否生效,可以将app.vue中的内容改成: ...我们只需在 cssLoader 后再加上一个 px2remLoader 即可,px2rem-loader 的 remUnit 选项意思是 1rem=多少像素,结合 lib-flexible 的方案,我们将
1.下载lib-flexible 使用的是vue-cli+webpack,通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main.js中引入...lib-flexible import 'lib-flexible/flexible' 3.设置meta标签 <meta name="viewport" content="width=device-width
配置方法 一、加两个依赖 1yarn add postcss-plugin-px2rem lib-flexible 二、config/webpack.config.js 文件下152行加入代码 1 [...false, 13 minPixelValue: 10, 14 }, 15 ], 三、入口文件src/index.tsx引入lib-flexible.../App"; 2import "lib-flexible";
vant"; Vue.use(Button); 在nuxt.config.js文件进行配置 plugins: [ '@/plugins/vant' ], 安装px2rem npm i lib-flexible...-s npm i postcss-px2rem-exclude -s 在plugins文件夹新建lib-flexible.js文件 import 'lib-flexible' 在nuxt.config.js...文件进行配置 plugins: [{ src: '@/plugins/lib-flexible', ssr: false //不设置会报错 }, '@/plugins
这段时间过的很有意义哈哈 参加工作为了快速上手项目这两个月都是996,学到了 很多好东西,接下来的日子不加班我就晚上回去把他们分享出来,摸摸哒~ ---- 移动端自适应 来自手淘的 flexible cnpm i lib-flexible...-S cnpm install px2rem-loader -S-d 在项目入口文件 main.js 里 引入 lib-flexible // main.js import ‘lib-flexible...搞定后到开发者工具查看根节点有没有添加data-dpr=”1”来判断是否引入成功 lib-flexible引入完成,下面引入方便一个插件px2rem-loader 接下来引入开发用的 px转rem插件
} Rem 适配 Vant 中的样式默认使用px作为单位,如果需要使用rem单位,推荐使用以下两个工具 postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem lib-flexible...用于设置 rem 基准值 1.下载lib-flexible npm i lib-flexible --save 2.在main.js中引入lib-flexible import 'lib-flexible
('#app') 主要按钮 安装px转rem插件 npm install postcss-px2rem-exclude lib-flexible...remPrecision: 2, exclude: /node_modules|folder_name/i } } }; main.js import 'lib-flexible
一、安装 npm install px2rem-loader lib-flexible --save 二、入口文件main.js加上 import ‘lib-flexible/flexible.js’
第一步 安装px转rem的插件 npm i lib-flexible postcss-px2rem --s 在根目录添加postcss.config.js文件 module.exports = { plugins...remUnit: 75, // 设计图为750 * height remPrecision: 2 // rem的小数点后位数 } } }; 在main.js添加 import 'lib-flexible
一、移动端适配包 1、安装移动端适配包 npm i lib-flexible -S 2、在main.js引入适配包 import Vue from ‘vue’ import App from ‘..../App.vue’ import ‘lib-flexible’ // 引入适配包 Vue.config.productionTip = false new Vue({ render: h => h(App
移动端适配,目前自己常用的两种 方案,参考以下两篇好文 方案一:使用lib-flexible包 https://www.w3cplus.com/mobile/lib-flexible-for-html5...-layout.html 使用flexible包方式,安装 lib-flexible 包和 px2rem-loader包 npm install --save-dev lib-flexible px2rem-loader...在需要的js文件中头部引入,如果是vue项目就引入到main.js中: import 'lib-flexible' webpack配置loader,注意顺序很重要,顺序不对会出错 {
}, }) 移动端 rem 适配 如果是做 PC 端的网页,无需做 rem 适配,但是做 H5 开发rem 是需要做一下的,Vant 官方也为我们提供了方案,如下图所示: yarn add lib-flexible...-S yarn add postcss-pxtorem -D 这里 lib-flexible 是网页做 html 的 font-size 适配用的,所以需要安装到 dependencies。...安装好后,我们需要在 main.js 引入 lib-flexible 接着需要为 px 单位转 rem 单位做配置: Vue CLI项目可以在根目录声明 .postcssrc.js 文件,但是目前 Vite...//main.js import { createApp } from 'vue' import 'lib-flexible/flexible' import App from '.
领取专属 10元无门槛券
手把手带您无忧上云