How to configure lib-flexible+rem mobile adaptation in vue-cli-JS Tutorial-php.cn

How to configure lib-flexible+rem mobile adaptation in vue-cli

php中世界最好的语言

Release： 2018-04-13 14:19:16

Original

2091 people have browsed it

This time I will show you how vue-cli configures lib-flexible rem mobile terminal adaptation, and vue-cli configures lib-flexible rem mobile terminal adaptation. What are the precautions? The following is a practical case, let’s take a look.

Install flexible

npm install lib-flexible --save

Copy after login

Introducing flexible

Add the following code to the projectentry filemain.js and introduce flexible

import 'lib-flexible'

Copy after login

px to rem

Use webpack's px2rem-loader to automatically convert px to rem

Install px2rem-loader

npm install px2rem-loader --save-dev

Copy after login

px2rem Usage

After installing px2rem, there are some differences when using px. You can refer to the official introduction of px2rem, which is briefly introduced below.

Write px directly, and it will be directly converted into rem after compilation ---- Except for the following two situations, use this for other lengths

Adding /*no*/ after px will not convert px, but will be output as is. ---General borders need to use this

Adding /*px*/ after px will generate three sets of codes according to different dpr. ----General fonts need to use this

Sample code

Before compilation (code written by myself)

.selector {
 width: 150px;
 height: 64px; /*px*/
 font-size: 28px; /*px*/
 border: 1px solid #ddd; /*no*/
}

Copy after login

After compilation (packaged code)

.selector {
 width: 2rem;
 border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
 height: 32px;
 font-size: 14px;
}
[data-dpr="2"] .selector {
 height: 64px;
 font-size: 28px;
}
[data-dpr="3"] .selector {
 height: 96px;
 font-size: 42px;
}

Copy after login

Restart the project and you can happily use the px on the design draft.

Attention: pit

You cannot add a meta tag named

viewport to the head of index.html, flexible will automatically add it for us!

Update: When introducing css from the outside, the issue of whether px2rem can convert rem

2017.12.8 Update: In practical applications, we found that sometimes px2rem can convert externally imported css files normally, but sometimes it cannot convert them. What is the reason? I tested three different ways of introducing CSS, and found that the first one can be converted normally, but the second and third ones cannot be converted normally. As for the reason, I still don’t understand it due to my lack of knowledge. Please ask a master to explain the difference between the three introduction methods.

If you understand these methods, there is no need to configure the importLoaders of cssLoader, because the following method is easier to control whether the externally imported css needs to be converted to rem, but changing the importLoaders cannot control it, it will

force conversion .

<style src=&#39;../assets/style.css&#39;>
 /* px2rem能正常转换 */
</style>
<style>
 /* px2rem不能正常转换 */
 @import '../assets/style.css';
</style>
<style>
 /* px2rem不能正常转换 */
 @import url('../assets/style.css');
</style>

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!