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. 画布之ShapeDrawable

    package com.loaderman.customviewdemo; import android.content.Context; import android.graphics.Canvas ...

  2. 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_05-SpringSecurityOauth2研究-搭建认证服务器

    3 Spring Security Oauth2研究 3.1 目标 本项目认证服务基于Spring Security Oauth2进行构建,并在其基础上作了一些扩展,采用JWT令牌机制,并自定 义了用 ...

  3. web手工项目01-系统组织框架-测试流程-需求评审-测试计划与方案

    回顾 SVN(定义,作用,使用操作) 软件缺陷(定义,表现形式,原因和根源,基本内容,跟踪流程) JIRA(基本介绍,使用者,工作流,问题,使用) 学习目标 掌握WAMP的环境搭建 掌握熟悉项目的步骤 ...

  4. 【产品】C转B

    http://www.woshipm.com/pmd/2780830.html 这篇文章总结的不错.

  5. 【C/C++开发】运算符重载二

    C++中预定义的运算符的操作对象只能是基本数据类型.但实际上,对于许多用户自定义类型(例如类),也需要类似的运算操作.这时就必须在C++中重新定义这些运算符,赋予已有运算符新的功能,使它能够用于特定类 ...

  6. 软件测试开发人员需要掌握的一些基本数据结构算法（php编写）

    一:冒泡排序算法    冒泡排序(Bubble Sort)算法是一种典型的交换排序算法,通过两两数据交换进行排序.如果有n个数,则要进行n-1趟比较,在第1趟比较中要进行n-1次两两比较,在第j趟比较 ...

  7. python map函数(23)

    截至到目前为止,其实我们已经接触了不少的python内置函数,而map函数也是其中之一,map函数是根据指定函数对指定序列做映射,在开发中使用map函数也是有效提高程序运行效率的办法之一. 一.语法定 ...

  8. 图数据库neo4j添加算法包

    1. 从https://github.com/neo4j-contrib/neo4j-graph-algorithms/releases下载相应版本jar包,放到 C:\Users\Administr ...

  9. hdu--1232 继续通畅工程

    wa了8次,超级崩溃,险些自闭,不过倒是学到了很多,先来一段代码: #include<bits/stdc++.h> using namespace std; ]; //储存查并集 int ...

  10. Excel关联匹配函数

    1.=VLOOKUP (lookup_value, table_array, col_index_num, [range_lookup]) ​ lookup_value 相当于python中的键,用来 ...