手机与html对应px,rem与px之间的换算（移动端）

最近因为工作接触到rem与px之间的换算，之前知道一些，不过还是比较笼统模糊，用起来不是很明白，后来自己查了点资料，以及亲自测试总算明白它们之间是怎么换算的了。

rem是一个相对值，它相对于根元素html，所以我们在使用的时候需要设置html的font-size值，内容大小就相对该值进行设置大小，比如，html的font-size为100px，内容的font-size想设置为20px，这换算为rem单位就是20/100=0.2rem。不过在开发中，html的font-size值会动态变化的，这样才可以自适应各种手机端，但我们可以把100px设置为最大值。html的font-size不只限于px单位，有的还使用了%，我在开发中就遇到这个，一开始我还不是了解，后来我查了一下才知道百分之几会有对应的像素值，比如62.5%对应的像素值是10px，75%对应的像素值是12px，这个是怎么算出来的呢？我们都知道，浏览器的默认字体大小是16px，那么16px对应的百分比就是100%，其他像素的百分比就是除以16得到的。

在没有设置html的font-size值时，rem就相对浏览器的font-size值，即16px。

使用rem有什么好处呢？rem既然是一个相对值，那么我们就可以改变html的font-size值来动态改变页面内容的字体大小，宽高度，间距等等，这样就有了一个自由缩放的效果，在移动端就可以适配不同手机屏幕，所以在移动端就使用rem作为单位。

另外：

涉及到rem与px的换算，就想到与rem相似的em，em也是一个相对单位，不过它是相对于使用em单位的元素的字体大小，有一个普遍的误解，以为em是相对于父元素的字体大小，其实，这是因为继承的原因，父元素的字体大小才可以影响em的值。

移动端适配方案以及rem和px之间的转换

背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

CSS3中的Rem值与Px之间的换算

bootstrap默认 html{font-size: 10px;} rem是一个相对大小的值,它相对于根元素, 比如假设,我们设置html的字体大小的值为html{font- ...

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

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

em与px之间的换算

任意浏览器的默认字体高度16px(16像素).所有未经调整的浏览器都符合:1em=16px.那么12px=0.75em,10px=0.625em.为了简化font-size的换算,需要在css中的bo ...

em,pt和px之间的换算

任意浏览器的默认字体高度16px(16像素).所有未经调整的浏览器都符合: 1em=16px.那么12px=0.75em,10px=0.625em.为了简化font-size的换算,需要在css中的b ...

rem、em、px之间的转换

rem是相对于根元素,这样就意味着,我们只需要在根元素确定一个参考值,这个参考值设置为多少,完全可以根据您自己的需求来定. 我们知道,浏览器默认的字号16px,来看一些px单位 ...

mobile css & rem & em & px

mobile css & rem & em & px 1 rem === 16px 任意浏览器的默认字体高都是 16px, 所有未经调整的浏览器都符合: 1em=16px, 那 ...

rem与px的转换

rem与px的转换 引用自http://caibaojian.com/rem-and-px.html A-A+ 前端博客•前端开发教程•rem•3702View0 rem是相对于根元素

EM vs REM vs PX，为什么你不应该”只用px“”

Actually this artical is from other person's opnion ,i just put it into chinese,and this means a ver ...

随机推荐

5.5---整数A转成整数B(CC150)

自己的: public static int calcCost(int A,int B){ int ans = 1; int temp = A ^ B; while(temp != 1){ if(te ...

使用HtmlAgilityPack抓取网页数据

XPath 使用路径表达式来选取 XML 文档中的节点或节点集.节点是通过沿着路径 (path) 或者步 (steps) 来选取的. 下面列出了最有用的路径表达式: nodename:选取此节点的所有 ...

Entityframework常用命令

Enable-Migrations 启用Migration数据迁移 Add-Migration migrationname 添加一个migration Update-Database –TargetM ...

MySQL 에서 root 암호 변경하기

먼저 터미널이나 SSH를 이용해 접속합니다. 그리고 리눅스 쉘상에서 다음과 같이 입력합니다. [mysqladmin을 이용한 암호변경] 형식) root계정]$mysqladmin -u ...

yii cgridview 默认的筛选如何做成选择框

效果图 参照 http://www.yiiframework.com/doc/api/1.1/CGridColumn http://www.yiiframework.com/doc/api/1.1/C ...

Maven工程搭建spring boot+spring mvc+JPA

添加Spring boot支持,引入相关包: 1.maven工程,少不了pom.xml,spring boot的引入可参考官网: org.s ...

python官网几个下载文件的区别

进入python官方,下载python编译器,提供了如下几个版本进行选择,这些版本分别是什么意思呢? Python 3.7.1 - 2018-10-20 Download Windows x86 we ...

TCP/IP协议--TCP协议概括和TCP连接的建立和终止

TCP提供一种面向连接的.可靠的字节流服务.面向连接指,发送和接收方在交换数据前必须建立一个TCP连接.顺便说下,一个TCP连接只有两方,因此广播和多播是不能应用于TCP的.字节流指,两个应用程序通过 ...

XCode快捷键 转

1. 文件 CMD + N: 新文件CMD + SHIFT + N: 新项目CMD + O: 打开CMD + S: 保存CMD + SHIFT + S: 另存为CMD + W: 关闭窗口CMD + S ...

C语言中库函数strstr的实现

在C语言中库函数strstr()函数表示在一个字符串str1中查找另一个字符串str2,如果查到则返回str2在str1中首次出现的位置,如果找不到则返回null. char* strstr(char ...