天天看點

移動端和PC端媒體查詢自适應

@media screen and(min-width: 320px)and(max-width: 359px){
html{
font-size: 12.8px;
}
}
@media screen and(min-width: 360px)and(max-width: 374px){
html{
font-size: 14.4px;
}
}
@media screen and(min-width: 375px)and(max-width: 385px){
html{
font-size: 15px;
}
}
@media screen and(min-width: 386px)and(max-width: 392px) {
html {
font-size: 15.44px;
}
}
@media screen and(min-width: 393px)and(max-width: 400px){
html{
font-size: 16px;
}
}
@media screen and(min-width: 401px)and(max-width: 414px){
html{
font-size: 16.48px;
}
}
@media screen and(min-width: 750px)and(max-width: 799px){
html{
font-size: 30.72px;
}
}
           

各位可以直接的引用

還有各種裝置的自适應的媒體查詢,極端手段。非特殊情況請勿使用。如下:

/* 所有手機尺寸的适配 */
@media only screen and(min-width: 319px)and(max-width: 359px){
    html{
        font-size: 12.8px;
    }
}
@media only screen and (min-width: 360px) and (max-width: 374px) {
    html{
        font-size: 14.4px;
    }
}
@media only screen and (min-width: 375px) and (max-width: 385px) {
    html{
        font-size: 15px;
    }
}
@media only screen and(min-width: 386px)and(max-width: 392px) {
    html {
        font-size: 15.44px;
    }
}
@media only screen and(min-width: 393px)and(max-width: 400px){
    html{
        font-size: 16px;
    }
}
@media only screen and(min-width: 401px)and(max-width: 414px){
    html{
        font-size: 16.48px;
    }
}
@media (min-width: 536px){
    html{
        font-size: 21.5px;
    }
}


/* 所有PC裝置的适配 */
@media (min-width: 768px){
html{font-size: 31px}
} 

@media (min-width: 848px){
html{font-size: 34.2px}
} 

@media (min-width: 928px){
html{font-size: 37.4px}
} 

@media (min-width: 1008px){
html{font-size: 40.6px}
} 

@media (min-width: 1024px){
html{font-size: 42px}
} /*>=1024的裝置*/

@media (min-width: 1100px) {
html{font-size: 43.5px}
} /*>=1100的裝置*/
@media (min-width: 1280px) {
html{font-size: 50.8px;}
} /*>=1280的裝置*/

@media (min-width: 1366px) {

html{font-size: 54px;}
}  

@media (min-width: 1440px) {
html{font-size: 57.3px;}
} 

@media (min-width: 1520px) {
html{font-size: 60.5px ;}
} 

@media (min-width: 1600px) {
html{font-size: 63.7px ;}
} 


@media (min-width: 1680px) {
html{font-size: 66.9px;}
} 

@media (min-width: 1760px) {
html{font-size:70.1px;}
} 

@media (min-width: 1840px) {
html{font-size: 73.3px;}
} 

@media (min-width: 1920px) {
html{font-size: 75.5px;}
}