html与css——响应式设计

早年设计 Web 时，页面是以适配特定的屏幕大小为考量创建的。如果用户正在使用比设计者考虑到的更小或者更大的屏幕，那么结果从多余的滚动条，到过长的行和没有被合理利用的空间，不一而足。随着人们使用的屏幕尺寸的种类越来越多，出现了响应式网页设计的概念（responsive web design，RWD），RWD 指的是允许 Web 页面适应不同屏幕宽度因素等，进行布局和外观的调整的一系列实践。

响应式设计”这个词是Ethan Marcotte 在 2010 年首度提出的，他将其描述为三种技术的混合使用。

第一个是液态网格，这早先已由 Gillenwater 进行探讨，可以在 Marcotte 的文章《Fluid Grids》（出版于 2009 年的《A List Apart》上）中读到。

第二个是液态图像的理念。通过使用相当简单的将设置max-width属性设置为100%的技术，图像可以在包含它们的列变得比图像原始尺寸窄的时候，缩放得更小，但总不会变得更大。这使得图像可以被缩放，以被放到一个灵活尺寸的列，而不是溢出出去，同时也不会在列宽于图像的时候，使图像变得太大以至于画质变得粗糙。

第三个关键的组件是媒体查询。媒体查询使以往 Cameron Adams 探讨过的、由 JavaScript 实现的布局类型切换，可以只使用 CSS 实现。和所有尺寸的屏幕都使用一种布局不同的是，布局是可以改变的：侧栏可以在小屏幕上重新布局，而替代用的导航栏也可以显示出来。

在css中，一般使用媒体查询来进行响应式设计的制作，例如下列代码：

@media screen and (min-width: 768px) {
    #headLeft {
        width: 50%;
    }

    #headRight {
        width: 50%;
    }
}

/*中屏幕*/

@media screen and (min-width: 768px) and (max-width: 992px) {
    #body > div {
        display: flex;
        justify-content: space-between;
    }
}

/*小屏幕*/

@media screen and (max-width: 768px) {
    #header {
        height: 80px;
        text-align: center;
    }

    #headLeft {
        width: 100%;
    }

    #headRight {
        width: 100%;
        text-align: center;
    }

    .card {
        width: 100%;
    }
}

这里我们就利用@media screen来控制一些元素在不同页面下的样式。