移动端web css适配

最新推荐文章于 2024-08-16 08:15:00 发布

lucky芬

最新推荐文章于 2024-08-16 08:15:00 发布

阅读量2.8k

点赞数

分类专栏：移动端

移动端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一位大神写的：

html{font-size:100px;font-size:calc(1000vw/32);background-color:#E1E1E1;}
@media all and (max-width:320px){
  html{font-size:100px;}
}
@media all and (min-width:640px){
  html{font-size:200px;}
}
body{min-width:320px;max-width:640px;margin:0 auto;color:#333;padding:0;font:normal .12em/1.6 "Microsoft YaHei",Verdana,Tahoma;background-color:#FFF;}

这里使用了 font-size:calc(1000vw/32);
vw Viewport宽度， ** 1vw ** 等于viewport宽度的1%
vh Viewport高度， ** 1vh ** 等于viewport高的的1%

vw和vh会随着viewport变化自动变化，再也不用js控制全屏神马的了

IE10＋和现代浏览器都支持这两个单位

CSS calc()函数可以和<lenght>、<frequency>、<angle>、<time>、<number>或<integer>一起使用，它可以执行+、-、*和/等数学运算，并将计算结果和前面提到的测量单位组合为一个新的CSS属性值。
根据自己的需求更改了一下

html {
            font-family: 'Heiti SC', 'Microsoft YaHei';
            font-size: 20px;
            outline: 0;
            -webkit-text-size-adjust: none;
        }
@media only screen and (min-width:320px){html{font-size: 17.0667px !important}
}
@media only screen and (min-width:414px){html{font-size: 22.08px !important}
}
@media only screen and (min-width:480px){html{font-size:25.6px !important}
}
@media only screen and (min-width:569px){html{font-size: 30.3467px !important}
}
@media only screen and (min-width:641px){html{font-size: 34.1867px !important}
}
html{font-size: calc(2 * 100vw / 37.5) !important} //如果在低版本安卓下失效将使用上面的媒体查询