博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
rem计算推导
阅读量:5823 次
发布时间:2019-06-18

本文共 537 字,大约阅读时间需要 1 分钟。

rem适配布局
1)问题:px转rem
输入:设计稿宽度uiWidth,设计稿uiPx,移动端屏幕mWidth
输出:以rem为单位的mRem
预备知识:
1.rem是css3单位,其大小根据根元素上的font-size决定。
2.浏览器能显示最小的font-size为12px。所以一般是屏幕宽度除以10
2)rem本质上是
等比缩放,公式为:
uiWidth    mWidth
-------- = ----------
  uiPx          mRem
变形:

               mWidth * uiPx                                   10                uiPx

mRem = ------------------ * (mWidth/10) * --------- = -------------- * rem
                uiWidth                                           mWidth    uiWidth/10  

注意:
rem = mWidth/10 当做一个单位
mWidth = document.documentElement.getBoundingClientRect().width

一般uiWidth = 750;所以也可简化为:
                uiPx
mRem = ------- * rem
                 75

3)总结: rem本质上是对屏幕的划分,vw就是出来解决这种问题的单位,但是兼容性不好。

转载地址:http://ihbdx.baihongyu.com/

你可能感兴趣的文章
数据分析相关
查看>>
Python LDAP中的时间戳转换为Linux下时间
查看>>
微信小程序蓝牙连接小票打印机
查看>>
环境错误2
查看>>
C++_了解虚函数的概念
查看>>
全新jmeter视频已经上架
查看>>
Windows 8下如何删除无线配置文件
查看>>
解决Windows 7中文件关联和打开方式
查看>>
oracle系列(五)高级DBA必知的Oracle的备份与恢复(全录收集)
查看>>
hp 服务器通过串口重定向功能的使用
查看>>
国外10大IT网站和博客网站
查看>>
android第十一期 - SmoothSwitchLibrary仿IOS切换Activity动画效果
查看>>
zabbix 批量web url监控
查看>>
MongoDB CookBook读书笔记之导入导出
查看>>
shell如何快速锁定所有账号
查看>>
HTML 5实现的手机摇一摇
查看>>
Linux 文件IO理解
查看>>
Ninject 2.x细说---2.绑定和作用域
查看>>
30个非常时尚的网页联系表单设计优秀示例
查看>>
使用membership(System.Web.Security)来进行角色与权限管理
查看>>