mind Mapping
- Let some elements that cannot be proportionally adapted to achieve a proportional adaptation to the current device when the device size changes.
- Use media query to set the html font size in proportion to different devices, and then use rem as the size unit for page elements. When the html font size changes, the element size will also change, so as to achieve the adaptation of proportional scaling.
One: less+rem+media query
- Common size and width of design draft
- Dynamically set the font-size of html tags
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
@media screen and (min-width: 320px) {
html {
font-size: 21.33px;
}
}
@media screen and (min-width: 750px) {
html {
font-size: 50px;
}
}
div {
width: 2rem;
height: 2rem;
background-color: pink;
}
/* 1. 首先我们选一套标准尺寸 750为准
2. 我们用屏幕尺寸 除以 我们划分的份数 得到了 html 里面的文字大小 但是我们知道不同屏幕下得到的文字大小是不一样的 */
/* 3. 页面元素的rem值 = 页面元素在 750像素的下px值 / html 里面的文字大小 */
</style>
</head>
<body>
<div></div>
</body>
</html>
【叽叽叽溫溫】
The design draft is 750px wide
Divide the screen into 15 parts (not necessarily 15, you can also divide according to your ideas, as long as the subsequent calculation is changed to your number of copies)
750/15=50 One copy is 50px and each copy is the html font size, here it is 50px
…Do not want to write
So I made one on Baidu, which is what this article looks like. Mobile terminal layout plan 1: rem+media query+less
二：flexible.js+rem
The simple and efficient mobile terminal adaptation library produced by the mobile Taobao team no longer needs to write media queries for different screens, because
the principle of js processing is to divide the current device into 10 equal parts, but under different devices, the ratio Still consistent. What we have to do is to determine the html text size of our current device (see below for details). For
example, the current design draft is 750px, then we only need to set the html text size to 75px (750px / 10)
. Rem value of page element: px value of page element / 75
remaining, let flexible.js do the calculation
2.1：flexible.js
The complete code is too long, put it at the end
2.2: Specific operation
1: Create the following directory
2: Import files in html
3: body style
body {
min-width: 320px;
max-width: 750px;
/* flexible 给我们划分了 10 等份 */
width: 10rem;
margin: 0 auto;
line-height: 1.5;
font-family: Arial, Helvetica;
}
4: Then start writing
- About the plugin to convert px to rem
cssrem
The method of installing the plug-in is written in this article, and the same applies.
After installing the plug-in, you need to modify the data according to the settings on the page: When
using:
[Jijiwaiwai] Don’t drag your notes, don’t want to organize them, and you can’t find a case...
Supplement: I found that I did not put the flexible.js file;
(function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// adjust body font size
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))