Mobile web page adaptation: application of rem
The requirements for adaptive development of web pages are cross-platform, cross-browser, generally mobile + PC. I wrote a few PC-side full-screen pages a few days ago, using percentages. I checked them on my mobile phone. The effect is far different. From this point of view, the adaptability of mobile+PC is sometimes a false proposition.
The adaptation to the mobile terminal is like the general full-screen sliding of the promotional page, using percentages. If it is complicated, it will definitely not work. I took a closer look at the rem used by Taobao for processing. Unit, let’s learn this method. First of all, for design drawings, the width is generally 640.
rem: CSS3 has added a new relative unit rem (root em, root em), so rem should be set in html{font-size:1rem ;},
Taobao’s setting for this is based on the width of the mobile phone,
This essential sentence: controlled by js.
First of all, it is different on Apple. Apple 6 is In this setting, you can use window.devicePixelRatio device pixel ratio
window.clientWitdh*window.devicePixelRatio/10, so that you can get the font-size size,
And on andorid Most of them are,
font-size is window.clientWitdh/10;
The code used in Taobao:
!function(J, I) {
function H() {
var d = E.getBoundingClientRect().width;
d / B > 540 && (d = 540 * B);
var e = d / 10;
E.style.fontSize = e + "px",
z.rem = J.rem = e;
}
var G, F = J.document,
E = F.documentElement,
D = F.querySelector('meta[name="viewport"]'),
C = F.querySelector('meta[name="flexible"]'),
B = 0,
A = 0,
z = I.flexible || (I.flexible = {});
if (D) {
console.warn("将根据已有的meta标签来设置缩放比例");
var y = D.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
y && (A = parseFloat(y[1]), B = parseInt(1 / A))
} else {
if (C) {
var x = C.getAttribute("content");
if (x) {
var w = x.match(/initial\-dpr=([\d\.]+)/),
v = x.match(/maximum\-dpr=([\d\.]+)/);
w && (B = parseFloat(w[1]), A = parseFloat((1 / B).toFixed(2))),
v && (B = parseFloat(v[1]), A = parseFloat((1 / B).toFixed(2)))
}
}
}
if (!B && !A) {
var u = (J.navigator.appVersion.match(/android/gi), J.navigator.appVersion.match(/iphone/gi)),
t = J.devicePixelRatio;
B = u ? t >= 3 && (!B || B >= 3) ? 3 : t >= 2 && (!B || B >= 2) ? 2 : 1 : 1,
A = 1 / B
}
if (E.setAttribute("data-dpr", B), !D) {
if (D = F.createElement("meta"), D.setAttribute("name", "viewport"), D.setAttribute("content", "initial-scale=" + A + ", maximum-scale=" + A + ", minimum-scale=" + A + ", user-scalable=no"), E.firstElementChild) {
E.firstElementChild.appendChild(D)
} else {
var s = F.createElement("p");
s.appendChild(D),
F.write(s.innerHTML)
}
}
J.addEventListener("resize",
function() {
clearTimeout(G),
G = setTimeout(H, 300)
},
!1),
J.addEventListener("pageshow",
function(b) {
b.persisted && (clearTimeout(G), G = setTimeout(H, 300))
},
!1),
"complete" === F.readyState ? F.body.style.fontSize = 12 * B + "px": F.addEventListener("DOMContentLoaded",
function() {
F.body.style.fontSize = 12 * B + "px"
},
!1),
H(),
z.dpr = J.dpr = B,
z.refreshRem = H,
z.rem2px = function(d) {
var c = parseFloat(d) * this.rem;
return "string" == typeof d && d.match(/rem$/) && (c += "px"),
c
},
z.px2rem = function(d) {
var c = parseFloat(d) / this.rem;
return "string" == typeof d && d.match(/px$/) && (c += "rem"),
c
}
} (window, window.lib || (window.lib = {}));The above is the detailed content of Mobile web page adaptation: application of 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 configure content adaptive brightness on Windows 11
Apr 14, 2023 pm 12:37 PM
Adaptive brightness is a feature on Windows 11 computers that adjusts the brightness level of your screen based on the content being displayed or lighting conditions. Since some users are still getting used to Windows 11's new interface, Adaptive Brightness can't be easily found, and some even say the Adaptive Brightness feature is missing on Windows 11, so this tutorial will clear it all up. For example, if you're watching a YouTube video and the video suddenly shows a dark scene, Adaptive Brightness will make the screen brighter and increase the contrast level. This is different from auto-brightness, which is a screen setting that allows your computer, smartphone, or device to adjust brightness levels based on ambient lighting. There is a special one in the front camera
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
What are the default ports for web standards?
Sep 20, 2023 pm 04:05 PM
The default ports of the web standard are: 1. HTTP, the default port number is 80; 2. HTTPS, the default port number is 443; 3. FTP, the default port number is 21; 4. SSH, the default port number is 22; 5. Telnet , the default port number is 23; 6. SMTP, the default port number is 25; 7. POP3, the default port number is 110; 8. IMAP, the default port number is 143; 9. DNS, the default port number is 53; 10. RDP , the default port number is 3389 and so on.
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 build an adaptive mobile interface with Vue?
Jun 27, 2023 am 11:05 AM
With the popularity of mobile Internet, more and more websites and applications need to consider the mobile experience. As a popular front-end framework, Vue has responsive layout and adaptive capabilities, which can well help us build adaptive mobile interfaces. This article will introduce how to use Vue to build an adaptive mobile interface. Using rem instead of px as the unit and using px as the unit in the mobile interface may result in inconsistent display effects on different devices. Therefore, it is recommended to use rem instead of px as the unit. rem is relative
What are the benefits of web standards
Sep 20, 2023 pm 03:34 PM
The benefits of web standards include providing better cross-platform compatibility, accessibility, performance, search engine rankings, development and maintenance costs, user experience, and code maintainability and reusability. Detailed description: 1. Cross-platform compatibility ensures that the website can display and run correctly on different operating systems, browsers and devices; 2. Improving accessibility ensures that the website is accessible to all users; 3. , Speed up website loading speed, users can access and browse the website faster, provide better user experience; 4. Improve search engine rankings, etc.
