rem单位是根据html元素的单位在页面根据不同的手机屏幕分辨率动态整体的按比例缩小或放大字体。

假如html{font-size: 14px;},那么1rem=14px;

一个div宽度48px,那么换成rem:48px/14px=3.4rem;

宽度200px,换成rem:200px/14px=14.3rem;

宽度28px,换成rem:28px/14px=2rem;

但是建议设置成html{font-size:62.5%},为什么是62.5%?因为任何浏览器默认字体大小是16px,也就是16px=100%;那么1px=6.25%,为了方便计算,我们把10px=62.5%,因此html{font-size:10px;}=html{font-size:62.5%},1rem=10px;

一个div宽度48px,那么换成rem:48px/10px=4.8rem;

宽度200px,换成rem:200px/10px=20rem;

宽度28px,换成rem:28px/10px=2.8rem;

  

移动端rem单位和px单位换算的更多相关文章

  1. 移动端:UI图px单位转换rem单位的计算方法

    简单说一下 em em 单位是相对于父元素字体大小来去定的.比方说: font-size:12px; 元素宽度是2em; 那么实际的宽度是 24px.(具体为什么,可以去查询资料,今天主讲rem) 简 ...

  2. 网页常见单位: px em pt % rem vw、vh、vmin、vmax , rem 使用

    1.网页常见单位:  px  em  pt    vw\vh   rem 1.1 px单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言  (最终解析单位) em单位名称为相对长度 ...

  3. 移动端rem距离单位的使用

    在做移动端开发的时候大家肯定会遇到适配问题,手机的屏幕大小有非常多的类别,使用传统的px距离单位已经无法满足我们的需要,于是rem便横空出世,他与百分比定位是比较像的,但是也是有一定的区别,在这里就跟 ...

  4. 移动端rem单位用法[转]

    标签: 1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单 ...

  5. 移动端rem单位用法

    1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单位.它们 ...

  6. 自动把网页px单位转换成rem

    自动把网页px单位转换成rem 首先在你的项目开发环境中安装2个插件 然后在vue.config.js文件引入并重新启动服务器 这样就配置成功了,一起看看效果

  7. px单位html5响应式方案

    移动端h5响应式方案最近这几年用得最多的最多的就是rem方案了.这个需要计算根元素的font-size来实现响应式. 但这种方案也有一个缺点,那就是font-size不为整数的时候一些字体使用rem单 ...

  8. CSS3 中的 rem 值与 px 之间的换算

    想给博客换个主题,到处找找不到满意的,最后发现默认主题 twentytwelve 越看越顺眼,于是就想动手改一下用. 看 CSS 文件的时候发现引入了一个新大小单位:rem,虽然 CSS 文件注释里有 ...

  9. 移动端 rem适配方法

    rem适配 一, 网易适配方法         屏幕宽度/设计稿rem宽度=页面动态font-size值(如:375/7.5=50)         document.documentElement. ...

随机推荐

  1. Oracle分组后取某列最大值的行数据

    select * from ( select last_comment, row_number() over(partition by employeeid,roadline,stationname ...

  2. 资源:template

    ylbtech-资源: 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://ylbtech.cnbl ...

  3. Behave + Selenium(Python)一:

    Behave 介绍:(来自T先生) 最近一个项目用了behave来做测试,因为之前没有接触过,所以写下最近的心得总结. 做自动化的人估计对selenium已经不是很陌生了,但是对于Behave工具,估 ...

  4. FZU2030 括号问题(dp)

    Problem 2030 括号问题 Accept: 398    Submit: 753Time Limit: 1000 mSec    Memory Limit : 32768 KB  Proble ...

  5. <c和指针>学习笔记4之字符串

    1 字符串基础 NUL字节是字符串的终止符,但它本身并不是字符串的一部分,所以字符串的长度并不包括NUL字节. (1)字符串长度 size_t strlen(char const * string)注 ...

  6. WordPress博客搭建指南

    WordPress是一个以PHP和MySQL为平台的自由开源的博客软件和内容管理系统.WordPress具有插件架构和模板系统.Alexa排行前100万的网站中有超过16.7%的网站使用WordPre ...

  7. ASP.NET学习笔记(四)CDOSYS邮件

    使用 CDOSYS 发送电子邮件 CDO (Collaboration Data Objects) 是一项微软的技术,设计目的是用来简化通信程序的创建. CDOSYS 是 ASP 中的内置组件.我们会 ...

  8. 关于unity中BindChannels的理解

    http://blog.csdn.net/wpapa/article/details/51794277 官方文档:http://docs.unity3d.com/Manual/SL-BindChann ...

  9. 51nod 1562 玻璃切割

      1562 玻璃切割 http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1562 题目来源: CodeForces 基准时间 ...

  10. HTTPRunner实践二——数据驱动

    基于文档http://cn.httprunner.org/advanced/data-driven/ 场景一:用例集+独立参数+参数列表 1.原始用例文件savePatient_01.yml - co ...