Web Front-endCSS TutorialIn-depth understanding of rem in CSS and layout methods on mobile terminalsIn-depth understanding of rem in CSS and layout methods on mobile terminals
I believe everyone is already familiar with px, but when it comes to rem, some people don’t know it. Today’s article mainly introduces what rem and em are, and their layout methods in mobile terminals. You can refer to them if necessary. I hope it will be helpful to you.
1. What is rem?
rem is a newly added unit attribute (font size of the root element) in CSS3, which is a unit that is converted according to the font size of the root node of the page. root! ! ! ! ! ! ! ! ! The root node, which is html.
Example: (The root node in the example below is html, and its font size is 100px, so the rem set for the elements below the root node is 1rem=100px.)
The initial value of rem It is 16px, which means that when the font-size of the root node is not set, 1rem=16px
<html>
<head>
<style>
html,body{ font-size: 100px; }
header{ height: 1rem;width: 1rem; }
</style>
</head>
<body></body>
<header></header>
</html>2. What is em
em is also a relative unit , the em unit is the unit that is converted based on the font size of the parent element.
1. The value of em is not fixed;
2. Em will inherit the font size of the parent element.
Parent node
Example:
<header style="font-size:100px;">//父元素的字体大小是100px
<div style="height:1em;width:1em;"></div>//所以子元素的em是1em=100px；
</header>3. Mobile page development skills:
First investigate the user’s usage and summarize the general What devices are some users using?
For example: Most of my current users use three types of mobile phones. We first find out the resolution of each mobile phone from the Internet.
List them all, and then write a media query (because different mobile phones have different resolutions, so if you use pixels, the display will be the same, for example~ For example, if children are eating, the canteen gives the children a label. It comes with a steamed bun, but some children eat a lot, and some eat a small amount, so they may not eat enough or they can’t eat, resulting in waste. How to avoid this situation, so the cafeteria aunt came up with an idea. Little friends can receive one steamed bun, half a steamed bun weighing less than 50 kilograms, two steamed buns weighing more than 60 kilograms, these three distribution methods.)
My user groups are probably these three. Device
Device name resolution estimate font size rem to px conversion
iphone5 320568 font-size: 12px; 1rem=12px
iphone6 375667 font-size: 14px; 1rem=14px
iphone6 Plus 414* 736 font-size: 16px; 1rem=16px
First take out an intermediate device to do basic style writing
The initial writing can be done in px according to the design drawing (that is, select it first The size of steamed buns)
Write a set of templates first, and then write media queries for other devices based on this template
Prioritize writing media query tags on the page
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
width - the width of the viewport device
height - the height of the viewport device
initial-scale - the initial scaling ratio
minimum-scale - the minimum ratio that the user is allowed to zoom to
maximum-scale - the user is allowed to zoom The maximum proportion to
user-scalable - whether the user can manually scale it
Assigned above, write the media query in this way
html,body{ height: 100%; margin : 0; padding: 0; font-size: 14px;}//Note that the initial style must be written at the top! ! ! ! If written at the bottom of the media query, it will cover the media query above (because it is a cascading style sheet~)
@media screen and (max-width:320px ) {
html{font-size: 12px;}
}
@media screen and (min-width:321px) and (max-width:750px ) {
html{font-size: 14px;}
}
@media screen and (min-width:751px ) {
html{font-size: 16px;}
}Because a set of initial templates are written above, because the initial templates are all px, in the article At the beginning, we emphasized why px cannot be used, so we need to convert the px in the page into the corresponding rem value
Example:
header{
width:140px;//转化为10rem，因为我们是基于最中间的设备做的，中间设备的font-size：14px，所以140px=10rem。
}Change all the height and width of px to This completes the adaptation of rem to three devices.
The above is the detailed content of In-depth understanding of rem in CSS and layout methods on mobile terminals. For more information, please follow other related articles on the PHP Chinese website!
Simulating Mouse MovementApr 22, 2025 am 11:45 AMIf you've ever had to display an interactive animation during a live talk or a class, then you may know that it's not always easy to interact with your slides
Powering Search With Astro Actions and Fuse.jsApr 22, 2025 am 11:41 AMWith Astro, we can generate most of our site during our build, but have a small bit of server-side code that can handle search functionality using something like Fuse.js. In this demo, we’ll use Fuse to search through a set of personal “bookmarks” th
Undefined: The Third Boolean ValueApr 22, 2025 am 11:38 AMI wanted to implement a notification message in one of my projects, similar to what you’d see in Google Docs while a document is saving. In other words, a
In Defense of the Ternary StatementApr 22, 2025 am 11:25 AMSome months ago I was on Hacker News (as one does) and I ran across a (now deleted) article about not using if statements. If you’re new to this idea (like I
Using the Web Speech API for Multilingual TranslationsApr 22, 2025 am 11:23 AMSince the early days of science fiction, we have fantasized about machines that talk to us. Today it is commonplace. Even so, the technology for making
Jetpack Gutenberg BlocksApr 22, 2025 am 11:20 AMI remember when Gutenberg was released into core, because I was at WordCamp US that day. A number of months have gone by now, so I imagine more and more of us
Creating a Reusable Pagination Component in VueApr 22, 2025 am 11:17 AMThe idea behind most of web applications is to fetch data from the database and present it to the user in the best possible way. When we deal with data there
Using 'box shadows' and clip-path togetherApr 22, 2025 am 11:13 AMLet's do a little step-by-step of a situation where you can't quite do what seems to make sense, but you can still get it done with CSS trickery. In this
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
Notepad++7.3.1
Easy-to-use and free code editor
Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.
