Web Front-endCSS TutorialIn-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!
解决Vue移动端多触点问题Jun 30, 2023 pm 01:06 PM在移动端开发中，我们经常会遇到多手指触控的问题。当用户在移动设备上使用多个手指滑动或缩放屏幕时，如何准确地识别和响应这些手势是一个重要的开发难题。在Vue开发中，我们可以采取一些措施来解决移动端多手指触控问题。一、使用vue-touch插件vue-touch是一个用于Vue的手势插件，它可以方便地处理移动端的多手指触控事件。我们可以通过npm安装vue-to
REM(全称REMME)是什么币？Feb 21, 2024 pm 05:00 PMREMME是什么币？REMME是一个基于区块链技术的加密货币，致力于提供高度安全且去中心化的网络安全和身份验证解决方案。该项目旨在利用分布式加密技术来增强和简化用户身份验证流程，从而提升安全性和效率。REMME的创新之处在于其借助区块链的不可篡改性和透明性，为用户提供了更可靠的身份验证方式。通过将身份验证信息存储在区块链上，REMME消除了中心化身份验证系统的单点故障，并降低了数据被盗或篡改的风险。这种基于区块链的身份验证方法不仅更安全可靠，而且还能够为用户REMME的背景在当前数字化时代，网络
CSS布局单位的演变与应用：从像素到根据根元素字体大小的相对单位Jan 05, 2024 pm 05:41 PM从px到rem：CSS布局单位的演变与应用引言：在前端开发中，我们经常需要用到CSS来实现页面布局。在过去的几年间，CSS布局单位也经历了演变和发展。最开始我们使用的是像素（px）作为单位来设置元素的大小和位置。然而，随着响应式设计的兴起和移动设备的普及，像素单位逐渐暴露出一些问题。为了解决这些问题，新的单位rem应运而生，并逐渐被广泛应用于CSS布局中。一
Vue开发中如何解决移动端双击放大问题Jun 29, 2023 am 11:06 AM随着移动端设备的普及，使用Vue进行移动端开发已经成为了常见的选择。然而，我们在移动端开发过程中经常会面临一个问题，就是双击放大。本文将针对这一问题，探讨在Vue开发中如何解决移动端双击放大的具体方法。移动端双击放大问题的出现，主要是因为移动设备在触摸屏上进行双击操作时，会自动放大网页的缩放比例。对于一般的网页开发来说，这种双击放大通常是有好处的，因为它可以
使用Python和百度地图API实现移动端地图定位功能的方法Jul 29, 2023 pm 11:33 PM使用Python和百度地图API实现移动端地图定位功能的方法随着移动互联网的发展，地图定位功能在移动端应用中变得越来越常见。Python作为一种流行的编程语言，也可以通过使用百度地图API来实现移动端地图定位功能。下面将介绍使用Python和百度地图API实现地图定位功能的步骤，并提供相应的代码示例。步骤一：申请百度地图API密钥在开始之前，我们首先需要申请
如何处理PHP表单中的移动端和响应式设计Aug 10, 2023 am 11:51 AM如何处理PHP表单中的移动端和响应式设计随着移动设备的普及和使用频率的增加，以及越来越多的用户使用移动设备访问网站，适配移动端成为了一个重要的问题。在处理PHP表单时，我们需要考虑如何实现移动端友好的界面和响应式设计。本文将介绍如何处理PHP表单中的移动端和响应式设计，并提供代码示例。1.使用HTML5的响应式表单HTML5提供了一些新特性，可以方便地实现响
如何使用PHP生成可用于移动端的二维码？Aug 26, 2023 pm 02:51 PM如何使用PHP生成可用于移动端的二维码？随着移动互联网的快速发展，二维码成为了商家推广、支付、活动等方方面面的重要工具。而使用PHP生成可用于移动端的二维码则成为了许多开发人员的需求。在本文中，我们将介绍如何使用PHP生成可用于移动端的二维码，并附上代码示例供参考。首先，我们需要先安装并引入一个PHP库，名为"endroid/qr-code"。这个库提供了一
Vue开发：优化移动端手势缩放卡顿问题Jun 30, 2023 pm 04:33 PMVue开发中如何解决移动端手势缩放页面卡顿问题近年来，移动端应用的普及使得手势操作成为用户交互的重要方式。在Vue开发中，实现移动端手势缩放功能往往会遇到页面卡顿的问题。本文将探讨如何解决这一问题，并提供一些优化策略。了解手势缩放原理在解决问题之前，我们首先需要了解手势缩放的原理。手势缩放通过监听触摸事件来实现，当用户用两个手指滑动屏幕时，页面会按照手指的滑
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
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
Atom editor mac version download
The most popular open source editor
