关于px/rem/vw 之间的换算关系

搞移动端有段时间了，从最开始为了适应移动端，前辈就告诉我使用px值除以3.75换算成vw,一直稀里糊涂的谨遵教诲，却不知道为什么要这样做，今天有时间查了资料，自己理解去一下

一：首先理解三个单位的区别

１，px，浏览器像素，一种相对单位，是相对于显示器屏幕分辨率而言

２，rem是css3的相对单位，相对于html根元素的字体大小（font-size）来计算的长度单位，可以设置，默认16px

3，vw ,vh相对视窗口的宽度或者高度eg：500px/100vw,长度和宽度等于窗口宽度的１/100

一般手机端的长度是实际设计过程中的2倍，一个手机750 * 1200分辨率，设计中为375px * 600px

vw即是viewwidth vh既是viewheight的缩写，100vw是一个屏幕的宽度，100ｖｈ是一个屏幕的高度

换算1/100*375=3.75 所以 1vw=3.75px;换算１/100*600=6 所以　1vh=6px;

将html 设置font-size为合适的vw值适配移动端的设备

rem可以使得编写的移动端网页尽可能地适配设备，而不会出现在不同手机显示效果不同的现象

px浏览器像素，设置ＨＴＭＬ（font-size:37.5),设计图375px*600px,1rem=37.5vw=100px

关于px/rem/vw 之间的换算关系相关推荐

Android中dp、sp、px、pt之间的换算关系
Android中dp.sp.px.pt之间的换算关系换算公式 1 dp = (dpi/160) px; 1 in = 72 pt = dpi dp; 1 pt = dpi/72 dp: 当dpi为1 ...
css中的单位换算_CSS单位px、em、rem及它们之间的换算关系
作者:WangMin 格言:努力做好自己喜欢的每一件事国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者的区别与优势是什么?接下来我们就来学习一下吧! 单位px.em.rem分 ...
位（bit）、字节(Byte)、MB(兆位)之间的换算关系
文章目录简述: 位(bit).字节(Byte).MB(兆位)之间的换算关系 B是Byte的缩写,B就是Byte,也就是字节(Byte):b是bit的缩写,b就是bit,也就是比特位(bit). B ...
网络流量顶峰到达了1000M，单位是KBPS，我的网卡是万兆网卡，我想知道这两个之间的换算关系是什么
问题描述:我看到监控中我的网络流量顶峰到达了1000M,单位是KBPS,我的网卡是万兆网卡,我想知道这两个之间的换算关系是什么问题解决:①设备的的数据交换能力,也叫"带宽",单位 ...
【MathType】彻底解决公式大小与文章文字大小不统一（含字体的字号与磅(pt)和像素（px）之间的换算关系）
文章目录 1.大小不一致原因 2.字体的字号与磅(pt)和像素(px)之间的关系 3.彻底解决方法在使用Mathtype的时候,有时候会出现公式大小不统一的情况,这时候手动去拖动大小的话非常不理想, ...
字节、KB、MB、GB 之间的换算关系 Bps和bps的区别
位:"位(bit)"是电子计算机中最小的数据单位.每一位的状态只能是0或1. 字节:8个二进制位构成1个"字节(Byte)",它是存储空间的基本计量单位.1个字 ...
像素、厘米、英寸之间的换算关系
像素.厘米.英寸之间是有换算关系的! 请看:1200*768像素的图片用画图程序打开后,再转换一下为31.75*20.32厘米,12.50*8英寸可以看出:1英寸=96像素,1厘米=37.7952 ...
数据存储单位之间的换算关系
单位换算关系 Byte(字节) 1Byte=8bit KB(Kilobyte,千字节) 1 KB=1024 Byte MB(Megabyte,兆字节) 1 MB=1024 KB GB(Gigabyt ...
CSS单位px、em、rem及它们之间的换算关系
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章博客地址

关于px/rem/vw 之间的换算关系

关于px/rem/vw 之间的换算关系相关推荐

最新文章

热门文章