移动端前端适配方案(总结)

1. 为什么需要移动端适配？

在PC端开发中，我们通常使用px做为长度单位进行开发，因为PC端屏幕大小不会随着设备变化而变化，因此使用固定的像素单位长度并不会影响网站的显示效果。然而在移动端，因为移动设备的屏幕尺寸各异，因此使用固定像素的方式进行设计和开发，可能会导致在不同设备上出现内容偏大或偏小，影响用户体验。

因此，为了在移动设备上保证网站的显示效果，我们需要对移动端进行适配。

2. 移动端适配方案有哪些？

目前常见的移动端适配方案有以下几种：

2.1 固定像素方案

也称为1px方案，在CSS文件中使用固定的像素单位进行布局，而在必要的地方使用px转换成rem（相对于根元素的字体大小）。

该方案虽然简便易行，但是可能出现在不同设备上出现偏差的问题。

示例代码：

body {
    font-size: 16px;
}
.box {
    width: 200px;
    height: 100px;
    border: 1px solid gray;
    font-size: 20px;
    margin: 0 auto;
}
@media screen and (min-width: 320px) {
    html {
        font-size: 20px;
    }
}
@media screen and (min-width: 360px) {
    html {
        font-size: 22.5px;
    }
}
@media screen and (min-width: 375px) {
    html {
        font-size: 23.4375px;
    }
}
@media screen and (min-width: 400px) {
    html {
        font-size: 25px;
    }
}
@media screen and (min-width: 414px) {
    html {
        font-size: 25.875px;
    }
}
@media screen and (min-width: 480px) {
    html {
        font-size: 30px;
    }
}

2.2 Flexible方案

该方案使用了JS脚本来动态计算并设置html元素的字体大小，从而实现页面的相对适配。

该方案的优势在于可适配性好，但是需要依赖JS脚本，对性能有一定影响。

示例代码：

//viewport布局视口设置
<script>
window.onload = function() {
    var documentWidth = document.documentElement.clientWidth;
    if (documentWidth > 750) {
        documentWidth = 750;
    }
    document.documentElement.style.fontSize = documentWidth / 7.5 + 'px';
}
window.onresize = function () {
    var documentWidth = document.documentElement.clientWidth;
    if (documentWidth > 750) {
        documentWidth = 750;
    }
    document.documentElement.style.fontSize = documentWidth / 7.5 + 'px';
}
</script>

3. 如何选择合适的方案？

在选择合适的适配方案时，我们可以从以下几个方面进行考虑：

3.1 开发者的技术水平

对于技术水平较高的开发者，使用flexible方案可以实现更灵活的适配，但是同时需要关注性能优化和代码维护等问题。对于新手来说，可以考虑使用固定像素方案，避免在适配中出现问题。

3.2 产品的适配要求

如果是只需要适配少数几个机型的产品，可以考虑使用固定像素方案。如果需要适配更多的机型，建议使用flexible方案。

3.3 移动端性能

如果移动端的性能比较差，可以考虑使用固定像素方案，避免JS的运行导致过多的资源占用。

4. 总结

移动端的适配对于网站的用户体验至关重要，我们需要根据我们的实际情况选择合适的方案，为用户提供更加流畅的页面体验。

5. 示例说明

以下是一段flexible方案的示例代码，用于动态设置html元素的字体大小：

window.onload = function() {
    var documentWidth = document.documentElement.clientWidth;
    if (documentWidth > 750) {
        documentWidth = 750;
    }
    document.documentElement.style.fontSize = documentWidth / 7.5 + 'px';
}
window.onresize = function () {
    var documentWidth = document.documentElement.clientWidth;
    if (documentWidth > 750) {
        documentWidth = 750;
    }
    document.documentElement.style.fontSize = documentWidth / 7.5 + 'px';
}

以上的代码需要放置在HTML中，以保证JS能够正确运行。当viewport布局视口的宽度发生变化时，该JS脚本会自动计算html元素的字体大小，并设置为相应的数值，以实现移动端的适配。