媒体查询屏幕宽度 - CSS

在响应式设计中，媒体查询是必不可少的一部分。通过媒体查询，我们可以根据不同的屏幕宽度，为网站提供不同的样式和布局。

基本语法

@media screen and (max-width: 768px) {
  /* CSS代码块 */
}

其中，@media 是指媒体查询的声明，screen 表示适用于屏幕，(max-width: 768px) 表示屏幕宽度小于等于 768 像素时，应用这段 CSS 代码块。

常用尺寸

针对不同的设备，我们可以针对性的写不同的媒体查询，常见的尺寸包括：

• 移动设备：320px、375px、414px、480px、600px、640px、750px、768px、828px、1080px、1440px、1920px
• 平板设备：768px、1024px、1280px
• 桌面设备：1366px、1440px、1680px、1920px

示例

我们可以通过以下示例，了解如何使用媒体查询改变网站的样式：

/* 默认样式 */

h1 {
  font-size: 24px;
}

p {
  font-size: 16px;
}

/* 在屏幕宽度小于等于 768px 时，修改标题和文本的字体大小 */

@media screen and (max-width: 768px) {
  h1 {
    font-size: 20px;
  }
  
  p {
    font-size: 14px;
  }
}

以上示例中，我们为屏幕宽度小于等于 768px 的设备设置了不同的字体大小，以使网站在小屏幕上的阅读更加友好。

总结

媒体查询是响应式设计中不可或缺的一部分，通过它我们可以根据不同设备的宽度，为网站提供不同的布局和样式。在实际应用中，我们需要根据不同设备的尺寸和特点，合理设置媒体查询，以优化网站的页面设计和用户体验。