一、vw px rem em是什么

1.vw:就是相对视口宽度(Viewport Width)。1vw = 1% * 视口宽度。也就是说,一个视口就是100vw。

2.px:px应该是在css中使用最为普遍的单位了吧。px是屏幕设备物理上能显示出的最小的一点。这个点不是固定宽度的,是相对长度单位。在桌面浏览器中,1个像素往往是对着电脑屏幕的1个物理像素,但是在移动端,随着Retina屏的流行,分辨率提高了。css中的1px并不等于设备的1px。比如苹果三手机,分辨率是320 x 480。苹果四手机,变成了640 x 960,但是苹果四手机的实际屏幕尺寸并没有变化。这时候的1个css像素就是等于两个物理像素。

3.rem:是相对单位,相对于html的字体尺寸。

4.em:所有现代浏览器下,默认字体尺寸都是16px。这时,1em = 16px。em会继承父级迟钝,也是相对单位。

二、vw px rem之间的换算

1.我们假设pad的设计稿是以1920px为标准的。那么:
100vw = 1920px
1vw = 19.2px
我们想要: 1rem = 100px(这样方便我们在写代码的时候换算)
那么:
100px = 100vw / 19.2 = 1rem
所以:
1rem = 5.208vw。
这时候,我们只要给html的根元素设置:
font-size: 5.208vw即可。

2.同理的,手机端我们假设设计稿是以750px为标准的,那么:
100vw = 750px
1vw = 7.5px
我们想要: 1rem = 100px
那么:
100px = 100vw / 7.5 = 1rem
那么:
1rem = 13.33vw

好啦,本篇文章到此为止~

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=h0k21kjcbaa

移动端的vw px rem之间换算的更多相关文章

  1. px与rem的换算

    在线转化工具: http://www.ofmonkey.com/front/rem rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值,这个参考值设置为多少, ...

  2. 从理解开始 谈谈px rem 和 em 的区别与联系

    概述 古语有云,没有规矩则不成方圆.秦灭六国之后为了促进国内生产力的发展,也是大力推进全国度量衡的统一.车同轨,书同文.与"尺寸"相关的问题(手动滑稽),从古至今一直为人们所关注. ...

  3. CSS中的rem的换算

    rem好像也是一个相对大小的值,它是相对于根元素<html>,比如假设,我们设置html的字体大小的值为 html{font-size: 87.5%;}(也就是14px,这是twentyt ...

  4. 移动端页面开发适配 rem布局原理

    主题 HTML移动端页面开发适配 rem布局原理 什么是适配,为什么要适配 我们拿到的设计图一般是以640,750,1080分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同 ,适 ...

  5. 移动端适配方案(rem+flex)

    为什么用rem不用px? 主流:各大网站的移动版绝大多数都是用的rem.   移动端屏幕分辨率差别太大:最低适配的iPhone6,分辨率仅为750*1334.而现在市面上大多数手机,都达到了1080* ...

  6. html5 750 REM JS换算方法

    在安卓手机低版本浏览器,如果进页面快速执行的话会出现计算宽度不正确的情况,解决方法是放在onload方法里面执行,但这种解决方式在一些高版本浏览器中会出现页面闪动,所以使用判断浏览器版本的方式来解决, ...

  7. vue 移动端屏幕适配 使用rem

    要想移动端适配 并使用 rem  您需要先看这篇文章,配置好less ➡️ 在vue 中使用 less,就可以使用rem了 如果项目已经开发的差不多了,没有用到rem 又要使用rem,您用这招. po ...

  8. vw+vh+rem响应式布局

    科普下: 平时很少用的css单位: 1.长度单位: rem:相对长度单位.相对于根元素(即html元素)font-size计算值的倍数; vw:相对于视口的宽度.视口被均分为100单位的vw; vh: ...

  9. em与rem之间的区别以及移动设备中的rem适配方案

    em与rem之间的区别: 共同点: 它们都是像素单位 它们都是相对单位 不同点: em大小是基于父元素的字体大小 rem大小是基于根元素(html)的字体的大小 实例: <!DOCTYPE ht ...

随机推荐

  1. python3中collections模块(转)

    https://www.cnblogs.com/zhangxinqi/p/7921941.html

  2. 【FAQ】接入HMS Core推送服务过程中一些常见问题总结

    HMS Core 推送服务(Push Kit)是华为提供的消息推送平台,建立了从云端到终端的消息推送通道.开发者通过集成推送服务,可以向客户端应用实时推送消息,构筑良好的用户关系,提升用户的感知度和活 ...

  3. Mysql备份方案总结性梳理

    Mysql备份方案总结性梳理   服务器 mysql 日志 数据库 配置 Mariadb binlog   mysql数据库备份有多么重要已不需过多赘述了,废话不多说!以下总结了mysql数据库的几种 ...

  4. nginx配置负载均衡分发服务器笔记

    记录学习搭建nginx负载均衡分发服务器的过程笔记 1.服务器IP:192.168.31.202(当前需要搭建nginx负载均衡分发的服务器)安装好nginx 2.在服务器IP:192.168.31. ...

  5. CF1476D题解

    场上 \(O(n)\) 切掉的一道挺水的题. 首先向左走和向右走,一个很明显的结论是,如果向左走了一段距离又回到原点,那么方向是不会变的,所以只需要求出能够向左走的最远距离和向右走的最远距离,加起来即 ...

  6. Re:《Unity Shader入门精要》13.3全局雾效--如何从深度纹理重构世界坐标

    如何从深度纹理重构世界坐标 游戏特效,后处理是必不可少的,而后处理经常需要我们得到当前画面的像素对应世界空间的所有信息. 思路 通过深度纹理取得NDC坐标,然后再通过NDC坐标还原成世界空间坐标 // ...

  7. sql注入之简要注入

    #mysql简要注入流程 mysql注入简要流程如下图: 由于还没学习完先结合sqlilabs的第一关讲解信息收集的一部分和数据注入的information_schema的有据查询. #sqli-la ...

  8. 面向对象编程(C++篇4)——RAII

    目录 1. 概述 2. 详论 2.1. 堆.栈.静态区 2.2. 手动管理资源的弊端 2.3. 间接使用 2.4. 自下而上的抽象 3. 总结 4. 参考 1. 概述 在前面两篇文章<面向对象编 ...

  9. JDBC中大数据量的分页解决方法?

    最好的办法是利用sql语句进行分页,这样每次查询出的结果集中就只包含某页的数据内容. sql语句分页,不同的数据库下的分页方案各不一样,下面是主流的三种数据库的分页sql: oracle: selec ...

  10. 开启 Spring Boot 特性有哪几种方式?

    1)继承spring-boot-starter-parent项目 2)导入spring-boot-dependencies项目依赖