面试题：CSS 响应式网页布局实践相关问题

Question

在一个响应式网页项目中，你如何使用 CSS 媒体查询（media queries）来实现不同屏幕尺寸下导航栏从水平排列变为垂直排列，且当屏幕宽度小于 768px 时，图片的显示尺寸调整为原来的 50% 并居中显示？

Answer 1

/* 导航栏初始为水平排列 */
nav {
    display: flex;
    flex-direction: row;
}

/* 当屏幕宽度小于 768px 时 */
@media (max-width: 768px) {
    /* 导航栏变为垂直排列 */
    nav {
        flex-direction: column;
    }

    /* 图片显示尺寸调整为原来的50%并居中显示 */
    img {
        width: 50%;
        display: block;
        margin: 0 auto;
    }
}