时间戳

首页 > 解决方案 > 当屏幕尺寸小于 MQ 时，默认 CSS 被媒体查询覆盖

css - 当屏幕尺寸小于 MQ 时，默认 CSS 被媒体查询覆盖

问题描述

我无法弄清楚我做错了什么，这可能是愚蠢的。但是我有一个徽标，我正在尝试根据屏幕尺寸调整其大小。但由于某种原因，默认（移动）样式没有生效，而是使用媒体查询样式获取下一个尺寸（平板电脑垂直）。尽管屏幕尺寸小于平板电脑尺寸。

我正在使用谷歌浏览器的检查器进行断点。

这是我所拥有的：

h1.logo {font-size: 2em;}

@media only screen and (min-width: 768px) {
  h1.logo {font-size: 1.25em;}
}

@media only screen and (min-width: 1130px) {
  h1.logo {font-size: 1.2em;}
}

出于某种原因，1.25em 大小超过了 2em 大小，而它应该是相反的。即使我的屏幕宽度小于 768px。

标签： cssmedia-queries

解决方案

在这种情况下，min-width将始终否决 2emfont-size属性，因为它是您希望应用样式的初始屏幕大小。

在您的示例中，您是说STARTING AT 768px & ABOVE (min-width), h1.logo font-sizeproperty 应该是1.25em.

如果您希望 h1.logofont-size减小到 768px 屏幕尺寸以下的 1.25em，您应该使用max-width，所以您会说STARTING AT 768px & BELOW。

我制作了一个 CodePen，以便您更好地理解它：https ://codepen.io/hk95/pen/xoqWqe

希望这可以帮助你，如果你有任何疑问，请告诉我！祝你今天过得愉快。

推荐阅读