npm install lib-flexible --save
npm install px2rem-loader --save-dev
 
rule
.use('px2rem-loader')
.loader('px2rem-loader')
.options({emUnit:37.5})
 
正常移动端范围是375到750
我们这样设定就是让1rem为37.5px
相当于将页面（375px）分成十份，每一份就是1rem（37.5px）
rem就是相对于根元素，即<html>
 
 
import 'lib-flexible/flexible.js'
 
这样我们就可以按照设计图的px来做了，他会根据屏幕大小帮我们转换为对应的rem值
 
 

移动端适配flexible.js的更多相关文章

  1. 移动端适配--flexible.js

    引言: H5适配一直是一个比较普遍的问题,很多文章都会讲,最近开发了一个H5的项目使用了一下淘宝的 flexible.js,写一篇文章自己总结一下. 一.背景介绍: Flexible.js是淘宝公开的 ...

  2. vue.js移动端配置flexible.js

    前言 最近在用vue做移动端项目,网上找了一些移动端适配的方案,个人觉得手淘团队flexible.js还是比较容易上手,在这里做下总结. 主体 flexible.js适配方案采用rem布局,根据屏幕分 ...

  3. vue脚手架搭建移动端项目--flexible.js

    通过命令行 node -v 查看是否安装node环境 在 nodejs 和 webpack已安装的前提下,随便一个文件夹下,输入命令行 npm install vue-cli -g 安装完成后,通过 ...

  4. vue-cli配置移动端自适应flexible.js

    第一部分:项目中引入lib-flexible 一.项目中安装lib-flexible npm install lib-flexible --save-dev 二.在项目入口文件main.js中引入li ...

  5. 淘宝适配 flexible.js

    1.引入 阿里cdm文件,也可以自己下载下来引用,不需要在添加<meta name="viewport"">标签了 <script src=" ...

  6. 【前端开发】移动端适配方案js，rem单位转换，640设计稿20px=1rem

    ! function() { var style = document.createElement("STYLE"), docEl = document.documentEleme ...

  7. css样式重置 移动端适配

    css  默认样式重置 @charset "utf-8"; *{margin:0;padding:0;} img {border:none; display:block;} em, ...

  8. 从flexible.js引入高德地图谈起的移动端适配

    曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢 ...

  9. 移动端适配方案 flexible.js

    前言 移动端适配一直以来都是前端开发中不可或缺的重要组成部分,如果没有了它,那么你做出来的页面极有可能会出现各种意外(写出来的页面与设计稿之间的差别).所有我们得找到一种相对来说让人比较满意的解决方案 ...

随机推荐

  1. SurfaceView概述和基本使用

    Android屏幕刷新一遍时间间隔为16ms,如果view能够在16ms内完成所需要执行的绘图换作,那么在视觉上,界面就是流畅的,否则就会出现卡顿现象,在很多情况下,这些逻辑处理又是必须的,为了解决这 ...

  2. sppNet论文学习

    Spatial Pyramid Pooling in Deep Convolutional Networks for Visual Recognition 深度神经网络中用于视觉识别的空间金字塔池化 ...

  3. 总结Lock和synchronized的区别

    1. Lock是一个接口,而synchronized是Java中的关键字,synchronized是内置的语言实现,Lock是代码层面的实现. 2. Lock可以选择性的获取锁,如果一段时间获取不到, ...

  4. Qt编写自定义控件51-可输入仪表盘

    一.前言 这个控件是近期定制的控件,还是比较实用的控件之一,用户主要是提了三点需求,一点是切换焦点的时候控件放大突出显示,一点是可直接输入或者编辑值,还有一点是支持上下键及翻页键和鼠标滚轮来动态修改值 ...

  5. 用Dev C++编写第一个C语言程序

    不少新同学表示对计算机类专业有些担忧,那么可以趁军训期间提前玩玩. 学校一般使用VS2008进行编程,VS2008功能强大,内容丰富,体积也比较大.如果只关注C语言编程的话,有一个非常轻便的软件Dev ...

  6. python 创建虚拟环境（virtualenv）

    原文地址:https://www.jianshu.com/p/2645d8f2e690 另附连接:Linux环境下虚拟环境virtualenv安装和使用 virtualenv 安装 1.Install ...

  7. 做了一个非竞价排名、有较详细信息的程序员职位 match 网站

    作为一个程序员,每次看机会当我去 BOSS 直聘 或者拉勾网进行搜索时,返回的顺序并不是根据匹配程度,而是这些公司给 BOSS 直聘或者拉勾网付了多少钱.这种百度式的竞价排名机制并没有把我做为求职者的 ...

  8. 泰乐事（Telos）白皮书中文版 <零> 封面及目录

    <泰乐事白皮书> 一个可持续发展的去中心化EOSIO网络 作者:道格拉斯·合恩 泰乐事(Telos)—— 事物的终极目标. Telos一词来源于希腊语ΤΈΛΟΣ. “一颗橡果的终极目标是成 ...

  9. 【CUDA开发】CUDA编程接口（一）------一十八般武器

    子曰:工欲善其事,必先利其器.我们要把显卡作为通用并行处理器来做并行算法处理,就得知道CUDA给我提供了什么样的接口,就得了解CUDA作为通用高性能计算平台上的一十八般武器.(如果你想自己开发驱动,自 ...

  10. APK在Android Studio下如何签名

    apk签名的意义 Android系统要求每一个Android应用程序必须要经过数字签名才能够安装到系统中,也就是说如果一个Android应用程序没有经过数字签名,是没有办法安装到系统中的! Andro ...