rem使用方法:

rem ,root element,即相对于根元素的大小,浏览器默认字符大小为16px,此时1rem相当于16px.

 方法1 设置font-size:

  1. body{font-size: 62.5%;}

1em则=16px*62.5%=10px,1.2em则=12px

方法2 使用less或则scss的方式:

若设计稿的宽度为750px,屏宽375px,相对rem为750/2/16rem,若设置默认字符大小25px;则一个元素相对rem为width/50;less中使@r为50rem可简化计算

1 :javascript:

  1. <script>
  2. (function() {
  3. var html = document.documentElement;
  4. var hWidth = html.getBoundingClientRect().width;//根据屏宽调节大小
  5. // console.log( hWidth );
  6. html.style.fontSize = hWidth / 15 + "px";//设置默认字符大小 25
  7. })()
  8. </script>

2: less中写入宽度:

  1. @r:50rem;
  2. p{
  3. width: 320/@r;
  4. }

3:编译后:

  1. p {
  2. width: 6.4rem;
  3. }

scss写法:

2: scss中写入宽度:

  1. @function t($px) {
  2. @return $px / 50px * 1rem;
  3. }
  4. p {
  5. width: t(20px);
  6. }

1 Hbuilder 中自动编译 less:

(1)  首先在node中全局安装less:npm install less -g

(2) hbuilder中打开 工具-预编译-less-编辑-智能完成

(3) 现在保存ctrl+s即可自动编译less文件

2 sublime安装less插件:

1 首先node下全局安装less:npm install less -g

lessc命令可编译less文件

2 然后sublime安装less插件:ctrl+shift+p>install Package>输入less+Enter

支持less高亮

3 安装将less转换为css的less2Css:ctrl+shift+p>install Package>输入less2css+Enter

4 cmd下安装less-plugin-clean-css插件: npm install less-plugin-clean-css -g

然后less文件保存会自动生成css文件

tips:

1:发现如果容器没有设置高度,则相同rem值,显示的字符大小有差异,未设置容器高度字符偏大

移动端px转rem的两种方法的更多相关文章

  1. windows下获取IP地址的两种方法

    windows下获取IP地址的两种方法: 一种可以获取IPv4和IPv6,但是需要WSAStartup: 一种只能取到IPv4,但是不需要WSAStartup: 如下: 方法一:(可以获取IPv4和I ...

  2. Response.Redirect 打开新窗体的两种方法

    普通情况下,Response.Redirect 方法是在server端进行转向,因此,除非使用 Response.Write("<script>window.location=' ...

  3. C模块回调Lua函数的两种方法

    作者:ani_di 版权所有,转载务必保留此链接 http://blog.csdn.net/ani_di C模块回调Lua函数的两种方法 lua和C通过虚拟栈这种交互方式简单而又可靠,缺点就是C做栈平 ...

  4. Response.Redirect 打开这两种方法的一种新形式

    在一般情况下.Response.Redirect 该方法是在server年底转向,因此,除非 Response.Write("<script>window.location='h ...

  5. ASP.NET MVC 实现AJAX跨域请求的两种方法

    通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据的加载,例如Google. 在ASP.NET MVC 框 ...

  6. html之改变图片透明度而不改变文字的透明度--两种方法实现

    图片与图片上的文字设置不同的透明度的两种方法: 第一种方法:背景图+定位+background: url(timg.jpg)no-repeat; <!DOCTYPE html> <h ...

  7. WCF生成客户端代理对象的两种方法的解释

    最近在封装WCF,有一些很好的实践就记录下来,大家可以放心使用,所有代码都已经调试过.如果有高手可以大家探讨一下. 在WCF中有两种不同的方法可以用于创建客户端服务对象,他们分别为: 1. 代理构造法 ...

  8. PHP中对用户身份认证实现两种方法

    用户在设计和维护站点的时候,经常需要限制对某些重要文件或信息的访问.通常,我们可以采用内置于WEB服务器的基于HTTP协议的用户身份验证机制.     当访问者浏览受保护页面时,客户端浏览器会弹出对话 ...

  9. ChemDraw加键的两种方法

    绘制化学结构离不开9种ChemDraw键工具,键工具在绘制过程中提供了最大的使用优势,这种优势体现在键角.键长的绘制,故很有必要学习相关的ChemDraw使用技巧.本ChemDraw教程将具体介绍在C ...

随机推荐

  1. vscode wepy 用户自定义代码片段

    VSCode wepy 自定义代码片段 { "wepy-page": { "prefix": "wepy", "body" ...

  2. C++性能优化笔记

    最近着手去优化项目中一个模块的性能.该模块是用C++实现,对大量文本数据进行处理. 一开始时,没什么思路,因为不知道性能瓶颈在哪里.于是借助perf工具来对程序进行分析,找出程序的性能都消耗在哪里了. ...

  3. SpingBoot之多Profile文件

    1.我们在主配置文件编写的时候,文件名可以是 application-{profile}.properties/yml默认使用application.properties的配置: 在我们的项目开发.测 ...

  4. python 用requests请求,报SSL:CERTIFICATE_VERIFY_FAILED错误

    https://www.aliyun.com/jiaocheng/437481.html

  5. 为什么90%的IT人员都不适合做老大?

    什么是格局? 格局就是能够很好的平衡短期利益和长期利益. 过分注重短期利益的人必然会失去长期利益,到头来一定会很普通. 例如:跳槽不断,可能短期薪资会增长,但长期来看后劲可能会不足,未来发展空间会变窄 ...

  6. cmf5分页相关

    //分页配置在app/config.php 'paginate' => [ 'type' => '\cmf\paginator\Bootstrap', 'var_page' => ' ...

  7. kafka及扩展的安装笔记

    参考文件 https://blog.csdn.net/weiwenjuan0923/article/details/76152744 一.首先确认下jdk有没有安装 安装参照这个连接 https:// ...

  8. Tomcat之web.xml中的<url-pattern>标签

    关于web.xml配置中的<url-pattern> 标签<url-pattern> <url-pattern>是我们用Servlet做Web项目时需要经常配置的标 ...

  9. Python 信号处理 signal 模块

    Table of Contents 1. signal模块简介 1.1. signal简单示例 1.2. signal说明 1.2.1. 基本的信号名 1.2.2. 常用信号处理函数 2. signa ...

  10. 线程、进程、队列、IO多路模型

    操作系统工作原理介绍.线程.进程演化史.特点.区别.互斥锁.信号.事件.join.GIL.进程间通信.管道.队列.生产者消息者模型.异步模型.IO多路复用模型.select\poll\epoll 高性 ...