CSS 媒体查询（Media Queries）用于根据不同的设备特性或条件来应用不同的样式。通过使用 @media 关键字可以在 CSS 中定义这些媒体查询。

下面是一个示例的 CSS 媒体查询代码：

/* 当视口宽度小于等于600px时应用该样式 */
@media screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

/* 当视口宽度大于601px且高度大于480px时应用该样式 */
@media screen and (min-width: 601px) and (min-height: 480px) {
    h1 {
        color: red;
    }
}

本博客的媒体查询优化右边的两个图标：牛顿和小乌龟火箭。

@media screen and (max-width: 600px) {
    .newton {
        background-size: 70% 70%;
        margin: -180px 4px 0px;
    }


    #tortoise{
        width: 120px;
        margin:-125px 0 0;
    }
    #tortoise .tortoiseReadying{
        width: 120px;
    }

    #tortoise .tortoiseReadying .tortoiseFlying{
        width: 120px;
    }
}

css的媒体查询，直接优化了一下本博客图标。