css中新增螢幕自適應方法(rem)
阿新 • • 發佈:2018-12-28
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;} } }