媒体查询 + rem 实现 h5 移动端适配

媒体查询 + rem 实现 h5 移动端适配

在 H5 移动端项目中，使用媒体查询（Media Queries）和 rem 单位进行适配是一种非常实用的方法。其核心原理在于利用媒体查询来检测设备的视口宽度或其他特性，并根据这些特性动态调整根元素的字体大小，进而影响到所有使用 rem 作为单位的元素。这种方式允许你在不同屏幕尺寸上调整布局和字体大小，从而提升用户体验。

实现原理

• 媒体查询：通过 CSS 的媒体查询来针对不同的屏幕尺寸定义不同的样式规则。这允许你在特定条件下应用特定的样式，比如在窄屏幕上隐藏某些元素或者改变布局。

• 使用 rem 单位：在 CSS 中，使用 rem 单位代替 px 单位来定义元素的尺寸。rem 是相对于根元素（即 html 元素）的字体大小，因此当根元素的字体大小变化时，所有使用 rem 单位定义的元素尺寸也会相应变化。

代码示例

CSS 代码示例

$ui_width: 750; // 设计稿750px
$num: 15; // 分为15等份
// 因为用户可能是用pc端打开网页 ，则默认是html字体大小是50  750/15
html {
    font-size: $ui_width / $num + px;
}

@media screen and (min-width: 320px) {
    html {
        font-size: 320 / $num + px
    }
}

@media screen and (min-width: 360px) {
    html {
        font-size: 360 / $num + px
    }
}

@media screen and (min-width: 375px) {
    html {
        font-size: 375 / $num + px
    }
}

@media screen and (min-width: 384px) {
    html {
        font-size: 384 / $num + px
    }
}

@media screen and (min-width: 400px) {
    html {
        font-size: 400 / $num + px
    }
}

@media screen and (min-width: 412px) {
    html {
        font-size: 412 / $num + px
    }
}

@media screen and (min-width: 424px) {
    html {
        font-size: 424 / $num + px
    }
}

@media screen and (min-width: 480px) {
    html {
        font-size: 480 / $num + px
    }
}

@media screen and (min-width: 540px) {
    html {
        font-size: 540 / $num + px
    }
}

@media screen and (min-width: 720px) {
    html {
        font-size: 720 / $num + px
    }
}

@media screen and (min-width: 750px) {
    html {
        font-size: 750 / $num + px
    }
}

在 Vue 中使用 rem 单位来定义元素的尺寸

<template>
  <div class="container">
    <button class="button">点击我</button>
  </div>
</template>

<style scoped>
.container {
    width: 90%;
    margin: 0 auto;
    padding: 1rem;
}

.button {
    width: 20rem;
    height: 4rem;
    font-size: 1.2rem;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
}
</style>

<script>
export default {
  name: 'MyComponent'
};
</script>

总结

通过上述步骤，你可以实现一个基于 rem 单位的移动端适配方案。这种方法可以确保应用在不同设备上都能有良好的显示效果，并且通过动态调整根元素的 font-size，可以更好地适应不同的屏幕尺寸。