Css media做界面适配

最新推荐文章于 2025-05-20 07:44:09 发布

原创最新推荐文章于 2025-05-20 07:44:09 发布 · 427 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #media #适配

本文介绍如何使用CSS中的@media查询来实现响应式网页设计，通过调整不同屏幕尺寸下的字体大小和元素宽度，确保页面在各种设备上的良好展示。

@media (min-width: 1450px){}

主题是@media的简单使用（笔者觉得很有用哦~像是迈出了一大步）

media与适配相关？看看这篇博客我觉得挺好的http://blog.qiji.tech/archives/10167；想简单一点跳过也行，直接往下看吧！

下面直入主题啦，我的例子：
在这里插入图片描述
两个并排的表格，在一般大尺寸屏幕上显示好了，可是小屏幕电脑上成了这样！

太不像话了对吧！用@media很快解决了问题
Css里填下面的两段代码（记得先把原来写在其他地方的这些样式去掉哦~不然因被覆盖而无效）

@media (min-width: 1450px) {    //窗口宽度大于1450px时执行的样式
 .smallFontSize{      //控制表格字体大小
    font-size: 0.95em;
  }
 .detailBox{
  width:53%;
  }
}
@media (max-width: 1450px) {    //窗口宽度小于1450px时执行的样式
 .smallFontSize{
    font-size: 0.8em;
  }
 .detailBox{
  width:65%;
  }
}

注意min-width和max-width就好；min-width:1450px是限制的最小宽度，就是最小宽度大于1450px时才生效；同理，max-width: 1450px是最大宽度不超过1450px才生效；上面的代码也就是小屏幕时把顶部的一行加宽了，表格的字体缩小了。主要是简单用法和什么时候用，不妨试试哦~