css基于媒体查询和 rem 的响应式布局实践

下面为你详细讲解“CSS基于媒体查询和rem的响应式布局实践”的完整攻略。

一、什么是媒体查询

媒体查询是CSS3比较常用的一个新特性，它可以让CSS样式对不同的设备进行特定的适配。

媒体查询可以根据设备的参数来匹配不同的CSS样式，常见的参数包括屏幕大小、分辨率、设备方向等，例如下面的代码就是一个CSS的媒体查询：

@media screen and (max-width:768px){
    /* 样式代码 */
}

这段代码的意思是，当屏幕宽度小于等于768像素时，应用其中的样式。

二、什么是rem

rem是一种基于根元素fontSize的相对单位，可以很好的适配不同的设备。假设HTML根元素的fontSize为16px，那么1rem等于16px，2rem等于32px，以此类推。

rem的好处是可以适配不同设备的分辨率，避免了需要使用媒体查询来匹配特定的分辨率。

三、使用媒体查询和rem实现响应式布局

使用媒体查询和rem实现响应式布局的步骤如下：

1. 在HTML的头部加入meta标签，设置viewport的宽度、初始缩放值和最大缩放值。例如：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

1. 设置HTML根元素的fontSize为屏幕宽度的1/10，即10vw。例如：

html{
    font-size:10vw;
}

这样设置的好处是，当屏幕宽度变化时，HTML根元素的fontSize也会相应变化，实现了适配不同设备的效果。

1. 使用媒体查询来适配不同设备的屏幕尺寸，例如：

/* 当屏幕宽度小于等于768px时 */
@media screen and (max-width:768px){
    /* 样式代码 */
}

/* 当屏幕宽度在769px到1024px之间时 */
@media screen and (min-width:769px) and (max-width:1024px){
    /* 样式代码 */
}

/* 当屏幕宽度大于1024px时 */
@media screen and (min-width:1025px){
    /* 样式代码 */
}

1. 使用rem来设置样式，例如：

/* 设置字体大小 */
h1{
    font-size:3rem;
}

/* 设置margin和padding */
p{
    margin:1rem;
    padding:0.5rem;
}

/* 设置width和height */
div{
    width:20rem;
    height:10rem;
}

这样设置的好处是，不必为不同设备设置特定的宽度、高度、字体大小等，实现了快速适配不同设备的效果。

四、示例说明

下面通过两个示例来说明媒体查询和rem的使用：

示例一：响应式导航菜单

这个示例实现了一个响应式导航菜单，当屏幕宽度小于等于768px时，在页面顶部显示一个汉堡菜单，点击后显示下拉菜单。

首先，在HTML中添加导航菜单的代码：

<header>
    <nav>
        <div class="logo">
            <a href="#">Logo</a>
        </div>
        <div class="hamburger">
            <input id="menu" type="checkbox">
            <label for="menu" class="menu">
                <span></span>
                <span></span>
                <span></span>
            </label>
        </div>
        <ul class="menu-items">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
            <li><a href="#">Item 5</a></li>
        </ul>
    </nav>
</header>

然后，在CSS中设置菜单的样式和响应式布局：

/* 设置导航菜单 */
header{
    background-color:#333;
    color:#fff;
    height:4rem;
    display:flex;
    align-items:center;
}

nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
}

.logo a{
    color:#fff;
    font-size:1.5rem;
}

.hamburger{
    display:none;
}

.menu-items{
    display:flex;
    list-style:none;
    margin:0;
    padding:0;
}

.menu-items li{
    margin:0 1rem;
}

.menu-items li a{
    color:#fff;
    font-size:1rem;
}

/* 设置响应式布局 */
@media screen and (max-width:768px){
    .hamburger{
        display:block;
    }
    .menu-items{
        position:fixed;
        width:100%;
        height:calc(100vh - 4rem);
        top:4rem;
        right:0;
        left:0;
        bottom:0;
        z-index:99;
        background-color:#333;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        transform:translateX(100%);
        transition:transform 0.3s ease-in-out;
    }

    .menu-items.show{
        transform:translateX(0%);
    }

    .menu-items li{
        margin:1rem 0;
    }
}

在这段CSS中，设置了默认的导航菜单样式，以及响应式布局的样式。对于响应式布局，当屏幕宽度小于等于768px时，显示汉堡菜单，并设置下拉菜单样式，同时添加了过渡动画。

最后，在JavaScript中设置汉堡菜单的点击事件：

const hamburger = document.querySelector('.hamburger');
const menuItems = document.querySelector('.menu-items');

hamburger.addEventListener('click', function(){
    menuItems.classList.toggle('show');
})

示例二：响应式图片布局

这个示例实现了一个响应式的图片布局，当屏幕宽度小于等于768px时，图片布局从一列变成两列，保证图片不会被裁剪。

首先，在HTML中添加图片的代码：

<div class="container">
    <img src="./img/image-1.jpg" alt="">
    <img src="./img/image-2.jpg" alt="">
    <img src="./img/image-3.jpg" alt="">
    <img src="./img/image-4.jpg" alt="">
    <img src="./img/image-5.jpg" alt="">
    <img src="./img/image-6.jpg" alt="">
    <img src="./img/image-7.jpg" alt="">
    <img src="./img/image-8.jpg" alt="">
</div>

然后，在CSS中设置图片的样式和响应式布局：

/* 设置图片样式 */
.container{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(20rem, 1fr));
    grid-gap:2rem;
    margin:2rem 0;
}

img{
    width:100%;
    height:auto;
}

/* 设置响应式布局 */
@media screen and (max-width:768px){
    .container{
        grid-template-columns:repeat(auto-fit, minmax(45%,1fr));
        grid-gap:1rem;
    }
}

在这段CSS中，设置了默认的图片样式和响应式布局的样式。对于响应式布局，当屏幕宽度小于等于768px时，图片布局变为两列，并设置了间距。

五、总结

以上就是使用媒体查询和rem实现响应式布局的完整攻略，通过这样的方式可以快速适配不同设备的分辨率和屏幕尺寸。如果想要进一步完善这个技术，可以结合JavaScript实现更加灵活的响应式布局。