Should I use px or rem for web development?-CSS Tutorial-php.cn

Should I use px or rem for web development?

清浅

Release： 2019-04-09 10:19:50

Original

3077 people have browsed it

px is a unit used for fixed size, mostly used for PC-side pages; while rem is a unit relative to the HTML root element, suitable for simple mobile-side pages. In the project, you still need to choose the most suitable length unit according to the specific development requirements

In front-end development, the length unit in CSS is essential, because many attributes in CSS need to rely on the length unit to display various page elements and effects. Next, we will introduce two commonly used length units, rem and px, in the article. I hope it will be helpful to everyone.

Should I use px or rem for web development?

[Recommended course: CSS Tutorial】

px means pixels, which is relative to the monitor screen resolution. When setting the font size with px, the effect will be more stable and precise. However, there are some problems with using px, such as: IE browser cannot adjust the font size that uses px as the unit, so the page effect will change due to the device screen size

rem

rem is a new relative unit in CSS3. When using rem to set the font size for an element, it will be relative to the HTML root element. Through rem, we only need to modify the root element to adjust the size of all fonts proportionally, and at the same time, we can avoid the chain reaction of compounding font sizes layer by layer.

Example:

!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 用px单位-->
px:<p style="font-size:14px; text-indent:28px">
我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字</p>
 
<!-- 用rem单位，当前html的字体大小是16px-->
rem:<p style="font-size:14px; text-indent:1.75rem">
我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字</p>
</body>
</html>

Copy after login

The rendering is as follows:

Should I use px or rem for web development?

##How to choose px and rem

px is suitable for fixed sizes and is mostly used for PC-side pages, while rem is more suitable for mobile-side pages

rem achieves the display of content of the same size on screens of different sizes , but what users often need is that the page effect changes with the change of the screen size, so rem does not have any advantage on complex pages

So in development, we still have to decide based on the actual development situation, For example, some projects only need to be displayed on the PC side, so we can use px as the length unit. Some projects require responsive development, which depends on the specific situation.

Summary: The above is the entire article The content is there, I hope it will be helpful to everyone.

Reference for this article: https://www.html.cn/book/css/values/length/index.htm

The above is the detailed content of Should I use px or rem for web development?. For more information, please follow other related articles on the PHP Chinese website!