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 thisSample code
Before compilation (code written by myself).selector {
width: 150px;
height: 64px; /*px*/
font-size: 28px; /*px*/
border: 1px solid #ddd; /*no*/
}.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;
}Attention: pit
You cannot add a meta tag namedviewport 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 willforce conversion .
<style src='../assets/style.css'>
/* px2rem能正常转换 */
</style>
<style>
/* px2rem不能正常转换 */
@import '../assets/style.css';
</style>
<style>
/* px2rem不能正常转换 */
@import url('../assets/style.css');
</style>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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Can the appdata folder be moved to the D drive?
Feb 18, 2024 pm 01:20 PM
Can the appdata folder be moved to the D drive? With the increasing popularity of computer use, more and more users' personal data and applications are stored on the computer. In Windows operating system, there is a specific folder called appdata folder, which is used to store user's application data. Many users wonder whether this folder can be moved to the D drive or other disks for data management and security considerations. In this article, we will discuss this problem and provide some solutions. First, let me
6000 mAh silicon negative battery! Xiaomi 15Pro upgrade leaked again
Jul 24, 2024 pm 12:45 PM
According to news on July 23, blogger Digital Chat Station broke the news that the battery capacity of Xiaomi 15 Pro has been increased to 6000mAh and supports 90W wired flash charging. This will be the Pro model with the largest battery in Xiaomi’s digital series. Digital Chat Station previously revealed that the battery of Xiaomi 15Pro has ultra-high energy density and the silicon content is much higher than that of competing products. After silicon-based batteries are tested on a large scale in 2023, second-generation silicon anode batteries have been identified as the future development direction of the industry. This year will usher in the peak of direct competition. 1. The theoretical gram capacity of silicon can reach 4200mAh/g, which is more than 10 times the gram capacity of graphite (the theoretical gram capacity of graphite is 372mAh/g). For the negative electrode, the capacity when the lithium ion insertion amount reaches the maximum is the theoretical gram capacity, which means that under the same weight
Stop or allow this PC to access your mobile device on Windows 11
Feb 19, 2024 am 11:45 AM
Microsoft changed the name of PhoneLink to MobileDevice in the latest Windows 11 version. This change allows users to control computer access to mobile devices through prompts. This article explains how to manage settings on your computer that allow or deny access from mobile devices. This feature allows you to configure your mobile device and connect it to your computer to send and receive text messages, control mobile applications, view contacts, make phone calls, view galleries, and more. Is it a good idea to connect your phone to your PC? Connecting your phone to your Windows PC is a convenient option, making it easy to transfer functions and media. This is useful for those who need to use their computer when their mobile device is unavailable
There are several levels of Mobile Global Pass cards
Oct 20, 2022 am 11:24 AM
Mobile Global Cards are divided into four levels. The levels from high to low are Diamond Card, Platinum Card, Gold Card and Silver Card. Rights are matched according to different levels of customers. Diamond Card is the highest level, and the higher the level, the more services you can enjoy. more. Under normal circumstances, the system will automatically determine the customer's Global Access level on January 15th of each year based on the customer's consumption in the past year and online age. The score of a customer with a diamond card needs to be greater than 4,000 points.
Does 151 start with China Mobile or China Unicom?
Mar 06, 2023 am 11:43 AM
The number starting with 151 is the number segment of the mobile operator. 151 is one of the number blocks of China Mobile. It began to allocate numbers in 2008. It is also the fourth number block that does not start with "13" after the 158, 159, and 150 numbers. The purpose of opening the 151 block It is to alleviate the shortage of number resources.
What are the levels of mobile user star ratings?
Oct 20, 2022 am 11:35 AM
Mobile user star ratings are divided into five levels: 1 star, 2 stars, 3 stars, 4 stars, and 5 stars. The five stars are further subdivided into five-star gold, five-star silver, and five-star diamond; the higher the star rating, the more The more service benefits you get. The star rating is assessed once a year and is valid for one year; if the star rating is adjusted, the star-rated services will be adjusted simultaneously.
Is the mobile number starting with 184 a virtual number?
Oct 25, 2022 pm 02:13 PM
Mobile 184 starts with the virtual operator's exclusive China Mobile number segment; the first three digits of the mobile phone number segment generally represent the network identification number, 4 to 7 digits represent the area code, and 8 to 11 digits are the user's unique number; in the assigned number segment At that time, numbers starting with 10 are service numbers for the telecommunications industry, such as 10000 Telecom Service Center, 10010 China Unicom Service Center, and 10086 Mobile Service Center; numbers starting with 11 are special service numbers, such as 110, 119, etc.
The new king of domestic FPS! 'Operation Delta' Battlefield Exceeds Expectations
Mar 07, 2024 am 09:37 AM
"Operation Delta" will launch a large-scale PC test called "Codename: ZERO" today (March 7). Last weekend, this game held an offline flash mob experience event in Shanghai, and 17173 was also fortunate to be invited to participate. This test is only more than four months away from the last time, which makes us curious, what new highlights and surprises will "Operation Delta" bring in such a short period of time? More than four months ago, I experienced "Operation Delta" in an offline tasting session and the first beta version. At that time, the game only opened the "Dangerous Action" mode. However, Operation Delta was already impressive for its time. In the context of major manufacturers flocking to the mobile game market, such an FPS that is comparable to international standards
