「CSS」- 响应式网页设计

  CREATED BY JENKINSBOT

问题描述

在 CSS3 中,引入 Responsive Web Design 特性:对于使用 @media 包裹的 CSS 属性,仅当某些条件得到满足时这些 CSS 属性才会生效。

我们也需要使用该特性,来针对不同的屏幕尺寸使用不同的 CSS 属性。

该笔记将记录:在 CSS 中,如何使用 @media 来编写 CSS 属性,以及相关问题出来。

解决方案

如下 CSS 代码,仅在浏览器窗口在 600px 以下时,背景色设置才生效:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

屏幕尺寸的分界线

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

参考文献

Responsive Web Design Media Queries
css – Media Queries: How to target desktop, tablet, and mobile? – Stack Overflow