常用响应式

rem

通过设置不同屏幕尺寸html的font-size实现响应式
PC端

@media screen and(min-width: 1024px){
    html{font-size: 12px}
} /*>=1024的设备屏幕*/
     
@media screen and(min-width: 1100px) {
    html{font-size: 14px}
} /*>=1100的设备屏幕*/
@media (min-width: 1280px) {
    html{font-size: 18px;}
} /*>=1280的设备屏幕*/
     
@media screen and(min-width: 1366px) {
    html{font-size: 20px;}
} /*>=1366的设备屏幕*/ 
     
@media screen and(min-width: 1440px) {
    html{font-size: 24px;}
} /*>=1440的设备屏幕*/ 
     
@media screen and(min-width: 1680px) {
    html{font-size: 26px;}
}  /*>=1680的设备屏幕*/ 
@media screen and(min-width: 1920px) {
    html{font-size: 30px;}
}  /*>=1920的设备屏幕*/ 

移动端

@media only screen and(max-width: 374px){
    /* iphone5或更小尺寸 */
    html{font-size: 86px}
} 
@media only screen and(min-width: 374px) and (max-width: 413px){
    /* iphone6/7/8/X */
    html{font-size: 100px}
} 

@media only screen and(min-width: 414px) {
    /* iphone6p或更大尺寸 */
    html{font-size: 110px}
} 

vw/vh

rem弊端：具有阶梯型，一定要到了规定尺寸才会有变化，不能实现顺滑的变化。

window.screen.height    //屏幕高度
window.innerHeight       //网页视口高度
document.body.clientHeight     //body高度

这里的vh就是网页视口高度，这里的vh是百分比计算，也就是1vh=1%
vmax取宽高更大的那个值，vmin取宽高更小的那个值