Web Front-end
CSS Tutorial
In-depth understanding of rem in CSS and layout methods on mobile terminals
In-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!
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
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Solve the problem of multi-touch points on Vue mobile terminal
Jun 30, 2023 pm 01:06 PM
In mobile development, we often encounter the problem of multi-finger touch. When users use multiple fingers to swipe or zoom the screen on a mobile device, how to accurately recognize and respond to these gestures is an important development challenge. In Vue development, we can take some measures to solve the problem of multi-finger touch on the mobile terminal. 1. Use the vue-touch plug-in vue-touch is a gesture plug-in for Vue, which can easily handle multi-finger touch events on the mobile side. We can install vue-to via npm
How to use mobile gesture operations in Vue projects
Oct 08, 2023 pm 07:33 PM
How to use mobile gesture operations in Vue projects With the popularity of mobile devices, more and more applications need to provide a more friendly interactive experience on the mobile terminal. Gesture operation is one of the common interaction methods on mobile devices, which allows users to complete various operations by touching the screen, such as sliding, zooming, etc. In the Vue project, we can implement mobile gesture operations through third-party libraries. The following will introduce how to use gesture operations in the Vue project and provide specific code examples. First, we need to introduce a special
What is REM (full name REMME)?
Feb 21, 2024 pm 05:00 PM
What coin is REMME? REMME is a cryptocurrency based on blockchain technology dedicated to providing highly secure and decentralized network security and identity verification solutions. The project aims to use distributed encryption technology to enhance and simplify the user authentication process, thereby improving security and efficiency. The innovation of REMME is that it uses the immutability and transparency of the blockchain to provide users with a more reliable identity verification method. By storing authentication information on the blockchain, REMME eliminates the single point of failure of centralized authentication systems and reduces the risk of data theft or tampering. This blockchain-based authentication method is not only more secure and reliable, but also provides users with the background of REMME. In the current digital era, the network
The evolution and application of CSS layout units: from pixels to relative units based on the font size of the root element
Jan 05, 2024 pm 05:41 PM
From px to rem: The evolution and application of CSS layout units Introduction: In front-end development, we often need to use CSS to implement page layout. Over the past few years, CSS layout units have evolved and developed. Initially we used pixels (px) as the unit to set the size and position of elements. However, with the rise of responsive design and the popularity of mobile devices, pixel units have gradually exposed some problems. In order to solve these problems, the new unit rem came into being and was gradually widely used in CSS layout. one
How to solve the double-click amplification problem on mobile terminals in Vue development
Jun 29, 2023 am 11:06 AM
With the popularity of mobile devices, using Vue for mobile development has become a common choice. However, we often face a problem during mobile development, which is double-clicking to zoom in. This article will focus on this problem and discuss how to solve the specific method of double-click amplification on the mobile terminal in Vue development. The double-click enlargement problem on mobile devices occurs mainly because the mobile device automatically enlarges the zoom ratio of the web page when double-clicking on the touch screen. For general web development, this kind of double-click to enlarge is usually beneficial because it can
How to implement mobile map positioning function using Python and Baidu Map API
Jul 29, 2023 pm 11:33 PM
Method of implementing mobile map positioning function using Python and Baidu Map API. With the development of mobile Internet, map positioning function has become more and more common in mobile applications. Python, as a popular programming language, can also implement mobile map positioning functions by using Baidu Map API. The following will introduce the steps to implement the map positioning function using Python and Baidu Map API, and provide corresponding code examples. Step 1: Apply for Baidu Map API Key Before starting, we first need to apply
Vue development: Optimizing the stuck problem of gesture scaling on the mobile terminal
Jun 30, 2023 pm 04:33 PM
How to solve the stuck problem of mobile gesture zooming pages in Vue development. In recent years, the popularity of mobile applications has made gesture operations an important way of user interaction. In Vue development, implementing the gesture zoom function on the mobile terminal often encounters the problem of page lag. This article will explore how to solve this problem and provide some optimization strategies. Understand the principle of gesture scaling. Before solving the problem, we first need to understand the principle of gesture scaling. Gesture zooming is implemented by listening to touch events. When the user slides the screen with two fingers, the page will follow the sliding movement of the fingers.
How to handle mobile and responsive design in PHP forms
Aug 10, 2023 am 11:51 AM
How to deal with mobile and responsive design in PHP forms. With the popularity and frequency of mobile devices increasing, and more and more users using mobile devices to access websites, adapting to mobile has become an important issue. When dealing with PHP forms, we need to consider how to achieve a mobile-friendly interface and responsive design. This article explains how to handle mobile and responsive design in PHP forms and provides code examples. 1. Responsive forms using HTML5 HTML5 provides some new features that can easily implement responsive forms.
