媒体查询简单应用——网页字体自适应窗口大小

最新推荐文章于 2024-07-04 09:33:22 发布

原创最新推荐文章于 2024-07-04 09:33:22 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#媒体查询 #自适应 #设备

css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用媒体查询来针对不同设备（如手机、平板和电脑）提供定制化的样式，以优化用户体验。通过设置不同屏幕尺寸下的字体大小为例，展示了媒体查询的具体应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是媒体查询？

答：媒体查询是向不同设备（手机，平板，电脑）提供不同样式的一种不错方式，它为每种类型的用户提供了最佳的体验。

举一个简单的例子：网页的字体大小随窗口的大小而改变

@media screen and(min-width:900px) //窗口宽度大于900px
{
  body{
       font-size:25px;
      }
}

@media screen and(min-width:500px)and(max-width:900px) //窗口宽度大于500px小于900px
{
  body{
       font-size:20px;
      }
}

@media screen and(max-width:500px) //窗口宽度小于500px
{
  body{
       font-size:15px;
      }
}