当前位置: 首页 > 编程日记 > 正文

h5引入不同的js文件怎样让第二个js使用第一个js文件中的函数_px2rem-loader使用及注意事项...

1.安装lib-flexible.js; //基于vue-cli配置手淘的lib-flexible + rem,实现移动端自适应

2.安装px2rem-loader;//使用 webpack 的 px2rem-loader,自动将px转换为rem

3.在项目入口文件main.js中引入lib-flexible;//(import 'lib-flexible/flexible.js');

4.配置px2rem-loader:

首先找到 build/utils.js文件,在utils.js中添加如下配置

0da7fd1a1514d12bc242f7bad57f8f14.png

此处需要注意的是px2remloader的remUnit属性,此处填写的是设计稿宽度的十分之一,例如设计稿宽度是750,这里填写75

找到generateLoaders方法,在函数里如下配置

337aa9934674ff598328432c1b209ce5.png

安装px2rem后,再使用px上有些不同,大家可以参考px2rem官方介绍,下面简单介绍一下。

直接写px,编译后会直接转化成rem      —- 除开下面两种情况,其他长度用这个
在px后面添加/no/,不会转化px,会原样输出。      — 一般border需用这个
在px后面添加/px/,会根据dpr的不同,生成三套代码。—-      一般字体需用这个

使用过程中,注意避开这些坑。

1、不兼容ipad。2、对外部引入css,px2rem能不能转换rem问题

301beb78f6f1943647e8220c45aaef22.png
3、如果我们如果引入了第三方框架,他们的样式是另一套写法,样式会被flexible转换,就会破坏框架的样式,例如:mint-ui picker整体会变小

原因是我们之前配置的px2rem也会把我们引入的ui组件也转换成rem的格式,本身组件已经是为移动端做了适配,px2rem又转成了rem就导致其样式变的很小,解决办法:就是我们还是使用flexible.js,然后不使用px2rem,也就是不要上面的配置

px2remLoader暂时不用
function generateLoaders (loader, loaderOptions) {const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]if (loader) {loaders.push({loader: loader + '-loader',options: Object.assign({}, loaderOptions, {sourceMap: options.sourceMap})})}

借助开发工具,我用的是vscode,安装Px to rem width scss ,安装完后,在文件 >首选项 > 设置 搜索一下:

62863983959b7c568aea7cfb5c23be99.png

Px-to-rem设置成75就可以了。页面写样式的时候:

例如:

.header{height:90px:
}

选中height:90px这行,Alt+Z 会自动转换成height:1.2rem,用第三方组件的话这样写页面样式会有些麻烦!!(个人感觉)

4、不能在index.html头部加name为viewport的meta标签,flexible会自动添加!

如果头部设置有:

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum=1.0,user-scalable=no">

改变不同的设备时都会是data-dpr="1"

d4268503608afeaa165cb31698e4683b.png

不设置的话一般是:

安卓的data-dpr=1,iphone6,iphone5默认dpr为2,6plus,iphone7,8,x均为3

还有一种不用2pxrem-loader的方式用rem单位,

在index.html里面加一段js文本(设计稿750为例):

91e817822dd94865ec4646c817593301.png

如果设计稿是:

.header{
width:500px;
height:500px;
}

样式可以直接写成:

.header{width:5rem;height:5rem;
}

设计图的尺寸/100就是该尺寸单位rem。这个是为了方便开发者计算方便。

即使引入第三方插件,也不受影响,开发的时候可以用px单位,也可以用rem单位。

但是这个头部要设置按照1:1的尺寸:

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum=1.0,user-scalable=no">

根据自己开发需求,那个方便用那个!

如果不了解移动端屏幕适配问题请访问:

使用Flexible实现手淘H5页面的终端适配_双11前端技术连载, Layout, mobile, 会员专栏 教程_w3cplus​www.w3cplus.com
48644a38be40efa7e052fe79dc602c8d.png

相关文章:

C++中的explicitkeyword

在C程序中非常少有人去使用explicitkeyword&#xff0c;不可否认&#xff0c;在平时的实践中确实非常少能用的上。再说C的功能强大&#xff0c;往往一个问题能够利用好几种C特性去解决。但略微留心一下就会发现现有的MFC库或者C标准库中的相关类声明中explicit出现的频率是非常…

Entity Framework Code First在Oracle下的伪实现

为什么要说是伪实现&#xff0c;因为还做不到类似MsSql中那样完全的功能。Oralce中的数据库还是要我们自己手动去创建的。这里&#xff0c;我们舍掉了Model First中的EDMX文件&#xff0c;自己在代码里面写模型与映射关系&#xff0c;这又有点像是Code First模型了&#xff0c;…

leetcode-206 反转链表

描述如下&#xff1a; 反转一个单链表。 示例: 输入: 1->2->3->4->5->NULL 输出: 5->4->3->2->1->NULL 方法一&#xff1a;原地反转 数据结构如下 struct ListNode {int val;ListNode *next;ListNode(int x) : val(x), next(NULL) {}};ListN…

ios采用什么技术_在不锈钢技术成熟的今天,为什么汽车不采用呢?不仅仅是价格问题...

文/憨憨评车想必对于那些经常开车的人都会知道&#xff0c;我们的车子在行驶了几年之后&#xff0c;在性能方面必定是会有所下降的。然而还有一点也是非常让人头疼的&#xff0c;那就是车子的生锈问题。一旦车子的车身出现生锈情况的话&#xff0c;就会给人一种破破烂烂的感觉。…

Effective STL 为包含指针的关联容器指定比较类型

// 为包含指针的关联容器指定比较类型.cpp : 定义控制台应用程序的入口点。 //#include "stdafx.h" #include <set> #include <string> #include <iostream>using namespace std;struct StringPtrLess:public binary_function<const string*…

Android中处理崩溃异常

2019独角兽企业重金招聘Python工程师标准>>> 大家都知道&#xff0c;现在安装Android系统的手机版本和设备千差万别&#xff0c;在模拟器上运行良好的程序安装到某款手机上说不定就出现崩溃的现象&#xff0c;开发者个人不可能购买所有设备逐个调试&#xff0c;所以…

python面试基本题(你需要的)

1、冒泡排序 lis [56,12,1,8,354,10,100,34,56,7,23,456,234,-58]def sortport():for i in range(len(lis)-1):for j in range(len(lis)-1-i):if lis[j] > lis[j1]:lis[j],lis[j1] lis[j1],lis[j]return lis 2、计算x的n次方的方法 def power(x, n):s 1while n > 0:n …

leetcode-92 反转链表II

题目描述如下&#xff1a; 反转从位置 m 到 n 的链表。请使用一趟扫描完成反转。 说明: 1 ≤ m ≤ n ≤ 链表长度。 示例: 输入: 1->2->3->4->5->NULL, m 2, n 4 输出: 1->4->3->2->5->NULL 很明显这个题目是206 反转链表的进阶版 需要记…

地铁框架保护的原理_地铁屏蔽门是如何保证通讯的稳定?

地铁作为人们出行首选交通方式&#xff0c;安全可靠尤为重要&#xff0c;在复杂的地铁控制系统中&#xff0c;如何保障通讯的稳定性呢&#xff1f;本篇文章将从地铁系统中通讯单元的简单拓扑谈谈通讯防护的方案。随着我国经济的快速发展&#xff0c;地铁工程项目建设也处在快速…

HDU1548:A strange lift(Dijkstra或BFS)

题目链接 http://acm.hdu.edu.cn/showproblem.php?pid1548 题意&#xff1a;电梯每层有一个数&#xff0c;例如第n层有个数k&#xff0c; 那么这一层只能上k层或下k层&#xff0c;但是不能低于一层或高于n层&#xff0c; 给定起点与终点&#xff0c;要求出最少要按几次键 我的…

(转)C语言位运算详解

地址&#xff1a;http://www.cnblogs.com/911/archive/2008/05/20/1203477.html C语言位运算详解 作者&#xff1a;911说明&#xff1a;本文参考了http://www2.tsu.edu.cn/www/cjc/online/cyuyan/&#xff0c;算是对其的修正&#xff0c;在此将本文列为原创&#xff0c;实有抄袭…

[bzoj2300] [HAOI2011]防线修建

Description 近来A国和B国的矛盾激化&#xff0c;为了预防不测&#xff0c;A国准备修建一条长长的防线&#xff0c;当然修建防线的话&#xff0c;肯定要把需要保护的城市修在防线内部了。可是A国上层现在还犹豫不决&#xff0c;到底该把哪些城市作为保护对象呢&#xff1f;又由…

leetcode-142 环形链表II

给定一个链表&#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回 null。 为了表示给定链表中的环&#xff0c;我们使用整数 pos 来表示链表尾连接到链表中的位置&#xff08;索引从 0 开始&#xff09;。 如果 pos 是 -1&#xff0c;则在该链表中没有…

1.低权限的程序向高权限的程序发消息 2.慎用setcurrentdirectory

1.低权限的程序向高权限的程序发消息 2.慎用setcurrentdirectory转载于:https://www.cnblogs.com/chunyou128/p/3921903.html

增加service_.NET Core + Kubernetes:Service

通过 .NET Core Kubernetes&#xff1a;Deployment 文章的介绍&#xff0c;我们可以通过 Deployment 控制器快速创建一组 Pod 来提供服务&#xff0c;每个 Pod 都会被分配一个集群内可见的虚拟 IP 地址&#xff0c;然后通过一个独立的 Endpoint(Pod IP ContainerPort)进行访问…

IIS配置相关问题:Framework 4.5 在IIS 7.5中运行

<system.webServer> <validation validateIntegratedModeConfiguration"false" /> <!--4.5 在IIS7.5中运行的时候--> <modules runAllManagedModulesForAllRequests"true" /> </system.webServer>转载于:https://…

[优先队列] 洛谷 P2085 最小函数值

题目描述 有n个函数&#xff0c;分别为F1,F2,...,Fn。定义Fi(x)Ai*x^2Bi*xCi (x∈N*)。给定这些Ai、Bi和Ci&#xff0c;请求出所有函数的所有函数值中最小的m个&#xff08;如有重复的要输出多个&#xff09;。 输入输出格式 输入格式&#xff1a; 输入数据&#xff1a;第一行输…

leetcode-86 分隔链表

给定一个链表和一个特定值 x&#xff0c;对链表进行分隔&#xff0c;使得所有小于 x 的节点都在大于或等于 x 的节点之前。 你应当保留两个分区中每个节点的初始相对位置。 示例: 输入: head 1->4->3->2->5->2, x 3 输出: 1->2->2->4->3->5 …

[WCF编程]1.WCF入门示例

一、WCF是什么&#xff1f; Windows Communication Foundation(WCF)是由微软开发的一系列支持数据通信的应用程序框架&#xff0c;整合了原有的windows通讯的 .net Remoting&#xff0c;WebService&#xff0c;Socket的机制&#xff0c;并融合有Http和Ftp的相关技术&#xff0c…

ios 自动打包命令_iOS自动打包上传脚本

自从将swift2.2升级到swift3.0, 每次使用Xcode8编译都很慢&#xff0c;很是不爽&#xff0c;于是有了研究下xcodebuild命令行打包的想法&#xff0c;起初不知道用shell&#xff0c;还是用python, 在网上大概搜了一下&#xff0c;关于python的比较多点&#xff0c;于是就先学习p…

linux系统下添加新硬盘的方法详解

对于linux新手来说&#xff0c;在linux上添加新硬盘&#xff0c;是很有挑战性的一项工作。在Linux服务器上把硬盘接好&#xff0c;启动linux&#xff0c;以root登陆。 fdisk -l ## 这里是查看目前系统上有几块硬盘 Disk /dev/sda: 36.4 GB, 36401479680 bytes 255 heads, 63 s…

【CF EDU59 E】 Vasya and Binary String (DP)

题意 给一串01串&#xff0c;对该串进行若干次操作&#xff0c;直到串为空 操作为&#xff1a;选择一段连续的0或者1,删除它&#xff0c;拼接前后两部分成为新串&#xff0c;得到价值为a[删除的长度]&#xff08;a为给定的数组&#xff09; 思路 一个非常规的DP 考虑题目所给的…

leetcode-21 合并两个有序链表

将两个有序链表合并为一个新的有序链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例&#xff1a; 输入&#xff1a;1->2->4, 1->3->4 输出&#xff1a;1->1->2->3->4->4 总体思路是&#xff1a; 比较两个链表头节点&#xff0c…

log4cxx第三篇----使用多个logger

使用多个logger时&#xff0c;所有logger的配置写在一个配置文件里面 两个例子&#xff1a; 1 一个继承的例子&#xff08;http://logging.apache.org/log4cxx/&#xff09; // file com/foo/bar.h #include "log4cxx/logger.h"namespace com {namespace foo {class…

authy不同账户间不同步_「第七期」shopify产品还能同步到微信小程序销售?看这里...

众所周知&#xff0c;微信坐拥12亿用户&#xff0c;已经是国民应用&#xff0c;而其中小程序依托于微信生态日活已经超过4亿&#xff0c;对于国内的一些商家来讲是不可错过的流量圣地&#xff0c;那么对于做跨境的朋友来讲怎么利用起来了&#xff1f;今天给大家介绍一款无缝对接…

Ubuntu环境变量

2019独角兽企业重金招聘Python工程师标准>>> Ubuntu 环境变量 环境变量配置文件 在Ubuntu中有如下几个文件可以设置环境变量 1、 /etc/profile:在登录时,操作系统定制用户环境时使用的第一个文件,此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执…

mysql 免安装

1. 解压得到如下目录 2. 配置环境变量 D:\Program Files\mysql-5.7.11-winx64\bin 3. 安装的根目录&#xff0c;新增 my.ini 文件 [mysqld] port 3306 character_set_serverutf8 basedir D:\Program Files\mysql-5.7.11-winx64 datadir D:\Program Files\mysql-5.7.…

leetcode-23 合并K个排序链表

合并 k 个排序链表&#xff0c;返回合并后的排序链表。请分析和描述算法的复杂度。 示例: 输入: [ 1->4->5, 1->3->4, 2->6 ] 输出: 1->1->2->3->4->4->5->6 方法一&#xff1a; 使用vector数组存多个链表的所有节点&#xff0c;进行从小…

Access应用日志一

今天在确认实习生不能帮忙搭建数据库后&#xff0c;自己根据业务需求尝试搭了一个小型access数据库。 主要目的&#xff1a;储存历史月度数据&#xff0c;避免每次从公司数据库下载数据的麻烦&#xff0c;节省数据拉取时间。 搭建了以acct id为主键的两种数据。 1&#xff09;客…

mongodb检查点_mongodb 监控命令mongostat

mongodb 监控命令mongostat2016/03/07 15:11 于 数据分析mongostat实用工具提供了mongoDB一个实例快速概述和当前运行的状态。mongostat功能类似于UNIX / Linux文件系统实用vmstat,mongostat只不过是提供 mongodb 的数据。监控包含的数据&#xff1a;服务器状态数据副本状态数据…