H5 mobile terminal adaptation

px： It's a unit of resolution
em： Relative to the parent element
rem： be relative to HTML Root element
vw： The width of the view 1/100,vh： Viewport height 1/100

rem combination js Achieve adaptation

newly build rem.js Method , stay main.js Reference the method

//  Set up  rem  function 
const baseSize = 32;

//  Set up  rem  function 
function setRem() {
    
	//  The current page width is relative to  750  Wide scaling , It can be modified according to your own needs .
	const scale = document.documentElement.clientWidth / 750
	//  Set the font size of the page root node 
	document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
	//rem Causes zoom below 1px The elements of the world are in and out , terms of settlement ：Math.min(scale, 2) Specifies the minimum conversion pixel , For smaller pixels , Don't convert to  rem  or  vw
}

//  initialization 
setRem();
//  Change the window size and reset  rem
window.onresize = function () {
    
	setRem()
}

Insufficient ：
1、 Calculation is troublesome , Decimal pixels may appear after calculation , The browser will round this part of the decimal , Render as an integer
2、cursor: pointer Element click background color change problem , Yes, added cursor:pointer Attribute elements , When you click on the mobile end , The background will highlight . Add for element tag-highlight-color:transparent Property to hide the background highlight .

Use postcss-px-to-viewport Plug in adaptation

1. Download and install npm i postcss-px-to-viewport -D
2. Create a new directory in the root directory .postcssrc.js

module.exports = ({
     file }) => {
    
    return {
    
        plugins: {
    
            autoprefixer: {
    }, //  Used to automatically add corresponding prefixes to different browsers , Such as -webkit-,-moz- wait 
            "postcss-px-to-viewport": {
    
                unitToConvert: "px",//  Units to be converted 
                viewportWidth: file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750,// UI The width of the design ,vant The relevant file viewport width is 375px.path.join('node_modules', 'vant') Because it adapts to different operating systems , stay mac The next result is node_modules/vant, And in the windows The next result is node_modules\vant
                unitPrecision: 6,//  Accuracy after conversion , That is, the number of decimal places 
                propList: ["*","!letter-spacing"],//  Specifies the of the conversion css Unit of property ,* Represent all css The units of attributes are converted , except letter-spacing
                viewportUnit: "vw",//  Specifies the window units to convert to , Default vw
                fontViewportUnit: "vw",//  Specifies the window unit to which the font needs to be converted , Default vw
                selectorBlackList: ['wrap'],//  Specifies a class name that is not converted to a window unit , As long as the class name contains wrap This string , It won't be matched 
                minPixelValue: 1,//  The default value is 1, Less than or equal to 1px No conversion 
                mediaQuery: true,//  Whether to query in the media css Conversion is also performed in the code , Default false
                replace: true, //  Whether to directly replace the attribute value after conversion 
                exclude: [/^((?!collectionVisual).)*$/],//  Set ignore file , Use regular to match directory names , This is a conversion only collectionVisual Folder 
                landscape: false //  Whether to handle the horizontal screen 
            }
        }
    }
}

Insufficient ：
1、postcss-px-to-viewport Although easy to use , But there is one drawback , Just for style Inside the , There is no way to convert inline styles ;
2、vw/vh There are some compatibility issues

Reference resources ：https://www.cnblogs.com/zhangnan35/p/12682925.html

utilize meta Label pair viewport Control

viewport： On mobile devices viewport It's the area of the device's screen that can be used to display our web pages

<meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

width： The width of the visible area , Values can be positive integers or keywords device-width
intial-scale： The first time the page is displayed is the zoom level of the visible area , Value 1.0 Then the page will be displayed according to the actual size , No zoom
maximum-scale=1.0： The maximum zoom value allowed for the user
minimum-scale=1.0： The minimum zoom value allowed for the user
user-scalable： Whether the page can be zoomed ,no Disable zoom , yes Represents that zoom is allowed

Insufficient ：
1、 If the screen scale span is too large , Relative to the design draft, the screen is too large or too small to display normally , In large screen mobile phone or vertical and horizontal screen switching scenarios, page elements may be stretched and deformed , Font size cannot change with screen size .
2、 When setting different properties of the box model , The reference element of its percentage setting is not unique , It's easy to complicate the layout problem

Reference resources ：https://blog.csdn.net/qq_42039281/article/details/83281074

Media Explorer

@media only screen and (min-width: 375px){
    
     style 1
}
@media only screen and (min-width: 750){
    
     style 2
}

Insufficient ：
1、 To match enough devices and screens , One web A page needs multiple designs , It's a lot of work
2、 A certain number of breakpoints need to be set through media query technology , The page changes significantly before and after reaching a breakpoint , The user experience is not very friendly