CSS的媒体查询

 

使用document.body.clientwidth获取屏幕宽度值然后再进行判断写媒体查询条件

固定屏幕设置时可设置一个条件，判断条件从上往下执行，遇到合适的条件之后便不再往下执行，假如屏幕宽度是1024，那么遇到第一个条件时，当前屏幕已经等于1024，故执行当前代码。

媒体查询用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面

PC端响应式媒体断点

    @media (min-width: 1024px){
    body{font-size: 18px}
    } /*>=1024的设备*/

    @media (min-width: 1100px) {
    body{font-size: 20px}
    } /*>=1100的设备*/
    @media (min-width: 1280px) {
    body{font-size: 22px;}
    } /*>=1280的设备*/

    @media (min-width: 1366px) {

    body{font-size: 24px;}
    }  

    @media (min-width: 1440px) {
    body{font-size: 25px !important;}
    } 

    @media (min-width: 1680px) {
    body{font-size: 28px;}
    } 
    @media (min-width: 1920px) {
    body{font-size: 33px;}
    } 
pc端常用的多条件判断 (判断区间) 

@media screen and (max-width: 1220px) and (min-width: 920px){

.formInput_one span {

    width: 70px;

    font-size: 12px;

}

}

@media screen and (max-width: 1450px) and (min-width: 1220px){

.formInput_one span {

 width: 74px;

}

}

@media screen and (max-width: 1450px) and (min-width: 1220px){

.formInput_one span {

     width: 74px;

}

}

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

.formInput_one span {

     width: 74px;

}

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

.formInput_one span {

     width: 74px;

}

}