Question

有人可能会失败吗？就像你有按钮和图像，页脚或什么？这一切都进入一个媒体查询还是分开？我很困惑。

Answer 1

正如@Berdesdan所说，媒体查询设置了特定的样式，以便您的网站可以与屏幕尺寸等相关。

对我来说，这取决于我的样式表每个部分的类有多长。我的页眉，页脚和我网站的其他部分通常有很多课程。所以我只在CSS的每个部分下添加一个媒体查询。立即;

            /* Header Styles */

            .header { width:100%; }
            .header ul { }
            .header ul li { }
            .header ul li a {}

            @media (min-width:768px){
              .header { width:80%; }
            }

            /* Footer Styles */

            .footer { width:100%; }
            .footer ul { }
            .footer ul li { }
            .footer ul li a {}

            @media (min-width:768px){
              .footer { width:80%; }
            }

通过这种方式，我可以一个接一个地编辑每个部分及其媒体查询。基本上，您可以根据需要在CSS文件中包含尽可能多的媒体查询。没有限制。

我希望这可以解释。尝试检查w3schools.com链接中的资源以及媒体查询上的其他资源。

Answer 2

媒体查询在某些“标志”处设置特定的css规则。

它们可以与屏幕相关，在某人打印文档时设置特定的css规则，或者用于屏幕阅读器。

请阅读以下链接。

https://www.w3schools.com/css/css_rwd_mediaqueries.asp https://www.w3schools.com/css/css3_mediaqueries.asp

我不完全了解媒体查询

2 个答案: