CSS RWD - 媒體查詢

歡迎，有抱負的網頁開發者們！今天，我們將深入探索反應式網頁設計（RWD）的精彩世界，並專注於其中最强大的工具之一：媒體查詢。想像你正在創作一幅美麗的油畫，但它需要在微型明信片和巨大廣告牌上看起来都很棒。這正是我們在做的事情，而媒體查詢就是我们的神奇画筆！

CSS RWD - Media Queries

媒體查詢是什麼？

媒體查詢就像是CSS世界中的变色龙。它們允许你的網站根据被查看的设备来适应和改变外观。无论是智能手机、平板电脑还是桌面电脑，媒體查詢都能确保你的网站在任何地方看起来都很棒。

让我们从一个基本的例子开始：

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

在这段代码中，我们说，“嘿，浏览器，如果屏幕宽度是600像素或更小，将背景涂成浅蓝色！”这就好像在给网站的小屏幕上穿上了一个酷炫、清新的外观。

CSS RWD 媒體查詢 - width 属性

width属性是我们创建响应式设计时的最佳伙伴。它允许我们根据设备屏幕的宽度设置不同的样式。

让我们看一个更全面的例子：

/* 大屏幕的默认样式 */
.container {
width: 80%;
margin: 0 auto;
}

/* 768px 和更小的屏幕的样式 */
@media screen and (max-width: 768px) {
.container {
width: 95%;
}
}

/* 480px 和更小的屏幕的样式 */
@media screen and (max-width: 480px) {
.container {
width: 100%;
}
}

这里发生的是：

默认情况下，我们的容器宽度是80%，两侧有一些边距。
当屏幕缩小到768px或更小，我们增加宽度到95%。
在非常小的屏幕（480px或更小）上，我们使容器宽度为全宽。

这就好像你的网站正在做瑜伽，弯曲和伸展以完美地适应任何屏幕！

CSS RWD 媒體查詢 - 多個斷點

现在，让我们来谈谈斷點。这些是网站布局将改变以提供最佳用户体验的点。把它们想象成设计需要适应的“斷點”。

这里是一个使用多个斷點的例子：

/* 基础样式 */
body {
font-size: 16px;
}

/* 大屏幕 */
@media screen and (min-width: 1200px) {
body {
font-size: 18px;
}
}

/* 中屏幕 */
@media screen and (min-width: 992px) and (max-width: 1199px) {
body {
font-size: 17px;
}
}

/* 小屏幕 */
@media screen and (max-width: 991px) {
body {
font-size: 15px;
}
}

在这个例子中，我们根据不同的屏幕大小调整字体大小：

在大屏幕上（1200px及以上），我们将字体大小增加到18px。
对于中等屏幕（992px到1199px之间），我们使用17px的字体大小。
在小屏幕上（991px及以下），我们稍微将字体大小减少到15px。

这就好像有一个响应式的衣柜，无论你吃多少，总是完美合身！

CSS RWD 媒體查詢 - 使用方向

你知道吗，你的网站可以判断设备是垂直还是水平持握？没错，我们可以使用这些信息来创建更加个性化的设计。

以下是如何使用方向特性的方法：

/* 竖屏方向的样式 */
@media screen and (orientation: portrait) {
.sidebar {
width: 100%;
float: none;
}
.main-content {
margin-left: 0;
}
}

/* 横屏方向的样式 */
@media screen and (orientation: landscape) {
.sidebar {
width: 25%;
float: left;
}
.main-content {
margin-left: 26%;
}
}

在这个例子中：

当设备处于竖屏模式（比宽更矮）时，我们使边栏全宽并移除其浮动。
在横屏模式下，我们创建了一个并排布局，边栏占25%的宽度。

这就好像你的网站正在做杂技，优雅地在竖屏和横屏之间切换！

一切归在一起

现在我们已经覆盖了基础知识，让我们看一个更复杂的例子，它结合了我们所学的一切：

/* 基础样式 */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
}

.container {
width: 80%;
margin: 0 auto;
}

/* 大屏幕 */
@media screen and (min-width: 1200px) {
body {
font-size: 18px;
}
.container {
max-width: 1140px;
}
}

/* 中屏幕 */
@media screen and (min-width: 992px) and (max-width: 1199px) {
body {
font-size: 17px;
}
.container {
max-width: 960px;
}
}

/* 小屏幕 */
@media screen and (max-width: 991px) {
body {
font-size: 16px;
}
.container {
width: 95%;
}
}

/* 超小屏幕 */
@media screen and (max-width: 576px) {
body {
font-size: 15px;
}
.container {
width: 100%;
padding: 0 15px;
}
}

/* 横屏方向 */
@media screen and (orientation: landscape) and (max-height: 500px) {
.header {
position: static;
}
.main-content {
margin-top: 20px;
}
}

这个全面的例子展示了我们如何创建一个完全响应式的设计，它适应各种屏幕大小和方向。我们调整字体大小、容器宽度，甚至根据设备特性改变布局。

结论

恭喜你！你已经迈出了进入响应式网页设计世界的第一步，使用媒体查询。记住，创建响应式网站就像是一个数字变形者——你的内容应该在任何形式下看起来都很棒。

当你练习和尝试媒体查询时，你将发展出一种直觉，创造出在所有设备上无缝工作的设计。继续探索，继续编码，最重要的是，玩得开心！你的网站会通过在任何地方看起来都很棒来感谢你。

方法	描述
`@media screen`	针对所有屏幕类型
`max-width`	设置最大宽度条件
`min-width`	设置最小宽度条件
`orientation: portrait`	针对竖屏模式
`orientation: landscape`	针对横屏模式

快乐编码，愿你的网站总是响应式！

Credits: Image by storyset