media媒体查询，移动端适配尺寸大全

大佬教程收集整理的这篇文章主要介绍了media媒体查询，移动端适配尺寸大全，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

<pre class="de1">/第一种/
@media screen and(min-width: 320pX)and(max-width: 359pX) {
html {
font-size: 12.8px;
}
}
@media screen and(min-width: 360pX)and(max-width: 374pX) {
html {
font-size: 14.4px;
}
}
@media screen and(min-width: 375pX)and(max-width: 385pX) {
html {
font-size: 15px;
}
}
@media screen and(min-width: 386pX)and(max-width: 392pX) {
html {
font-size: 15.44px;
}
}
@media screen and(min-width: 393pX)and(max-width: 400pX) {
html {
font-size: 16px;
}
}
@media screen and(min-width: 401pX)and(max-width: 414pX) {
html {
font-size: 16.48px;
}
}
@media screen and(min-width: 750pX)and(max-width: 799pX) {
html {
font-size: 30.72px;
}
}
/第二种/
@media screen and (min-width: 320pX) {
html {
font-size: 14px;
}
}
@media screen and (min-width: 360pX) {
html {
font-size: 16px;
}
}
@media screen and (min-width: 400pX) {
html {
font-size: 18px;
}
}
@media screen and (min-width: 440pX) {
html {
font-size: 20px;
}
}
@media screen and (min-width: 480pX) {
html {
font-size: 22px;
}
}
@media screen and (min-width: 640pX) {
html {
font-size: 28px;
}
}
/第三种设计图750px;常用配制/
html {
font-size:100px;
font-family:'微软雅黑','苹方','思源黑体';
}
/效果图750px/
@media(max-width:640pX) {
html {
font-size:85.33px;
}
}
/Android常用宽度/
@media(max-width:540pX) {
html {
font-size:72px;
}
}
/Android常用宽度/
@media(max-width:480pX) {
html {
font-size:64px;
}
}
/Android常用宽度/
@media(max-width:445pX) {
html {
font-size:60px;
}
} @media(max-width:414pX) {
html {
font-size:55.2px;
}
}
/i6Plus,i7Plus宽度/
@media(max-width:375pX) {
html {
font-size:50px;
}
}
/i6,i7宽度/
@media(max-width:360pX) {
html {
font-size:48px;
}
}
/Android常用宽度/
@media(max-width:320pX) {
html {
font-size:42.67px;
}
}
/i5宽度/
 

大佬总结

以上是大佬教程为你收集整理的media媒体查询，移动端适配尺寸大全全部内容，希望文章能够帮你解决media媒体查询，移动端适配尺寸大全所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。