css中添加屏幕自適應方法(rem)


css中添加屏幕自適應方法(rem)

只需要在公共css文件中添加下面代碼:設計稿以750px,基礎字體為20px為例,兼容性高,使用過程中px轉化為rem即可

/*豎屏*/
@media screen and (max-aspect-ratio: 13/9){
    html {font-size:calc(100vw / 750 * 100);}
    @media screen and (min-width: 750px) {
        html{font-size:100px;max-width:750px;}
    }
}
/*橫屏*/
@media screen and (min-aspect-ratio: 13/9) {
    html {font-size:calc(100vmax / 750 * 100);}
    html .lockScreenTip {display:block;}
    html.input_focus .lockScreenTip {display:none;} 
    @media screen and (min-width: 750px) {
        html{font-size:100px;max-width:750px;}
    }
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM