adaptation of rem
Know a few basic concepts
11 The value of rem is always equal to the size of the font-size attribute value of the root element (html)
2 The default font-size value of the browser is 16px
3 The role of rem.js below = flexable.js = installed amfe-flexible
4vscode used in
Function = The function of the px2rem-loader plugin For
the layout of the mobile terminal, we adopt the flex+rem method (this is what we are familiar with)
PS: vw vh can also be adapted to
vw: Divide the width of the browser viewport into 100 parts 1vw 1% of the browser's width
vh: Divide the height of the browser's viewport into 100 parts 1vh = 1% of the browser's height
and the % ratio The difference is that this is always relative to the viewport's percentage layout is relative to the parent
The first way: import this js file into the page
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
// recalc changes the font-size value
recalc = function () {
// get The width of my device
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
// If the device width is greater than 750 and exceeds the mobile terminal return.
if (clientWidth >= 750) {
docEl.style.fontSize = '100px';
} else {
// Set the fontsize value to size/750 *100
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; }
}
;
if (!doc.addEventListener) return;
// happens on your screen Rotate, or execute the above function when zooming in and out
win.addEventListener(resizeEvt, recalc, false);
// Execute the above function when your page is initialized
doc.addEventListener('DOMContentLoaded', recalc, false);
/*DOMContentLoaded document loading complete does not contain image resources onload contains images resource*/
})(document, window);
If the width of the design draft given by the designer is 750, the
width of the 10 lines and 14 lines of the design draft is changed to the same size as the width of the design draft given by the designer.
If the width of a div box on the 750 design draft is measured to be 375px, it is just right Accounting for 50% of the width of the page
Calculated according to the js file above, fontsize = 100*(750/750)px = 100px = 1rem
width: 3.75rem
After the project is launched,
student A uses an Apple 8P to open the online website The width of the device is 414px.
First, when entering the page, the rem.js file will be loaded.
In the page opened by Apple 8P, fontsize = 100*(414/750)px = 55.2px = 1rem.
When viewing this box on Apple 8P, width: 3.75rem How much is it converted into px? 3.75*55.2 = 207 px.
This 207 is exactly 50% of the current device
. In the same way, at the beginning of the layout, I followed this design draft to make all the units
width height margin padding left and so on All these px units are written as rem
, so it will be scaled up and down on Apple 8. The same is true for other mobile phones. It can realize the adaptation of the mobile terminal.
Configure it in vscode and use the plug-in css2rem plug-in
When writing in the code, there is no need to calculate
The second way. Use the flexable.js library of Mobile Taobao
// Load Ali CDN file <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
Divide the page into 10 parts on average. Assign one part to font-size.
On the 750 design draft given by the designer, 1rem = 75px.
After you measure, the measured pixel values such as width and height must be divided by 75
375px = If 5rem
is replaced with an iphone5, the mobile phone is 320 pixels. This flexable.js will get the width of the device (320) and then assign one-tenth to the font-size
1rem = 32px Then we wrote 5rem = when we first laid out the programmer 160px also accounts for half of the current mobile phone and realizes adapting to the current screen. Other devices are similar. If you use this js plug-in for adaptation: set the benchmark value to 75px in the settings, and measure it out during the layout process. The px will be automatically converted into renm through the vscode plugin
The third is in the vue project, we can directly use the plug-in method
(The advantage of this method is that during the page layout process, you can directly write px, and finally, it will be automatically changed to rem through the plug-in.) How to convert px
into rem in the project
can be directly designed according to the blue lake in the following process project Just write the manuscript in px
//Install amfe-flexible
cnpm install amfe-flexible -S
//Install px2rem-loader
cnpm install px2rem-loader -D //Introduce
import 'amfe-flexible'
in mian.js
//In vue.config.js config
module.exports = {
chainWebpack: config => {
config.module
.rule('scss')
.test(/\.scss$/)
.oneOf('vue')
.use('px2rem-loader')
.loader ('px2rem-loader')
.before('postcss-loader') // this makes it work.
.options({
remUnit: 75, //According to the visual draft, rem is one-tenth of px, 750px 75rem
remPrecision: 8 //Reserve 8 decimal places
})
.end()
}
}
// restart scaffolding
When the above configuration is performed, write px directly on the page, and finally run and check the browser. It is found that it is converted into a rem value
Vite tool implementation
1: Install
npm install postcss-pxtorem --save-dev
npm install amfe-flexible --save-dev 2. Introduce amfe-flexible
import 'amfe-flexible'
in mian.js
3. In vite.config. Configure postcss-pxtorem in js
import { defineConfig } from 'vite';
import postCssPxToRem from "postcss-pxtorem";
export default defineConfig({
...
css: {
postcss: {
plugins: [
postCssPxToRem({
rootValue: 75, // (Design Draft/10) The size of 1rem
propList: ['*'], // Attributes that need to be converted, here select all to be converted
})
]
}
}
})
For interview questions:
Summary: The mobile terminal adaptation method, our company uses flex+rem layout, and then cooperates with a flexable.js plug-in.
It installs flexable and a px2rem plug-in through npm, and then. In webpack Configure it inside. When writing code, directly write the width (750) of the existing design draft on the Blue Lake into the layout to realize the adaptation of the mobile terminal. In fact: the function of this plug-in is equivalent to dynamic
monitoring Open the screen width of the device (onLoad/DOMContentLoaded). Or when the screen window changes (resize event), dynamically monitor the width of the screen, then divide the screen width into 10 parts, and modify the root element (html) font- The size of the size attribute. Because rem always changes with the size of this font-size, so the adaptation is realized
How do I implement this flexable.js file myself? (I want to see your js logic)
I think if I write it myself, I will listen to the onload event and the resize event through addEventListener. Get the clientWidth device when it is inside Width. Then divide by 10, and then modify the size of the font-size value of the html element through setAttribute. It should be ok