Plan 1:
Directly introduce js (JS that changes fontsize dynamically by writing it yourself)
function htRem() {
var ww = ;
if (ww > 750) {
ww = 750;
}
= ww / 7.5 + "px";
}
htRem();
= function() {
htRem();
};
It can be introduced in import
Plan 2: Taobaolib-flexible + rem
Configure flexible
Install lib-flexible
Run the following installation on the command line:
npm i lib-flexible --save
Introducing lib-flexible
Introduce lib-flexible in the project entrance file
// import 'lib-flexible'
Add meta tag
Add the following meta in the project root directory
<meta name="viewport" content="width=device-width, initial-scale=1.0">
px to rem
In actual development, the unit of value we obtain through the design draft is px, so we need to convert px to rem and then write it into the style.
Convert px to rem We will use the px2rem tool, which has webpack loader: px2rem-loader
Install px2rem-loader
Run the following installation on the command line:
npm i px2rem-loade --save-dev
Configure px2rem-loader
In the webpack configuration generated by vue-cli, the options of vue-loader and other style files loader are ultimately generated by a method in build/.
We just need to add a px2remLoader after cssLoader. The remUnit option of px2rem-loader means how many pixels 1rem=. Combined with the lib-flexible solution, we set the px2remLoader to 1/10 of the width of the design draft. Here we assume that the width of the design draft is 750px.
//
var cssLoader = {
loader: 'css-loader',
options: {
minimize: .NODE_ENV === 'production',
sourceMap:
}
}
var px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75
}
}
// ...
and put it in the loaders array
//
function generateLoaders(loader, loaderOptions) {
var loaders = [cssLoader, px2remLoader]
// ...
After modifying the configuration, we need to restart, and then we write px directly in the component. We can write as much as the design draft, which is much more comfortable.
The above is the detailed explanation and integration of the adaptive Vue mobile terminal introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!