当使用CSS查询时,可以通过使用不同像素宽度的媒体查询来应用不同的样式。以下是一个示例,展示如何使用不同像素宽度的CSS查询未被应用的解决方法:
这是一个示例文本。
在上述示例中,我们定义了三个不同的CSS样式规则,分别在默认情况下、宽度小于600px和宽度大于1200px时应用。默认样式为background-color: red;
、color: white;
、font-size: 16px;
和padding: 10px;
。当宽度小于600px时,媒体查询将应用新的样式background-color: blue;
和font-size: 12px;
。而当宽度大于1200px时,媒体查询将应用另一组新的样式background-color: green;
和font-size: 24px;
。
通过使用媒体查询,我们可以根据屏幕宽度应用不同的样式,从而实现响应式设计。