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

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

Introducing flexible

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

import 'lib-flexible'

px to rem

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

Install px2rem-loader

npm install px2rem-loader --save-dev

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*/
}

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;
}

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>
 /* px2rem能正常转换 */
</style>
<style>
 /* px2rem不能正常转换 */
 @import &#39;../assets/style.css&#39;;
</style>
<style>
 /* px2rem不能正常转换 */
 @import url(&#39;../assets/style.css&#39;);
</style>

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!

Recommended reading:

Detailed explanation of the use of vue-cli

Detailed explanation of Vue template file packaging and configuration steps

How does JS prevent image stretching from adapting

The above is the detailed content of How to configure lib-flexible+rem mobile adaptation in vue-cli. For more information, please follow other related articles on the PHP Chinese website!