Introduction to mobile web screen adaptation (rem)
This article mainly introduces mobile web screen adaptation (rem). It introduces the mobile web screen adaptation (rem) in detail. The content is quite good. I will share it with you now and give it as a reference.
Preface
Recently I sorted out my notes from previous front-end studies and found that I have no experience with mobile web screen adaptation (rem). I don’t really understand it, I just know how to use it.
Next, record some of your thoughts on mobile web screen adaptation (rem).
rem Introduction
rem represents the size of the font-size of the root element (). That is, if the font-size of the root element is 14px, then 1rem = 14px
rem adapts to the mobile web
Adaptation effect
On screens of different sizes, the size of the same element does not look the same, but the proportion of the screen width they occupy is the same.
Code
// 在 html 文件的 head 标签中
<script type="text/javascript">
(function(){
var html = document.documentElement;
// 获取屏幕宽度（px）
var hWidth = html.getBoundingClientRect().width;
// 设置 html 标签的 font-size 大小为 hWidth/15
html.style.fontSize = hWidth/15 + 'px';
})()
</script>// 在 less 中
/* 定义变量@r：750/15 */
@r:50rem;
p {
width: 100/@r;
height: 200/@r;
}##javascript code
First, we copy 1/15 of the screen size (px) to the font-size attribute of the html tag. At this point, 1/15 px of the screen size (px) equals the size of 1rem on any screen size. That is: on any screen size, as long as the same rem value is set to the element, the element will occupy the same proportion of the screen width on all screen sizes, and the proportion will be the same, and it will adapt to all screen sizes. .less code
Now you only need to convert the px unit of the element in the design draft to the rem unit. So, at this time, we can treat the design draft as a mobile phone screen of a certain size.In my example, the width of the design draft is 750px.
Analysis of the rel attribute in HTML
The role of meta in the html page and the cache of the page Parsing with no cache setting
#
The above is the detailed content of Introduction to mobile web screen adaptation (rem). 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
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
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
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
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
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
A complete guide to implementing mobile responsive layout in Vue (Vant)
Jun 09, 2023 pm 04:09 PM
A Complete Guide to Implementing Mobile Responsive Layout in Vue (Vant) Mobile responsive layout is a very important part of modern web development. With the popularity of mobile devices, how to quickly respond to the size and resolution of the user's mobile phone screen has become a One of the challenges front-end engineers have to face. The Vue framework comes with responsive layout features, and there are also many third-party libraries to help us implement responsive layout. Among them, Vant component library is a Vue mobile UI library because it is very powerful, easy to use and customized, and is fully compatible with mobile devices.
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.
