移动web开发rem,em及像素知识详解

最新推荐文章于 2025-03-22 21:55:21 发布

原创最新推荐文章于 2025-03-22 21:55:21 发布 · 476 阅读

CC 4.0 BY-SA版权

文章标签：

38 篇文章

订阅专栏

本文深入探讨了移动设备与PC设备屏幕的差异，包括屏幕尺寸、分辨率及长度单位的使用，如px、em、rem等，并解析了物理像素与CSS像素的关系，以及视口在网页布局中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

web开发中可以使用px(像素),em，rem,pt(点),in(英寸),cm(厘米)作为长度单位，但是我们最常用的还会px作为长度单位
em: 相对长度单位，其参照当前元素字体大小，如果当前元素未设置字体则会继承其祖先元素字体大小例如使用em单位时，像素值是em值乘以使用em单位的元素的字体的大小(例如：有一个div的字体大小是18px，那么10em就等同于10*18=180px)
rem: 相对长度单位，其参照根元素(html)字号大小，使用rem单位，他们转化的像素大小取决于根元素(heml元素)的字体大小，根元素字体大小乘以rem的值(根元素的字体大小16px，10rem就等同于10*16=160px)，
我们可以将长度单位划分为相对长度单位和绝对长度单位

物理像素：物理像素指的是屏幕渲染图像的最小单位，属于屏幕的物理属性，不可人为进行改变，其值大小决定了屏幕渲染图像的品质，
获取屏幕的物理像素尺寸
- window.screen.width;
- window.screen.height;
CSS像素指的是通过CSS进行网页布局时用到的单位，其默认值(PC端)是和物理像素保持一致的（1个单位的CSS像素等于1个单位的物理像素），但是我们可通缩放来改变其大小
我们需要理解的是物理像素和CSS像素的一个关系，1个物理像素并不总是等于一个CSS像素，通过调整浏览器缩放比例，

视口（viewport）是用来约束你网站中最顶级块元素的，即它决定了的大小。

通过以往CSS的知识，我们都能理解<html>的大小是会影响到我们的网页布局的，
而viewport又决定<html>的大小，所以viewport间接的决定并影响了我们网页的布局。

获取viewport的大小
- document.documentElement.clientWidth;
- document.documentElement.clientHeight;