WEB页面实现比例缩放适配——通过rem和vw实现1.rem和vw介绍1.remrem是一个相对长度单位，表示相对于根A元素（即html元素）的font-size（字体大小）的倍数。浏览器支持：如果根元素的字体大小为12pxhtml{font-size:12px;}h1{font-size:2rem;/*2×12px=24px*/}p{font-size:1.5rem;/*1.5×12px=18px*/}div{宽度：10rem;/*10×12px=120px*/}如果根元素的字体大小是16pxhtml{font-size:16px;}h1{font-size:2rem;/*2×16px=32px*/}p{font-size:1.5rem;/*1.5×16px=24px*/}div{width:10rem;/*10×16px=160px*/}2.vwvw是相对长度单位，相对于浏览器窗口的宽度，将浏览器窗口宽度分成100个单位。vw浏览器支持：CaniuseOperaMini不支持该属性示例当浏览器窗口宽度为320px时，1vw=3.2pxp{font-size:5vw;/*5×3.2px=16px*/}div{width:20vw;/*20×3.2px=64px*/}当浏览器窗口宽度为375px时，1vw=3.75pxp{font-size:5vw;/*5×3.75px=18.75px*/}div{width:20vw;/*20×3.75px=75px*/}2.结合rem和vw实现WEB页面的比例缩放1.选择参考窗口宽度示例：iPhone6/7/8/X的屏幕宽度为375px作为基本窗口宽度；15px作为html元素的font-size，是rem单位的基本长度。html{字体大小：15px;}h1{字体大小：2rem;/*2×15px=30px*/}p{font-size:1.2rem;/*1.2×15px=18px*/}div{width:10rem;/*10×15px=150px*/}注意：html元素的font-size不能太大也不能太小。当font-size过大时，基于它的rem值会失去精度，导致较大的误差。font-size过小时，由于很多主流浏览器的font-size不能小于12px，所以当font-size小于12px时，会以12px显示。此时rem单位会以12px为单位计算，页面会完全偏离。2.将html元素的font-size换成vw表示窗口宽度：375px=>1vw=3.75px=>15px=(15/3.75)vw=4vw所以html元素的font-size可以替换为4vwhtml{font-size:4vw;}h1{font-size:2rem;/*2×4vw×3.75px=30px*/}p{font-size:1.2rem;/*1.2×4vw×3.75px=18px*/}div{width:10rem;/*10×4vw×3.75px=150px*/}当窗口宽度调整为320px时，1vw=3.2px4vw=4×3.2px=12.8pxhtml{font-size:4vw;}h1{font-size:2rem;/*2×4vw×3.2px=25.6px*/}p{font-size:1.2rem;/*1.2×4vw×3.2px=15.36px*/}div{width:10rem;/*10×4vw×3.2px=128px*/}可以看出，所有以rem为单位的字体大小和长度都会随着屏幕宽度的放大和缩小按比例缩放。重要的是再说一遍：html元素的font-size不宜太大，也不宜太小。当font-size过大时，基于它的rem值会失去精度，导致较大的误差。font-size过小时，由于很多主流浏览器的font-size不能小于12px，所以当font-size小于12px时，会以12px显示。此时rem单位会以12px为单位计算，页面会完全偏离。3.设置页面的最大宽度和最小宽度。当页面小于300px时，将不再缩小。当页面大于500px时，不会放大。当窗口宽度为300px时，1vw=3px4vw=4×3px=12px。当窗口宽度为500px时1vw=5px4vw=4×5px=20px@mediascreenand(max-width:300px){html{width:300px;字体大小：12px；}}@mediascreenand(min-width:500px){html{width:500px;字体大小：20px；保证金：0自动；/*使窗口水平居中显示*/}}三、根据浏览器宽度切换PC和WAP页面1.当页面宽度大于阈值时，自动切换到PC页面，当小于阈值时，自动切换到PC页面阈值，切换回WAP页面WAP页面
