如何将1rpx转为1rem
最近我在开发的过程中,出现了一个需求,我需要把开发好的小程序倒模成H5页面,这里就涉及一个布局单位问题,我们小程序用的单位都rpx,是按照750rpx铺满整个页面来算的,可H5又不支持rpx单位,这里在倒模页面的时候就碰到了一个问题严重的问题,我总不可能一个一个去算吧(真的太烦了),这里我给大家介绍一个取巧的方法,H5的页面单位中有rem单位,是根据html的文字大小来调整的,那么我们只需要计算出1rpx等于多少vw就可以了。
代码如下:
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
margin:0;
padding:0;
border:0;
}
img{
width:100%;
height: 100%;
}
html {
font-size: 0.13333vw;
}
当html的文字大小等于0.13333vw的时候,我们可以把css全部粘贴过去,一键把rpx换成rem就可以了,如果对你有所帮助,请给我点个推荐。
如何将1rpx转为1rem的更多相关文章
- 使用gulp将移动端px转为rem
使用gulp的插件可以很方便的将xp转为rem,在布局的时候使用@1x .@2x布局,即10rem=device-width:@1x即设计图为320px,1rem对应的10px像素,相对的@2x即为布 ...
- js 移动端 多图上传 预览 删除 base64转为url 传给后端
说下主要的逻辑,首先是利用input type="file",上传文件,然后判断文件类型是否是图片,这里要注意(multiple,安卓一次一张,ios可以多张). 接着把本地图片转 ...
- Windows server 2012 添加中文语言包(英文转为中文)(离线)
Windows server 2012 添加中文语言包(英文转为中文)(离线) 相关资料: 公司环境:亚马孙aws虚拟机 英文版Windows2012 中文SQL Server2012安装包,需要安装 ...
- [LeetCode] Convert a Number to Hexadecimal 数字转为十六进制
Given an integer, write an algorithm to convert it to hexadecimal. For negative integer, two’s compl ...
- [LeetCode] Integer to English Words 整数转为英文单词
Convert a non-negative integer to its english words representation. Given input is guaranteed to be ...
- [LeetCode] Convert Sorted List to Binary Search Tree 将有序链表转为二叉搜索树
Given a singly linked list where elements are sorted in ascending order, convert it to a height bala ...
- [LeetCode] Convert Sorted Array to Binary Search Tree 将有序数组转为二叉搜索树
Given an array where elements are sorted in ascending order, convert it to a height balanced BST. 这道 ...
- [LeetCode] String to Integer (atoi) 字符串转为整数
Implement atoi to convert a string to an integer. Hint: Carefully consider all possible input cases. ...
- 在.NET中把项目从类库转为Web应用程序
我们知道,在.NET中所有的项目文件以.csproj为扩展名.内容是xml格式. 类库项目文件.csproj: <Project DefaultTargets="Build" ...
随机推荐
- Laravel Argument 1 passed to App\Models\Recipients\AlertRecipient::__construct() must be an instance of App\Models\Recipients\string, string given,
今天测试snipet的计划任务,库存低于警告值的时候,时候会会自动发送邮件到邮箱 class SendInventoryAlerts extends Command { /** * The name ...
- Kubernetes应用管理器OpenKruise之CloneSet
OpenKruise OpenKruise 是 Kubernetes 的一个标准扩展,它可以配合原生 Kubernetes 使用,并为管理应用容器.sidecar.镜像分发等方面提供更加强大和高效的能 ...
- Core3.0读取appsetting.json中的配置参数
前言 方法很多,下面的例子也是从百度上搜索到的,原文链接已经找不到了. 方法1 1.添加NovelSetting节点,写入相关的配置信息 2.创建类,字段与上面的配置一致 3.StartUp.cs中获 ...
- C#中搜索xsd文件中的某个数据源
步骤 1.打开***.xsd文件. 2.数据源之间的空白处,右键->属性. 3.在VS右侧会跳出一个属性窗口. 4.有个名称为DataSet的下拉框,所有的数据源名称都在其中,单击即可定位到所选 ...
- [.NET] - OleDb读取CSV文件:使用指定的分隔符号
今天在用OleDb方式读取一个CSV文件的时候,发现得到的文本不是通常用逗号隔开的.而是用Tab制表符来隔开的. OrderID OrderName 1 1 2 2 3 3 然后去MSND查询了了下发 ...
- python初学者-从键盘输入两个数判断大小
a = int(input("a:")) b = int(input("b:")) if a > b : print(a) else : print(b)
- 老吕教程--01后端Node.js框架搭建(安装调试KOA2)
今天开始从零搭建后端框架,后端框架基于Koa2,通过Typescript语言编写. 在写后端框架之前,自己也了解过Express,感觉Koa2更加灵活,由于有多年后端研发经验,所以采用Koa2,简单敏 ...
- Kafka Eagle 管理平台
Kafka-Eagle简介 源代码地址:https://github.com/smartloli/kafka-eagle Kafka Eagle是什么 Kafka Eagle是一款用于监控和管理Apa ...
- Offer快到碗里来,Volatile问题终结者
微信公众号:大黄奔跑关注我,可了解更多有趣的面试相关问题. 写在之前面试问题概览面试回顾大黄可见性Demo演示小插曲大黄可见性Demo演示小插曲大黄可见性Demo演示小插曲总结番外 写在之前 Hell ...
- Light Probes
LightProbes (光照探针,光探测器?) 提供了一种方法用于捕获和使用 穿过场景中空白空间的 光(light)的信息. 和光照贴图相似(lightmaps),Light Probes也存储关于 ...