媒体查询 和rem布局

Posted 2021-02-10 xm16

@media screen and (min-width: 320px) {html{font-size: 45.66px;}}
@media screen and (min-width: 360px) {html{font-size:48px;}}
@media screen and (min-width: 375px) {html{font-size:50px;}}
@media screen and (min-width: 400px) {html{font-size:53.33px;}}
@media screen and (min-width: 414px) {html{font-size:55.19px;}}
@media screen and (min-width: 440px) {html{font-size:58.66px;}}
@media screen and (min-width: 480px) {html{font-size:64px;}}
@media screen and (min-width: 520px) {html{font-size:69.33px;}}
@media screen and (min-width: 560px) {html{font-size:74.66px;}}
@media screen and (min-width: 600px) {html{font-size:80px;}}
@media screen and (min-width: 640px) {html{font-size:85.33px;}}
@media screen and (min-width: 680px) {html{font-size:90.66px;}}
@media screen and (min-width: 720px) {html{font-size:96px;}}
@media screen and (min-width: 760px) {html{font-size:101.33px;}}
@media screen and (min-width: 800px) {html{font-size:106.66px;}}
@media screen and (min-width: 960px) {html{font-size:128px;}}

//js动态修改rem


window.onload = function(){
    getRem(750,100)  //第一位参数和设计图一样大小
};
window.onresize = function(){
    getRem(750,100)
};
function getRem(pwidth,prem){
    var html = document.getElementsByTagName("html")[0];
    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
    html.style.fontSize = oWidth/pwidth*prem + "px";
}


// 小米官网的写法
// !function(n){
//     var  e=n.document,
//          t=e.documentElement,
//          i=750,
//          d=i/100,
//          o="orientationchange"in n?"orientationchange":"resize",
//          a=function(){
//              var n=t.clientWidth||320;n>750&&(n=750);
//              t.style.fontSize=n/d+"px"
//          };
//          e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
// }(window);