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. DisplayAttribute应用——根据PropertyName自动获取对应的UI显示名

    model定义,使用DisplayAttribute public class AddressSetInfo { /// <summary> /// invoiceAddress.Id / ...

  2. Web登录验证之 Shiro

    1.需要用到的shiro相关包 <!-- shiro begin --> <dependency> <groupId>org.apache.shiro</gr ...

  3. PAT 甲级 1043 Is It a Binary Search Tree (25 分)（链表建树前序后序遍历）*不会用链表建树 *看不懂题

    1043 Is It a Binary Search Tree (25 分)   A Binary Search Tree (BST) is recursively defined as a bina ...

  4. （十二）class文件结构：魔数和版本

    一.java体系结构 二.class格式文件概述 class文件是一种8位字节的二进制流文件, 各个数据项按顺序紧密的从前向后排列, 相邻的项之间没有间隙, 这样可以使得class文件非常紧凑, 体积 ...

  5. 实现下拉弹出视图和Block的简单实现

    实现效果如下: 实现代码如下: @interface ViewController ()<UIViewControllerTransitioningDelegate> { UILabel ...

  6. END使用

    [root@bogon ~]# cat d.sh #!/bin/bash#. /etc/init.d/functionscat <<END+------------------------ ...

  7. 移动App书写Test Case时需要考虑的检查点

    在测试工作中我们需要不断的总结和储备自己的知识和经验,譬如具备特定属性.环境以及场景,如:PC,手机,智能设备,特定网络环境下. 我们需要关注的功能点,容易出错的位置,这将对我们整个测试过程起至关作用 ...

  8. Scratch3架构结构说明

    Scratch3.0整体项目结构比较庞大,对于不同二次开发开始的时候会出现一头雾水,需要先了解下整体框架,可以按需要在指定的源码下进行修改,大致结构如下: 1. scratch-gui: 是基于Rea ...

  9. async/await小知识点

    一.使用async修饰的函数,返回的内容就是一个Promise,因此可以使用Promise对象所有的方法,如then等 二.在async函数中使用await是否会影响其他代码的执行,答案是:不会.

  10. Vue Router路由管理器介绍

    参考博客:https://www.cnblogs.com/avon/p/5943008.html 安装介绍:Vue Router 版本说明 对于 TypeScript 用户来说,vue-router@ ...