开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

我应该在CSS中使用px或rem值单位吗？

在CSS中，px和rem是两种常用的值单位，它们在不同方面有各自的优势。

px（像素）是一种绝对长度单位，它表示的是屏幕上的一个点。使用px作为单位可以让元素的大小固定不变，方便控制精确的尺寸。但是，px在不同设备上可能会导致元素大小不一致，不利于响应式设计。

rem（根相对单位）是一种相对长度单位，它基于根元素（通常是<html>元素）的字体大小进行计算。使用rem可以让元素的大小相对于根元素的字体大小进行缩放，方便实现响应式设计。但是，rem在实际使用中需要注意设置根元素的字体大小，否则可能会导致元素大小不符合预期。

总的来说，选择使用px还是rem取决于具体的需求和场景。如果需要精确控制元素的大小，可以使用px；如果需要实现响应式设计，可以使用rem。在实际开发中，可以根据需要灵活运用这两种单位。

相关搜索:如何使用SASS变量将px值添加到CSS中的rem值？我应该在GitHub或RubyGems中托管宝石吗？我应该在C++中评论声明或定义吗？我应该在Swift中使用CollectionView解构或多个镜像吗？我应该在会话中存储视图模型或域模型吗？我应该在rest请求和/或响应中使用jpa实体吗我应该在Android上使用JavaCV或OpenCV的java库吗？我应该在Home或Eclipse Workspace中存储git存储库吗？我应该在Kotlin数据类中编写toJson或fromJson方法吗？我应该在轨道上使用ruby中的has_one或belongs_to吗？我应该在输入字段中对值进行html编码吗？我应该在Ruby on Rails中使用引号或冒号作为会话密钥吗？在此设置中，我应该在tabHost中使用tabHost吗？如果多次使用它,我应该在jQuery中缓存$(this)吗？我应该在HTML5中使用<![CDATA [...]]>吗？我应该在我的.Net核心Web API或服务接口中使用DbContext吗？我应该在C#或Delphi中启动我的新共享软件项目吗？我应该在Laravel 5中使用什么依赖注入或绑定？我应该在测试时在Factory girl或spec文件中存根模型吗？我应该在reactjs中对返回类型的操作使用分派吗？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

5个需要避免的CSS错误

正如我们今天所知，CSS语言是web的一个重要组成部分。它使我们有能力绘制元素在屏幕、网页或其他媒体中的展示方式。

01

论CSS中可使用的font-size的长度单位

本文由Tom Hodgins审阅。感谢SitePointer的编审们，帮助SitePoint提供最优质的内容给读者！

02

rem与em详解

em 和 rem都是灵活、可扩展的单位，由浏览器转换为像素值，具体取决于您的设计中的字体大小设置。如果你使用值 1em 或 1rem，它可以被浏览器翻译成从16px到 160px 或其他任意值。

03

一文学会使用 CSS 中的 min(), max(), clamp() 以及它们的使用场景用例

2020年4月8日，Firefox浏览器支持了 CSS 比较函数（min()，max()，clamp()），这意味着现在所有主流浏览器都支持它们。这些CSS函数最大的作用就是可以为我们提供动态布局和更灵活设计组件方法。

02

在 React 中使用 Storybook，构建强大的自定义 UI 组件

虽然像React这样的基于组件的UI库简化了web开发，但它们也引入了测试和调试等新的复杂性。

01

布局常用解决方案对比(媒体查询、百分比、rem和vw/vh）

简要介绍：前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出发，分析了px在移动端布局中的不足，接着介绍了几种不同的自适应解决方案。

04

细说移动端经典的REM布局与新秀VW布局

说到前端页面的布局方案，可以从远古时代的Table布局说起，然后来到 DIV+CSS布局，之后有了Float布局，Flex布局，Column布局，Grid布局等等。

04

前端进阶第8-9周打卡题目汇总

前端基础打卡已经基本结束了,内容从css基础,动画,js基本算法,作用域,闭包,节流防抖这些基本的web知识大家有没有都掌握了呢?年后会出一个进阶路线规划图,希望笔者可以带着大家,一起进步,一起成长.

04

深入学习下 CSS 间距相关的知识

https://ishadeed.com/article/spacing-in-css/

04

使用postcss-plugin-px2rem和postcss-pxtorem(postcss-px2rem)-px自动转换rem的配置方法-vue-cli3.0

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

04

为什么你永远不应该在CSS中使用px来设置字体大小

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

02

学姐叫我看 CSS 新出的容器查询，然后把公共组件重构成响应式的！

在前端开发中经常需要按不同屏幕尺寸来进设计达到PC和移动端响应式。我们一般使用CSS媒体查询来检测视口宽度或高度，然后根据该模式改变设计。这就是在过去10年中设计Web布局的方式。

03

CSS 中calc()的完整指南(一)

CSS tricks上有一系列的完整指南文章，我后面会翻译这些内容，更新不会一下子完成，而是会分成几个，防止自己因看到文章过长而放弃翻译。

01

前端-彻底学会CSS布局-这是最全的

其实，我们可能经常在聊组件化，咋地咋地。但是，回过头来思考一下，如果你看到一张设计稿的时候，连布局都不清不楚，谈何组件化呢。所以，我们需要在分清楚组件之前，先来分清楚布局。废话说了这么多，只是想告诉你，布局这个东西真的很重要。本篇内容概括了布局的基础+基本的PC端布局+移动端适配等内容。如果你喜欢我的文章，欢迎评论，欢迎Star~。欢迎关注我的github博客

02

聊一聊CSS中的长度单位

CSS中有很多属性可以接受长度值，比如： width, height, margin, padding, border-width, font-size, text-shadow。因为使用场景多，因此CSS也提供了许多长度单位。有的是日常生活中使用的单位，比如：厘米（cm）和英寸（in）；有的是印刷行业使用的单位，比如：point（pt）和pica（pc）；有的是专门为CSS发明的单位，比如：px。

07

CSS 计算属性 calc()的完整指南（下）

从之前的文章：CSS 计算属性 calc()的完整指南(一），我们可以学习到几个方面：

02

提高 CSS 的 5 个技巧

所以现在内容框包含填充和边框，这导致内容框从中消失，200px -> 160px因为填充和边框的总大小是40px.

02

CSS尺寸单位介绍

前端开发过程中，尺寸单位是我们必须用到的，下面我们对css中常见的几种尺寸单位px,em,rem,rpx进行逐一介绍在这之前，需要先对几个概念进行普及介绍

03

CSS尺寸单位介绍

前端开发过程中，尺寸单位是我们必须用到的，下面我们对css中常见的几种尺寸单位px,em,rem,rpx进行逐一介绍在这之前，需要先对几个概念进行普及介绍

02

IT课程 CSS基础 021_值类型、单位、大小、颜色

在CSS中，长度单位用于表示尺寸和距离，可以应用于各种属性，如宽度、高度、边距、填充等。

01

CSS常用单位

CSS的长度单位主要有%、px、in、cm、ch、mm、ex、pt、pc、em、rem、vw、vh、vmin、vmax，按照单位的计算方式大致可以分为绝对长度单位、相对长度单位、百分比单位。

02

Web 前端利器Emmet 的CSS 用法总结

承接上文《Web 前端利器Emmet 的HTML用法总结》，这篇主要是Emmet 的 html的好基友——CSS 的用法。原文来自tutsplus，由w3cplus 翻译，感谢所有原作者。属性 CS

05

前端课程——颜色与单位

CSS 中的前景色和背景色就是 color 和 backgorund-color 两个属性，其中 color 属性表示前景色，background-color 属性表示背景色。

01

Web 技术：CSS最小和最大(宽度/高度)知识点及优缺点

通常，我们希望限制元素相对于其父元素的宽度，同时使其具有动态性。因此，有一个基础宽度或高度的能力，使其扩展的基础上，可用的空间。比如说，我们有一个按钮，它的宽度应该是最小的，不应该低于它的宽度。这就是最大和最小属性变得方便的地方。

02

CSS REM - 什么是 REM？

REM 代表 font size of the Root element，即 Root EM。REM 是值/数据类型长度的值。长度的另外一个值是我们老朋友 - 像素 px。每个接受长度作为值的属性都接受 REM 值。比如：margin, padding, font-size 等。

01

vue中px自动转化为rem

很多人写这种小工具文件会习惯性的加上闭包，这个其实是没有必要的。ES6 中每个文件都是单独的一个模块。

02

rem适配移动端的原理及应用场景

我们h5项目终端适配采用的是淘宝那套《Flexible实现手淘H5页面的终端适配》方案。主要原理是rem布局。最近和别人谈弹性布局原理，发现虽然已经使用了那套方案很久，但是自己对rem的理解很含糊，包括vw、vh等。所以打算写博客总结一下，以加深理解。

02

探讨移动端适配

用截图工具（截图工具测得的像素等于物理像素）测得CSS中的1px 的等于物理像素1px的那么他们的比值就是1：1

01

移动端H5开发之页面适配篇

最近开发并上线了一款H5项目，在这里想和大家分享一下关于项目中使用到的移动端适配技巧，如果对你们有所帮助的话，就多多点赞收藏😃各位看官老爷别着急，在讲页面适配之前，我们先来捋一捋viewport（视口）的概念~在Web浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的UI，菜单栏等——即指你正在浏览的文档的那一部分。一般我们所说的视口共包括三种：布局视口、视觉视口和理想视口1.1 布局视口图片在移动端，布局视口被赋予一个默认值，大部分为980px，这保证PC的网页可以在手机浏览器上呈现，用户可以手动对网

09

我对移动端适配的了解

[总结]我对移动端适配的了解不知不觉做前端已经两年了，从PC端，移动端，微信小程序一路走来到今天刚刚开放注册的快应用(手机厂商对抗小程序的新技能,所以在注册时用的是qq邮箱的话要去垃圾箱里才能找到注册邮件)，对于前端圈日新月异的磅礴发展对于大前端发展是喜闻乐见的，这次的快应用的手机厂商们为其开放了应用入口和系统推广引流入口。这些新能力为前端开发者们带来更强的作战能力。我们在开发PC站时经常在浏览器兼容问题上耗费巨大的时间，到了移动端，面对webkit内核的Safari与Chrome会舒心很多。b

03

移动开发-媒体查询布局

每种媒体类型都有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格，暂且了解三个，注意他们要加小括号包含

03

Clamp()、Max() 和 Min() CSS 函数的用例

英文 | https://ishadeed.com/article/use-cases-css-comparison-functions/

02

pt、rpx、px、em、rem、%、vh、vw的区别

前端有很多尺寸单位，比如: pt、rpx、px、em、rem、%、vh、vw等，我们需要深入了解它们的工作原理和使用情况。以下是详细的描述以及它们之间的区别：

03

再看CSS长度单位使用，做到胸有成竹

涉及到网站需同时兼容 PC 和移动端情况更甚：px、百分比、em、rem、vw etc.

01

移动适配的长度单位

例：html中字体尺寸为 20px，盒子宽度为 5rem，则最后显示的盒子宽度为 100px。

02

移动web开发之rem适配布局

比如，根元素(html)设置font-size=12px;非根元素设置width:2rem;则换成px表示就是24px.

02

前端成神之路-移动web开发_rem布局

比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。

02

webpack4.0各个击破（2）—— CSS篇

以webpack4.0版本为例来演示CSS模块的处理方式，需要用到的插件及功能如下：

03

rem适配布局

@media mediatype and | not lonly (media feature) {

03

你真的会用css3的rem吗？

之前做移动端开发的时候，都是用rem对DOM元素进行大小设置的。每次用的时候都是去网上搜，然后copy到自己的项目中，没有真正理解网友的代码含义。这次终于认真的学习了一下。

02

vue项目移动端、pc端适配方案

flexible会为页面根据屏幕自动添加标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值。

03

展望未来：使用 PostCSS 和 cssnext 书写 CSS

原文链接：A look into writing future CSS with PostCSS and cssnext 译者：nzbin 像 Twitter，Google，BBC 使用的一样，我打算对 CSS 后处理器 PostCSS 的世界一探究竟。 PostCSS是什么？ PostCSS 是使用 javascript 插件转换 CSS 的后处理器。PostCSS 本身不会对你的 CSS 做任何事情，你需要安装一些 plugins 才能开始工作。这不仅使其模块化，同时功能也会更强。它的工作原理就是

09

rem适配布局

rem 是根 em(root em)的缩写，是相对于根元素(html 元素)的字体大小。

03

响应式布局的实现

响应式布局指的是同一页面在不同屏幕尺寸或者在不同的设备下有不同的布局，能够在大屏设备以及小屏设备获得更好的浏览体验，简单来说就是页面适应终端而无需为每个终端制作单独的页面。

03

less 基础

Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也成为CSS预处理器。

02

CSS新特性的知识

CSS初学感觉很简单，但随着学习的深入才感觉CSS的水由多深，平常总会遇到各种坑，先总结一些经常遇到的坑

01

移动端Web App 的屏幕适配方法(总结)

移动端web页面的开发，由于手机屏幕尺寸、分辨率不同，或者需要考虑横竖屏问题，为了使得web页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。

01

不要再用js设置rem了，现代css自适应方案来了

在做移动端适配的时候，很多人第一反应就是使用 rem ，通过动态设置 html 上的 font-size 来进行页面的自适应，基本原理就是 rem 表示的是 root em ，页面中所有的值都是基于html上的 font-size ，相对的进行对应的变化

04

来看看 px、em、rem的介绍和使用吧！

em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

02

H5页面适配及微信默认字号问题的最佳实践

移动端适配最简单的是通过js动态计算 viewport 的缩放值，但过于粗暴，会导致页面图片文字失真模糊。目前，移动端页面一般使用 rem 或 vw / vh 开发会较为方便，下面以 rem 为例：

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭