Mobile and PC adaptive
demand
- Mobile adaptive
- PC adaptive (within a certain screen range)
Realize the principle of
Use amFE-Flexible and PostCSS-px2REM dependencies to automatically convert PX to REM after compiling the project, dynamically changing the FONT size of the HTML according to the screen size
If you want to know how REM ADAPTS, you can Google it, but I won’t talk about the principle here
It doesn’t matter if you don’t understand the principle, the following operation can be achieved.
To implement tutorial
The first step is to install component dependencies
npm install amfe-flexible -S
npm install postcss-px2rem -S
Copy the code
Second, introduce lib-flexible.js
Here is the VUE project as an example
Imported in the entry file main.js
import "amfe-flexible/index.js";
Copy the code
Third, add the following line of code to the directory public/index.html
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
Copy the code
Step 4: Configure postCSs-px2REM
If it is a vue-cli3 built project, find the vue.config.js file in the root directory (if not, create a new one).
The configuration is as follows
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require("postcss-px2rem") ({remUnit: 75})]}}Copy the code
Module. exports = {}, inside curly braces
The complete code is as follows:
module.exports = {
// Basic path
publicPath: '/'.css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require("postcss-px2rem") ({remUnit: 75})]}}},/ / agent
devServer: {
port: 8080.// host: 'localhost',
https: false.// https:{type:Boolean}
open: true.// Configure automatic browser startup
disableHostCheck: true."proxy": {
"/ *": {
"target": "http://xxx"."changeOrigin": true}}}},Copy the code
It saves it: 75, which saves for 75, so the design saves for 750px, but if you get 640px, you’ll get 64, and if you get 1920px, you’ll get 192
If your project is vuE-CLI2 built
Go to the.postcsrc. Js file in the root directory and add the following code:
module.exports = {
plugins: {
'postcss-import': {},
'postcss-url': {},
// to edit target browsers: use "browserslist" field in package.json
autoprefixer: {
browsers: ['Android > = 4.0'.'iOS >= 7']},'postcss-pxtorem': {
rootValue: 75.propList: [The '*'.'! border*']}}}Copy the code
PropList can be used to match all attributes. Border means no border, which does not change the border from 1px to 1rem
In CSS you don’t want to go from PX to REM you can do this, you can write a slash after the styleno/ comment
.nav {
width: 400px;
height: 300px;
background: red;
border: 1px solid black; /*no*/
}
Copy the code
After the above configuration, open the compiled page of your project, open the debug page and change the width to see that the HTML font size value changes in real time, and your CSS PX value changes to REM automatically
The fifth step, the PC end to do adaptive solutions
The above is fully adaptive. If you want to control the range of adaptation, for example, if you are working on a PC project and want to adapt between 1300px and 1800px, set a fixed HTML font size for anything less than 1300px and a fixed HTML font size for anything larger than 1800px
This allows the PC project layout page to be smaller and less adaptive and larger
The key principle is to control this through media queries, as shown below, in your public style (or global style) file
/* When the screen is larger than 1800px, the font size of the HTML is 200px */
@media screen and (min-width: 1800px) {
html {
font-size: 200px ! important;
/*no*/}}/* Font-size = 130px */
@media screen and (max-width: 1300px) {
html {
font-size: 130px ! important;
/*no*/}}Copy the code
The above is just an example, mobile terminal you can not set, PC terminal, what scope do you want, according to your project page adjustment
Trample pits and solutions
When you use Webpack, if you write /*no*/ in your style, you don’t want to convert px to REM, as described above
/* When the screen is larger than 1800px, the font size of the HTML is 200px */
@media screen and (min-width: 1800px) {
html {
font-size: 200px ! important;
/*no*/}}Copy the code
/*no*/ do not transfer CSS property, it will not effect, packaging removed the comment, it will automatically transfer for you.
The first solution is to write styles in the style tag of the index.html file
This packing does not remove the CSS comments in index.html. If your Webpack also removes the comments in index.html, you can use webpack to remove the comments in index.html without removing them. The project does not remove comments in index.html
Solution 2: Configure the sass-Loader to ensure that all CSS comments are not deleted during packaging
Reference article: Comment failure in Webpack PostCSS-Px2REM production environment
Refer to the article
Amfe-flexible and PostCSS-PxtoREM are used in the front-end