Self adaptation is a must for every developer , The former stepped on some pits And a few roads out , I hope these experiences can help you in the process of development !!!
1. Traditional layout => rem
Mode one
const deviceWidth = document.documentElement.clientWidth ||
document.body.clientWidth;
document.querySelector(‘html’).style.fontSize = deviceWidth / 7.5 + ‘px’;
Mode 2
document.documentElement.style.fontSize =
document.documentElement.clientWidth / 7.5 + “px”;
window.addEventListener(
“resize”,
function() {
document.documentElement.style.fontSize =
document.documentElement.clientWidth / 7.5 + “px”;
},
false
);
// Mode one and mode two The effect is the same
2. I only want to see one unit , That's it => px
Scheme 1 ：lib-flexible+postcss-pxtorem
Insufficient ：
1. The two plug-ins need to be used together , and rootValue The set value is not easy to understand
2. Font units to layout , Not really
Installation procedure ：
lib-flexible Maintenance stopped , Available amfe-flexible replace
1. first , Let's install these two packages
npm install npm install amfe-flexible --save
npm install postcss-pxtorem --save-dev
yarn install yarn add amfe-flexible
yarn add postcss-pxtorem --dev
2. stay main.js Introduced in lib-flexible
import ‘amfe-flexible’
3. to configure postcss-pxtorem
cli2 Configuration of ----- stay .postcss.js In file plugins Next new postcss-pxtorem Configuration of
module.exports = {
“plugins”: {
“postcss-pxtorem”: {
rootValue: 192, // Write according to the size of the design drawing , What is the blueprint 1920, Just write 192
propList: [’’], // Properties to be converted
selectorBlackList: [] // No px Selector for conversion
}
}
}
vue-cli3 collocation method ： Add in the root path postcss.config.js file module.exports = {
“plugins”: {
“postcss-pxtorem”: {
rootValue: 192, // Write according to the size of the design drawing , What is the blueprint 1920, Just write 192
propList: [’’], // Properties to be converted
selectorBlackList: [] // No px Selector for conversion
}
}
}
Scheme 2 ：viewport==> postcss-px-to-viewport plug-in unit
stay vue Try to introduce it into the project
1. Let's first install it into the development environment of the project ：npm i postcss-px-to-viewport -D
2. Add in the project root directory .postcssrc.js file // Add the following configuration ：
module.exports = {
plugins: {
autoprefixer: {}, // Used to automatically add the corresponding prefix to different browsers , as -webkit-,-moz- wait
“postcss-px-to-viewport”: {
unitToConvert: “px”, // Unit to convert
viewportWidth: 750, // UI Width of design draft
unitPrecision: 6, // Accuracy after conversion , That is, the number of decimal points
propList: ["*"], // Specifies the name of the transformation css Unit of property ,* For all css All units of the attribute are converted
viewportUnit: “vw”, // Specifies the window unit to be converted to , default vw
fontViewportUnit: “vw”, // Specifies the window units to which the font needs to be converted , default vw
selectorBlackList: [“wrap”], // Specifies the class name that is not converted to a Windows unit ,
minPixelValue: 1, // Default value 1, Less than or equal to 1px No conversion is performed
mediaQuery: true, // Is it in the media css The code is also converted , default false
replace: true, // Do you want to change property values directly after conversion
exclude: [/node_modules/], // Set ignore file , Directory name matching with regularization
landscape: false // Whether to deal with horizontal screen
}
}
};
3. Rerun project , Make profile effective // Let's write a test code to verify it ：
Test conversion
4. Open the console , You can see that the conversion has been made
Configuration to pay attention to ：
propList: When we don't want to convert the units of some properties , Can be added after the array , And add it in front of it ! number , as propList:
["","!letter-spacing"]*, It means ： All css Attribute units are converted , except letter-spacing Of
selectorBlackList： Converted blacklist , In the blacklist, we can write strings , As long as the class name contains this string , It won't be matched . such as selectorBlackList:
[‘wrap’], It means like wrap,my-wrap,wrapper The unit of such a class name , Will not be converted
About compatibility with third parties UI library
of course , When we introduce some third-party libraries , such as vant, It's configured above exclude Remove , Indicates that all the contents are in progress vw transformation , We're going to have problems like this ：
It's very small , It's crushed
actually —vant The team is based on 375px I did it with my design draft , The ideal width of the view is 375px.
Solution ：
Let's go back webpack itself , Take a second look at this one .postcssrc.js file , It exposes only one object , You can also expose a function , No matter what you expose , stay webpack Runtime , Will be read and executed by our massive files
rewrite .postcssrc.js The file configuration is as follows ：
module.exports = ({ file }) => {
const designWidth = file.dirname.includes(‘node_modules/vant’) ? 375 : 750;
return {
plugins: {
autoprefixer: {},
“postcss-px-to-viewport”: {
unitToConvert: “px”,
viewportWidth: designWidth,
unitPrecision: 6,
propList: ["*"],
viewportUnit: “vw”,
fontViewportUnit: “vw”,
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: true,
exclude: [],
landscape: false
}
}
}
}
Found after rerun , Not only vant The units of the related components are converted to vw, And the proportion is absolutely right . Hope to help you , At the same time, I wish you a happy journey in the development !!!
Technology