手淘的移动端适配方案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 会自动为我们添加!
手淘的移动端适配方案flexible的更多相关文章
- 手淘H5移动端适配方案flexible源码分析
移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看到的第一个典型的例子,也是我们公司目前普通H5项目正 ...
- 移动端适配方案 flexible.js
前言 移动端适配一直以来都是前端开发中不可或缺的重要组成部分,如果没有了它,那么你做出来的页面极有可能会出现各种意外(写出来的页面与设计稿之间的差别).所有我们得找到一种相对来说让人比较满意的解决方案 ...
- 基于Vue/React项目的移动端适配方案
本文的目标是通过下文介绍的适配方案,使用vue或react开发移动端及H5的时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局,提升开发效率. 下文给出了本人分别使用create-re ...
- rem移动端适配方案
一. rem vs em 单位 定义 特点 rem font size of the root element 以根元素字体大小为基准 em font size of the element 以父元素 ...
- H5 APP 页面移动端适配方案
H5 APP 页面移动端适配方案 https://segmentfault.com/a/1190000011586301 https://juejin.im/post/5cbdee71f265da03 ...
- 手淘移动适配方案flexible.js兼容bug处理
什么是flexible.js 移动端自适应方案 https://www.jianshu.com/p/04efb4a1d2f8 什么是rem 这个单位代表根元素的 font-size 大小(例如 元素的 ...
- 移动端适配方案-rem(基础篇)
常见移动web适配方案一般有3种方法,如下图: ①:定高,宽度百分比(一般用来做一些适配性不高的页面,比如主要以一些文字和图片为主的网页或移动端的头部和底部) ②:flex (更多的用于复杂页面的布局 ...
- 整理h5移动端适配方案
<使用Flexible实现手淘H5页面的终端适配>:https://github.com/amfe/article/issues/17 <再聊移动端页面的适配>:https:/ ...
- 推进"五通一平":手淘技术"三大容器 五大方案"首次整体亮相 百川开放升级
在云栖大会上,马云提出五个“新”,新零售.新制造.新金融.新技术和新能源,称将对各行各业造成巨大的影响,成为决定未来成败的关键.而五个新的实现,也必须是各行各业共同推进,整个生态共同受益的结果.继10 ...
随机推荐
- (欧拉公式 很水) Coprimes -- sgu -- 1002
链接: http://vj.acmclub.cn/contest/view.action?cid=168#problem/B Coprimes 时限:250MS 内存:4096KB 6 ...
- iOS应用开发最佳实践
<iOS应用开发最佳实践> 基本信息 作者: 王浩 出版社:电子工业出版社 ISBN:9787121207679 上架时间:2013-7-22 出版日期:2013 年8月 开本:16 ...
- 团队项目(第三周)—GG队
需求改进&系统设计 队员 学号 叶尚文(队长) 3116008802 蔡晓晴 3216008808 杜婷萱 3216008809 龙剑初 3116004647 于泽浩 3116004661 一 ...
- wc.java
GitHub代码链接 1.项目相关要求 •基本功能列表: -c 统计文件中字符的个数 -w 统计文件中的词数 -l 统计文件中的行数 •拓展功能: -a 统计文件中代码行数.注释行数.空行 2 ...
- Python学习-38.Python中的正则表达式(二)
在Python中,正则表达式还有较其他编程语言有特色的地方.那就是支持松散正则表达式了. 在某些情况,正则表达式会写得十分的长,这时候,维护就成问题了.而松散正则表达式就是解决这一问题的办法. 用上一 ...
- 使用MTR命令诊断网络问题
以前在检查网络时习惯使用ping命令,因为ping命令非常简单,现在喜欢上了mtr命令,因为它真的很强大,但是对于刚刚接触这个命令的同学来说,理解起来就没有ping命令来的那么直观了,所以今天写一 ...
- Easy Ui 的reload 问题
当我删除某条数据时,删除成功后要刷新datagrid 这时调用reload方法就不成功,而要用下面的方式. 正确代码$('#fixedGrid').datagrid("reload" ...
- DBCC--SHOWCONTIG
DBCC SHOWCONTIG是显示指定的表的数据和索引的碎片信息. Usage: dbcc SHOWCONTIG [ ( { 'table_name' | table_id | 'view_name ...
- NERDTree基本使用教程
Vim插件之属性目录NERDTree 1.下载安装 下载地址: 官网:http://www.vim.org/scripts/script.php?script_id=1658 GitHib:htt ...
- NET 时间字符串转换
// 把指定格式的日期字符串转换为时间:2018/11/1 0:00:00 DateTime.ParseExact("2018a11","yyyyaMM",Sy ...