@media 实现手机和电脑屏幕的自适应效果

@media  screen  and (max-width: 1600px) and (min-width: 1400px) {
            
            #four_flh .flahBg ul.mile  img {
                width: 100%;
                display: block;
                margin: 0 auto;
                height: 17rem;
                /* height: 100%; */
            }
}
@media  screen and (max-width: 1400px) and (min-width: 1200px) {
            
            #four_flh .flahBg ul.mile  img {
                width: 100%;
                display: block;
                margin: 0 auto;
                height: 17rem;
                /* height: 100%; */
            }
}

@media  screen and (max-width: 1200px) and (min-width: 1000px) {
            
            #four_flh .flahBg ul.mile  img {
                width: 100%;
                display: block;
                margin: 0 auto;
                height: 15rem;
                /* height: 100%; */
            }
}
    
@media  screen and (max-width: 1000px)  and (min-width: 800px){
                
                #four_flh .flahBg ul.mile  img {
                    width: 100%;
                    display: block;
                    margin: 0 auto;
                    height: 10rem;
                    /* height: 100%; */
                }
}
    

@media  screen and (max-width: 800px)  and (min-width: 600px){
    
      #four_flh .flahBg ul.mile  img {
        width: 100%;
        display: block;
        margin: 0 auto;
        height: 10rem;
        /* height: 100%; */
    }

}    
        
@media  screen and (max-width: 600px) {
    
    
    #four_flh .flahBg ul.mile  img {
        width: 100%;
        display: block;
        margin: 0 auto;
        height: 5rem;
        /* height: 100%; */
    }
}

原文链接：https://blog.csdn.net/u013558123/article/details/86231874