移动端自适应初始化

/*
 *
 * 在实际项目开发时,建议为App单独写一个css文件,从而实现项目的自定义皮肤功能;
 * 
 * */
 /* * * * font reset * * * */
html {
    font-size: 15px;
}

@media screen and (orientation: portrait) and (min-width:320px) {
    html {
        font-size:12.8px!important
    }
}

@media screen and (orientation: landscape) and (min-height:320px) {
    html {
        font-size:12.8px!important
    }
}

@media screen and (orientation: portrait) and (min-width:360px) {
    html {
        font-size:14.4px!important
    }
}

@media screen and (orientation: landscape) and (min-height:360px) {
    html {
        font-size:14.4px!important
    }
}

@media screen and (orientation: portrait) and (min-width:375px) {
    html {
        font-size:15px!important
    }
}

@media screen and (orientation: landscape) and (min-height:375px) {
    html {
        font-size:15px!important
    }
}

@media screen and (orientation: portrait) and (min-width:384px) {
    html {
        font-size:15.36px!important
    }
}

@media screen and (orientation: landscape) and (min-height:384px) {
    html {
        font-size:15.36px!important
    }
}

@media screen and (orientation: portrait) and (min-width:400px) {
    html {
        font-size:16px!important
    }
}

@media screen and (orientation: landscape) and (min-height:400px) {
    html {
        font-size:16px!important
    }
}

@media screen and (orientation: portrait) and (min-width:411px) {
    html {
        font-size:16.44px!important
    }
}

@media screen and (orientation: landscape) and (min-height:411px) {
    html {
        font-size:16.44px!important
    }
}

@media screen and (orientation: portrait) and (min-width:414px) {
    html {
        font-size:16.56px!important
    }
}

@media screen and (orientation: landscape) and (min-height:414px) {
    html {
        font-size:16.56px!important
    }
}

@media screen and (orientation: portrait) and (min-width:480px) {
    html {
        font-size:19.2px!important
    }
}

@media screen and (orientation: landscape) and (min-height:480px) {
    html {
        font-size:19.2px!important
    }
}

@media screen and (orientation: portrait) and (min-width:568px) {
    html {
        font-size:22.72px!important
    }
}

@media screen and (orientation: landscape) and (min-height:568px) {
    html {
        font-size:22.72px!important
    }
}

@media screen and (orientation: portrait) and (min-width:640px) {
    html {
        font-size:25.6px!important
    }
}

@media screen and (orientation: landscape) and (min-height:640px) {
    html {
        font-size:25.6px!important
    }
}

@media screen and (orientation: portrait) and (min-width:667px) {
    html {
        font-size:26.68px!important
    }
}

@media screen and (orientation: landscape) and (min-height:667px) {
    html {
        font-size:26.68px!important
    }
}

@media screen and (orientation: portrait) and (min-width:731px) {
    html {
        font-size:29.24px!important
    }
}

@media screen and (orientation: landscape) and (min-height:731px) {
    html {
        font-size:29.24px!important
    }
}

@media screen and (orientation: portrait) and (min-width:736px) {
    html {
        font-size:29.44px!important
    }
}

@media screen and (orientation: landscape) and (min-height:736px) {
    html {
        font-size:29.44px!important
    }
}

@media screen and (orientation: portrait) and (min-width:750px) {
    html {
        font-size:30px!important
    }
}

@media screen and (orientation: landscape) and (min-height:750px) {
    html {
        font-size:30px!important
    }
}

评论已关闭