响应式布局

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了响应式布局相关的知识,希望对你有一定的参考价值。

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。

在可视区域的宽度小于 600px 的时候被应用。

@media screen and (max-width: 600px) {
  .class {
    background: #0094ff;
  }
}

在可视区域的宽度大于600px 的时候被应用。

@media screen and (min-width: 600px) {
  .class {
    background: red;
  }
} 

以上是关于响应式布局的主要内容,如果未能解决你的问题,请参考以下文章

一行 CSS 代码实现响应式布局 – 使用 Grid 实现的响应式布局

H5响应式布局 响应式图片 响应式布局网站怎么写?

响应式布局

grid实现响应式布局

响应式布局

响应式布局