Web Front-end
JS Tutorial
Detailed explanation of the steps to automatically build rem for webpack mobile terminals
Detailed explanation of the steps to automatically build rem for webpack mobile terminals
This time I will bring you a detailed explanation of the steps to automatically build rem for the webpack mobile terminal. What are the precautions for the automatic construction of rem for the webpack mobile terminal. The following is a practical case, let's take a look.
I believe that many friends think that their mobile projects can be automatically converted to rem. This is in line with the front-end trend. It is very inconvenient to make changes by handwriting or editor plug-ins. It is easy to make mistakes. I searched a lot of methods on the Internet and found the following problems:
1 I followed the old video tutorial and found that the various plug-in versions of node npm webpack px2rem are different and useless at all
2 The tutorials on the Internet were lacking and incomplete, and it took me a long time to figure it out. I thought about manually setting the cssrem settings of vscode, but I was still not convinced, so I pieced together everything and finally got it. , and finally developed the following method, which I hope will be helpful to everyone’s automatic rem construction on the mobile terminal
1 I won’t go into detail about installing vue-cli, everyone should know how
2 Install and Configure px2rem-loader (I didn’t use postcss here and tried many problems but decided to use this)
Step one: npm install px2rem-loader
Part two: webpack.base.conf. Add objects under js. Here I use sass. Use other ones and change them according to the following rules. I believe everyone can understand
module.exports={
module: {
rules: [
{
test: /\.(css|less|scss)(\?.*)?$/,
loader: 'style-loader!css-loader!sass-loader!less-loader!postcss-loader'
}
]
}
}Step 3: Add a plugin under webpack.dev.conf.js Things, everyone must pay attention to the attribute of remUnit, which is 40px in the case of Apple 5. I set it as 40 here, and some people set it as 80. The 40 here is for use with hotcss. I will talk about it below
plugins: [
new webpack.LoaderOptionsPlugin({
// webpack 2.0之后， 此配置不能直接写在自定义配置项中， 必须写在此处
vue: {
postcss: [require('postcss-px2rem')({ remUnit: 40, propWhiteList: [] })]
}
}
]Part 4: This is something many people don’t know. Many people just miss this step. Find the const cssLoader under utils.js and add ?importLoaders=1
const cssLoader = {
loader: 'css-loader?importLoaders=1',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}The installation is complete until here
Inputfont-size:40px
Output font-size:1rem (under iphone)
3 We all know that the pixel ratio of devices is different. So we use hotcss to adjust the pixel ratio link of the device
I put it in src/assets/js/, you can introduce the method according to your habits
You can define any name yourself, here I changed hotcss.js to viewport.js
module.exports = {
entry: {
app: './src/main.js',
rem: './src/assets/js/viewport.js'
}
}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 using React Router v4
Instructions for getting started with vue forms
The above is the detailed content of Detailed explanation of the steps to automatically build rem for webpack mobile terminals. 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
Understand the differences and comparisons between SpringBoot and SpringMVC
Dec 29, 2023 am 09:20 AM
Compare SpringBoot and SpringMVC and understand their differences. With the continuous development of Java development, the Spring framework has become the first choice for many developers and enterprises. In the Spring ecosystem, SpringBoot and SpringMVC are two very important components. Although they are both based on the Spring framework, there are some differences in functions and usage. This article will focus on comparing SpringBoot and Spring
Jenkins in PHP Continuous Integration: Master of Build and Deployment Automation
Feb 19, 2024 pm 06:51 PM
In modern software development, continuous integration (CI) has become an important practice to improve code quality and development efficiency. Among them, Jenkins is a mature and powerful open source CI tool, especially suitable for PHP applications. The following content will delve into how to use Jenkins to implement PHP continuous integration, and provide specific sample code and detailed steps. Jenkins installation and configuration First, Jenkins needs to be installed on the server. Just download and install the latest version from its official website. After the installation is complete, some basic configuration is required, including setting up an administrator account, plug-in installation, and job configuration. Create a new job On the Jenkins dashboard, click the "New Job" button. Select "Frees
How to delete Apple shortcut command automation
Feb 20, 2024 pm 10:36 PM
How to Delete Apple Shortcut Automation With the launch of Apple's new iOS13 system, users can use shortcuts (Apple Shortcuts) to customize and automate various mobile phone operations, which greatly improves the user's mobile phone experience. However, sometimes we may need to delete some shortcuts that are no longer needed. So, how to delete Apple shortcut command automation? Method 1: Delete through the Shortcuts app. On your iPhone or iPad, open the "Shortcuts" app. Select in the bottom navigation bar
What are web standards?
Oct 18, 2023 pm 05:24 PM
Web standards are a set of specifications and guidelines developed by W3C and other related organizations. It includes standardization of HTML, CSS, JavaScript, DOM, Web accessibility and performance optimization. By following these standards, the compatibility of pages can be improved. , accessibility, maintainability and performance. The goal of web standards is to enable web content to be displayed and interacted consistently on different platforms, browsers and devices, providing better user experience and development efficiency.
How to enable administrative access from the cockpit web UI
Mar 20, 2024 pm 06:56 PM
Cockpit is a web-based graphical interface for Linux servers. It is mainly intended to make managing Linux servers easier for new/expert users. In this article, we will discuss Cockpit access modes and how to switch administrative access to Cockpit from CockpitWebUI. Content Topics: Cockpit Entry Modes Finding the Current Cockpit Access Mode Enable Administrative Access for Cockpit from CockpitWebUI Disabling Administrative Access for Cockpit from CockpitWebUI Conclusion Cockpit Entry Modes The cockpit has two access modes: Restricted Access: This is the default for the cockpit access mode. In this access mode you cannot access the web user from the cockpit
what does web mean
Jan 09, 2024 pm 04:50 PM
The web is a global wide area network, also known as the World Wide Web, which is an application form of the Internet. The Web is an information system based on hypertext and hypermedia, which allows users to browse and obtain information by jumping between different web pages through hyperlinks. The basis of the Web is the Internet, which uses unified and standardized protocols and languages to enable data exchange and information sharing between different computers.
Is PHP front-end or back-end in web development?
Mar 24, 2024 pm 02:18 PM
PHP belongs to the backend in web development. PHP is a server-side scripting language, mainly used to process server-side logic and generate dynamic web content. Compared with front-end technology, PHP is more used for back-end operations such as interacting with databases, processing user requests, and generating page content. Next, specific code examples will be used to illustrate the application of PHP in back-end development. First, let's look at a simple PHP code example for connecting to a database and querying data:
How Robotics and Artificial Intelligence Can Automate Supply Chains
Feb 05, 2024 pm 04:40 PM
Automation technology is being widely used in different industries, especially in the supply chain field. Today, it has become an important part of supply chain management software. In the future, with the further development of automation technology, the entire supply chain and supply chain management software will undergo major changes. This will lead to more efficient logistics and inventory management, improve the speed and quality of production and delivery, and in turn promote the development and competitiveness of enterprises. Forward-thinking supply chain players are ready to deal with the new situation. CIOs should take the lead in ensuring the best outcomes for their organizations, and understanding the role of robotics, artificial intelligence, and automation in the supply chain is critical. What is supply chain automation? Supply chain automation refers to the use of technological means to reduce or eliminate human participation in supply chain activities. it covers a variety of
