锐客网

  1. 首页 > it技术 > >

HTML5|HTML5 移动端适配问题

关于移动端的适配，最近很多朋友在问我这个适配问题究竟该怎么适配，怎么书写，以及横屏之后的影响，今 天就写一篇关于移动端适配的问题。
首先是对整个页面的font-size的设置，我比较常用的有两种方案：
方案1.利用js对页面宽度进行检测并且进行计算绝对值的计算，具体比例计算为40px：1rem；计算公式如下：
document.documentElement.style.fontSize =document.documentElement.clientWidth /360 *20 +'px';
window.onresize =function() {
document.documentElement.style.fontSize =document.documentElement.clientWidth /360 *20 +'px';
}
此方法的适用性较为广泛，但部分问题较为尖锐：如计算得出的为浮点数值，浏览器解析之后产生偏差等！
方案2.在加载css格式化文件的时候，加入媒体查询设置font-size，css公式如下：
@media screen and (max-width: 750px){
html{font-size:30px; }
}
@media screen and (min-width:640px) and (max-width:749px){
html{font-size:25px; }
【HTML5|HTML5 移动端适配问题】}
@media screen and (min-width:480px) and (max-width:639px){
html{font-size:20px; }
}
@media screen and (min-width:320px) and (max-width:479px){
html{font-size:15px; }
}
此方案的比例换算根据UI给定的PSD的尺寸，在750*1334的尺寸下为30px：1rem（即目前主流的手机像素比，若项目PSD为更大尺寸时，请设置适当的宽度监控及font-size大小），此方案存在有一些弊端，但是总体来说可用部分，某些情况下会出现页面坍塌的问题！
现在详细解释一下两种方案：
方案1的程式最大的弊端就是浮点数的差值，此差值解决之后，整个方案能够适用于任何项目，但一直没有找到更好的解决办法，我目前在用的解决方案就是行内横向宽度能用百分比固定时尽量使用百分比固定，若存在某项宽度必须固定，而另一个不必固定的时候我的解决方案为：A内有B和C两个块，B块计算的宽度为6rem，而C块若宽度写死，在不同屏幕尺寸下会坍塌，故给A一个padding值，使B定位到padding之上，A剩下的空间全部给C，C的宽高全100%；目前此方案暂时在项目里还未曾出现问题。
方案2的最大问题就是设置宽高的时候，无法随着屏幕拓展进行等比例缩放，经查问题和方案1所出问题基本一致，方案1的解决方案理论上能在方案2上同样适用（本人上家公司的项目使用方案2，但未遇到此问题，此问题是自己在写混合式App时所遇到，解决方案较为复杂，不推荐，推荐方案1的解决方案），有兴趣的朋友可以尝试一下。
此两种方案，基本满足目前大多数项目的开发，可能方案2 的比例不同，但结果都是一样的，欢迎大家指导建议！

    推荐阅读


    上一篇：你还在怪孩子考不上普高吗（大学升学率70%以上，初中生升学率50%）

    下一篇：微信硬件平台|微信硬件平台从入门到精通（服务器端）