1. Create or select a Vue project
If you don't have a Vue project yet, you can use the Vue CLI to create a new project:
npm install -g @vue/cli vue create my-vue-project cd my-vue-project
2. Install PostCSS and related plug-ins
Installpostcss、postcss-loaderAnd the previously mentionedpostcss-pxtoremPlugin:
npm install postcss postcss-loader postcss-pxtorem --save-dev
3. Configure PostCSS
Create or modify in the project root directoryFile, sample configuration is as follows:
= {
plugins: {
'postcss-pxtorem': {
rootValue: 37.5, // The font size of the root element is adjusted according to the design draft, and is generally set to 1/10 of the width of the design draft propList: ['*'], // Attributes that need to be converted, * means that all attributes are converted selectorBlackList: ['.ignore-'], // Selector blacklist, the px in the matched selector is not converted minPixelValue: 2 // The minimum converted pixel value, px less than this value will not be converted }
}
};
No conversion of tiny sizes
Generally speaking,minPixelValueSet to1or2It is a relatively common choice. The purpose of this is to avoid converting some tiny sizes (such as border width, shadow offset, etc.) into rem units, because these tiny sizes may cause subtle differences in the display due to decimal calculations, and even display exceptions on some devices.
4. Configure the Vue project
Create or modify in the project root directoryFile, addcssConfiguration item to enablepostcss-loader：
= {
css: {
loaderOptions: {
postcss: {
postcssOptions: {
plugins: [
require('postcss-pxtorem')({
// The configuration here can also be written directly in // If you have configured it, you can omit it here })
]
}
}
}
}
};
5. Write CSS in Vue Components
In Vue components<style>Used in the tagpxUnit writing styles, for example:
<template>
<div class="box">
This is a box.
</div>
</template>
<style scoped>
.box {
width: 375px;
height: 100px;
font-size: 16px;
background-color: lightblue;
}
</style>
6. Set the font size of the root element
To makeremThe unit takes effect and needs to be filed in the project entrance (usuallysrc/dynamically set the root element in ) (<html>) font size. The following code can be added:
// src/
new Vue({
render: h => h(App),
}).$mount('#app');
// Set the font size of the root element = / 10 + 'px';
('resize', () => {
= / 10 + 'px';
});
The above code dynamically sets the font size of the root element according to the screen width, and resets it when the window size changes to ensure that it can adapt normally under different screen sizes.
7. Run the project
Run the following command to start the development server:
npm run serve
Now, when you open the browser to view the project, use it in the Vue componentpxThe styles written by the unit will be automatically converted toremunit, thereby realizing screen adaptation on the mobile phone.
Through the above steps, you can successfully apply the configured PostCSS in the Vue project for screen adaptation. If additional features are needed, you can also configure them in combination with more PostCSS plug-ins.
This is the article about the configuration steps of using PostCSS for the screen adaptation of h5 pages for Vue project. For more related content on Vue PostCSS for h5 pages, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!