最近我在开发的过程中,出现了一个需求,我需要把开发好的小程序倒模成H5页面,这里就涉及一个布局单位问题,我们小程序用的单位都rpx,是按照750rpx铺满整个页面来算的,可H5又不支持rpx单位,这里在倒模页面的时候就碰到了一个问题严重的问题,我总不可能一个一个去算吧(真的太烦了),这里我给大家介绍一个取巧的方法,H5的页面单位中有rem单位,是根据html的文字大小来调整的,那么我们只需要计算出1rpx等于多少vw就可以了。

代码如下:

  1. 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 {
  2. margin:0;
  3. padding:0;
  4. border:0;
  5. }
  6. img{
  7. width:100%;
  8. height: 100%;
  9. }
  10.  
  11. html {
  12. font-size: 0.13333vw;
  13. }

  

当html的文字大小等于0.13333vw的时候,我们可以把css全部粘贴过去,一键把rpx换成rem就可以了,如果对你有所帮助,请给我点个推荐。

如何将1rpx转为1rem的更多相关文章

  1. 使用gulp将移动端px转为rem

    使用gulp的插件可以很方便的将xp转为rem,在布局的时候使用@1x .@2x布局,即10rem=device-width:@1x即设计图为320px,1rem对应的10px像素,相对的@2x即为布 ...

  2. js 移动端 多图上传 预览 删除 base64转为url 传给后端

    说下主要的逻辑,首先是利用input type="file",上传文件,然后判断文件类型是否是图片,这里要注意(multiple,安卓一次一张,ios可以多张). 接着把本地图片转 ...

  3. Windows server 2012 添加中文语言包(英文转为中文)(离线)

    Windows server 2012 添加中文语言包(英文转为中文)(离线) 相关资料: 公司环境:亚马孙aws虚拟机 英文版Windows2012 中文SQL Server2012安装包,需要安装 ...

  4. [LeetCode] Convert a Number to Hexadecimal 数字转为十六进制

    Given an integer, write an algorithm to convert it to hexadecimal. For negative integer, two’s compl ...

  5. [LeetCode] Integer to English Words 整数转为英文单词

    Convert a non-negative integer to its english words representation. Given input is guaranteed to be ...

  6. [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 ...

  7. [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. 这道 ...

  8. [LeetCode] String to Integer (atoi) 字符串转为整数

    Implement atoi to convert a string to an integer. Hint: Carefully consider all possible input cases. ...

  9. 在.NET中把项目从类库转为Web应用程序

    我们知道,在.NET中所有的项目文件以.csproj为扩展名.内容是xml格式. 类库项目文件.csproj: <Project DefaultTargets="Build" ...

随机推荐

  1. 留心一下VS的这个调试代码的bug

    最近和同事在Debug代码时,遇到一个诡异的问题,开始以为是代码问题,分析了之后发现是VS(v16.8.3)的bug,特此分享一下,如果大家近期遇到类似的问题,不要茫然. 这个bug重现的方式是,在d ...

  2. 彻底理解Spring如何解决循环依赖

    Spring bean生命周期 可以简化为以下5步. 1.构建BeanDefinition 2.实例化 Instantiation 3.属性赋值 Populate 4.初始化 Initializati ...

  3. Python之matplotlib画图

    折线图: Matplotlib处理csv文件 这里写两个其他的. 柱状图,柱状图个人喜欢用pygal来画,有两篇文章 - Pygal之掷骰子 和 pygal之掷骰子 - 2颗面数为6的骰子.下面用ma ...

  4. win7激活不支持的启动引导分区完美解决方法

    前言: 激活win7显示不支持的启动引导分区怎么办?有用户使用暴风激活工具给win7 64位系统激活时,弹出Error提示框"不支持的启动引导分区". 这是因为传统的win7激活工 ...

  5. 《Spring Boot 实战纪实》缺失的逻辑

    目录 前言 (思维篇)人人都是产品经理 1.需求文档 1.1 需求管理 1.2 如何攥写需求文档 1.3 需求关键点文档 2 原型设计 2.1 缺失的逻辑 2.2 让想法跃然纸上 3 开发设计文档 3 ...

  6. spring-boot 使用hibernate validation对参数进行优雅的校验

    springboot天生支持使用hibernate validation对参数的优雅校验,如果不使用它,只能对参数挨个进行如下方式的手工校验,不仅难看,使用起来还很不方便: if(StringUtil ...

  7. 在jsp页面嵌入java代码让某些div显示或者隐藏

    <!--监测评价人显示评价人信息 --> <% if("D3".equals(role_flag)){%> <div id="crud&qu ...

  8. JDBC学习(错误反思)

    注意拼写错误!!! 注意拼写错误!!! 注意拼写错误!!!  文档注释快捷键   alt+shift+J    

  9. Mysql 实战关于date,datetime,timestamp类型使用

    最近在做一个项目 项目中 不同的小伙伴同时在不同的业务模块中用到了date,datetime,timestamp这三个类型 特别是datetime,timestamp这两个 如果不能理解到位  其实很 ...

  10. 图解HTTP权威指南(五) | HTTP缓存

    作者简介 李先生(Lemon),高级运维工程师(自称),SRE专家(目标),梦想在35岁买一辆保时捷.喜欢钻研底层技术,认为底层基础才是王道.一切新技术都离不开操作系统(CPU.内存.磁盘).网络等. ...