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. ISO/IEC 9899:2011 条款6.4.8——预处理数字

    6.4.8 预处理数字 语法 1.pp-number: digit .    digit pp-number    digit pp-number    identifier-nondigit pp- ...

  2. labelimg data

    <annotation> <folder>img_data_box_1500</folder> <filename>798.jpg</filena ...

  3. SpringCloud学习成长之十二 断路器监控

    在我的第四篇文章断路器讲述了如何使用断路器,并简单的介绍了下Hystrix Dashboard组件,这篇文章更加详细的介绍Hystrix Dashboard. 一.Hystrix Dashboard简 ...

  4. Maven 打war包

    使用maven将项目达成war包 右击项目的跟项目,选择run as 选择maven  build.... 进入窗口,在 Goals  输入命令   clean package,选择 skip Tes ...

  5. 利用python求解物理学中的双弹簧质能系统详解

    利用python求解物理学中的双弹簧质能系统详解 本文主要给大家介绍了关于利用python求解物理学中双弹簧质能系统的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 物理的 ...

  6. Linux下-bash: Permission denied 或者 sudo: command not found 错误

    有时候执行一个脚本或者运行一个可执行文件时,如执行脚本./foo.sh,会报错-bash: ./foo.sh: Permission denied,你会再试sudo ./foo.sh,发现继续报错su ...

  7. 【设计】PC Web端框架组件

    https://uedart.com/demo/templatesWebKit/index.html#g=1&p=%E4%BD%9C%E5%93%81%E9%A6%96%E9%A1%B5 移动 ...

  8. ElasticSearch——冷热(hot&warm)架构部署

    背景 最近在做订单数据存储到ElasticSearch,考虑到数据量比较大,采用冷热架构来存储,每月建立一个新索引,数据先写入到热索引,通过工具将3个月后的索引自动迁移到冷节点上. ElasticSe ...

  9. CGAffineTransform的使用大概:

    1. CoreGraphics框架中的CGAffineTransform类可用于设定UIView的transform属性,控制视图的缩放.旋转和平移操作: transform我们一般称为形变属性,其本 ...

  10. 使用一般处理程序生成 JSON

    在 .NET 3.5 之后,定义在命名空间 System.Runtime.Serialization.Json 中的 DataContractJsonSerializer 可以帮助我们直接将一个对象格 ...