媒体查询 + 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，可以更好地适应不同的屏幕尺寸。