media媒体查询从移动端到PC端的适配

第一种

最开始用的，修修补补成了这个样子，不能全部复用，但是很清楚

/* 小于768 ipad*/
@media screen and (max-width:768px) {
    html {font-size: 18px;}
}
/*小于 480px  手机*/
@media screen and (max-width:480px){
    html {font-size: 16px;}
}

/*768-1023*/
@media screen and (min-width:769px) and (max-width:1023px){
     html {font-size: 20px;}
}
/*1024-1279*/
@media screen and (min-width:1024px) and (max-width:1279px){
     html {font-size: 24px;}
}
/*1280-1440*/
@media screen and (min-width:1280px) and (max-width:1439px){
    html{font-size: 26px;}
}

/*>=1440的设备屏幕*/
@media screen and (min-width: 1440px) {
    html{font-size: 28px;}
}
/*>=1920的设备屏幕*/
@media screen and (min-width: 1920px) {
    html{font-size: 34px;}
}

第二种

改进过，可以复用

/* PC端 */
/* >=1920px */
@media (min-width:1921px) {
    html{
        font-size: 30px;
    }
}

@media (max-width:1920px) {
    html{
        font-size: 26px;
    }
}

@media (max-width:1600px) {
    html{
        font-size: 24px;
    }
}

@media (max-width:1440px) {
    html{
        font-size: 22px;
    }
}

@media (max-width:1280px) {
    html{
        font-size: 20px;
    }
}

@media (max-width:1024px) {
    html{
        font-size: 18px;
    }
}

/* 移动端 */
@media  (max-width: 999px) {
    html{
        font-size: 20px;
    }
}
@media (max-width: 759px){
    html{
        font-size: 20px;
    }   
}
@media (max-width: 376px){
    html{
        font-size: 20px;
    }
}

第三种 1400px以上用px写元素 900px-1400px用vw自适应

@media screen and (min-width: 1441px) {}

@media screen and (min-width: 1510px) {}

@media screen and (min-width: 1600px) {}

@media screen and (min-width: 1680px) {}

@media screen and (min-width: 1920px) {}

@media screen and (max-width: 1280px) {}

//手机端
@media screen and (max-width: 900px) {}

@media screen and (max-width: 320px) {}