响应式布局媒体查询通用模板

在写响应式布局的时候总是记不住媒体查询的的分割处，这是公司官网和m站的分割，大概记一下，提醒自己，具体使用的时候再修改。

/*官网：*/
@media screen and (max-width:1024px){}
@media screen and (max-width:960px){}
@media screen and (max-width:830px){}
@media screen and (max-width:750px){}
@media screen and (max-width:640px){}
@media screen and (max-width:414px){}
@media screen and (max-width:375px){}
@media screen and (max-width:320px){}
@media all and (orientation:landscape){}
@media all and (orientation:portrait){}

M站：
/*custom*/
html{font-size:32px;}
body{font-size:24px;}
@media screen and (min-width:320px){
    html{
        font-size:16px;
    }
    body{
        font-size:12px;
    }
}
@media screen and (min-width:360px){
    html{
        font-size:18px;
    }
    body{
        font-size:12px;
    }
}
@media screen and (min-width:414px){
    html{
        font-size:20.7px;
    }
    body{
        font-size:14px;
    }
}
@media screen and (min-width:480px){
    html{
        font-size:24px;
    }
    body{
        font-size:18px;
    }
}
@media screen and (min-width:640px){
    html{
        font-size:32px;
    }
    body{
        font-size:24px;
    }
}

 

转载于:https://www.cnblogs.com/walk-on-the-way/p/5976127.html