不难懂------适配移动端flexible
基于 vue-cli 配置手淘的 lib-flexible + rem,实现移动端自适应
安装 flexible
npm install lib-flexible --save
引入 flexible
在项目入口文件 main.js 中添加如下代码,引入 flexibleimport 'lib-flexible'
px 转 rem
使用 webpack 的 px2rem-loader, 自动将 px 转换为 rem安装 px2rem-loader
npm install px2rem-loader --save-dev
配置 px2rem-loader
在 vue-cli 生成的文件中, 找到以下文件 build/utils.js, 如下添加配置const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75 // 1rem=多少像素 这里的设计稿是750px。
}
}
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
})
})
}
}px2rem 用法
安装 px2rem 后,再使用 px 上有些不同,下面简单介绍一下。
直接写 px,编译后会直接转化成 rem ---- 除开下面两种情况,其他长度用这个
在 px 后面添加/no/,不会转化 px,会原样输出。 --- 一般 border 需用这个
在 px 后面添加/px/, 会根据 dpr 的不同,生成三套代码。---- 一般字体需用这个示例代码
/** 编译前 **/
.selector {
width: 150px;
height: 64px; /*px*/
font-size: 28px; /*px*/
border: 1px solid #ddd; /*no*/
}
/** 编译后(打包后的代码)**/
.selector {
width: 2rem;
border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
height: 32px;
font-size: 14px;
}
[data-dpr="2"] .selector {
height: 64px;
font-size: 28px;
}
[data-dpr="3"] .selector {
height: 96px;
font-size: 42px;
}重启项目,就可以愉快的用设计稿上的 px 了。
注意:
不能在 index.html 的头部加 name 为 viewport 的 meta 标签,flexible 会自动为我们添加!
本文版权归作者和博客园共有,欢迎转载。但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利!
作者:刘呵呵
QQ:352887191
不难懂------适配移动端flexible的更多相关文章
- 使用viewport中的vm来适配移动端页面
前言 作为一个小前端,经常要和H5打交道,这就面临着不同终端的适配问题. Flexible方案通过Hack手段来根据设备的dpr值相应改变<meta>标签中viewport的值,给我更贴切 ...
- Vue将px转化为rem适配移动端
Vue将px转化为rem适配移动端 1.下载lib-flexible我使用的是vue-cli+webpack,所以是通过npm来安装的npm i lib-flexible --save 2.引入lib ...
- 九、响应式发:rem和less(适配移动端)
一.响应式开发 响应式开发优先适配移动端又兼容到pc端 官网:https://less.bootcss.com/usage/ 教程:https://www.w3cschool.cn/less/ rem ...
- 让 jQuery UI draggable 适配移动端
背景: 在移动端,本人要实现对某个元素的拖动,想到使用 jQuery UI 的 draggable 功能.但是发现此插件的拖动只支持PC端,不支持移动端. 原因: 原始的 jQuery UI 里,都是 ...
- bootstrap适配移动端
上次在pythonanywhere上挂上去的页面,是这个样子的 而在手机上看是这个样子的 总之简直不能看= = 看了一下学校几个微信公众号的页面.都是用的bootstrap,好吧我也去试试看好了. 在 ...
- React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了
原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...
- 从0到1构建适配不同端(微信小程序、H5、React-Native 等)的taro + dva应用
从0到1构建适配不同端(微信小程序.H5.React-Native 等)的taro + dva应用 写在前面 Taro 是一套遵循 React 语法规范的 多端开发 解决方案.现如今市面上端的形态多种 ...
- 本周汇总 动态rem适配移动端/块状元素居中/透明度
1.动态rem适配移动端 !function(){ var width = document.documentElement.clientWidth; var head=document.getEle ...
- h5移动端flexible源码适配终端解读以及常用sass函数
;(function(win, lib) { var doc = win.document;// win = window,lib = window.lib; var docEl = doc.docu ...
随机推荐
- (gcd(a,b) == axorb)==>b = a-gcd(a,b)
\((gcd(a,b) == axorb)==>b = a-gcd(a,b)\)的证明 \[(gcd(a,b) == axorb)==>b = a-gcd(a,b) \] 证明$$a-b& ...
- 【LeetCode】559. Maximum Depth of N-ary Tree 解题报告(Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 DFS BFS 日期 题目地址:https://le ...
- 1226 - One Unit Machine
1226 - One Unit Machine PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 32 MB ...
- mongodb Windows系统下安装卡死问题
1.操作环境 MongoBD版本:mongodb-win32-x86_64-2008plus-ssl-4.0.5-signed (4.0.5) 操作系统:Windows 2008 R2_64位 (服务 ...
- 使用.NET 6开发TodoList应用(16)——实现查询排序
系列导航及源代码 使用.NET 6开发TodoList应用文章索引 需求 关于查询的另一个需求是要根据前端请求的排序字段进行对结果相应的排序. 目标 实现根据排序要求返回排序后的结果 原理与思路 要实 ...
- Debug解决问题方法论
发现问题怎么办,如何处理, 所谓的Debug的一般流程是什么, 下面是我对此的一些思考总结, 后面还会继续完善补充. 1.处理思路总纲 发现问题 查看日志 没有日志,去找日志 找不到日志,继续找,有些 ...
- linux的用户主目录(~)指向问题
最近在Ubuntu上安装rabbitmq之后,发现~目录指向出问题了,原本~指向当前shell登录的用户主目录,如下图 现在变成了这样: 登录之后进入的不是~目录,而是直接显示的主目录,而~指向的目录 ...
- html基础 字符实体 用于html中特殊符号的展示 比如:多个空格、代码展示
结构:&+英文: 常见的字符实体
- linux 之 expect 交互操作(自动输入密码)
场景 需要实现执行一个命令,并自动输入密码. 实现 通过expect命令实现 spawn 交互程序开始后面跟命令或者指定程序expect 获取匹 ...
- VMware_克隆机器后主机Ping不同虚拟机,虚拟机能Ping通主机
使用vm的克隆功能克隆一个系统,因为我克隆的系统使用的是静态IP,所以修改克隆机的ip地址,并且也修改MAC地址,启动后两个虚拟机,ping了下主机IP能Ping通,但是使用主机Ping虚拟机时发现P ...