html - 媒体查询仅使用 !important ，即使将其放在样式表的末尾
问题描述
我用 HTML 和 SCSS 制作了 glassmorphism mac 应用商店 UI。但是当我使用媒体查询来更改已经定义的属性时，如果没有!important关键字，我就无法做到这一点。
在我使用过的网格 div（位于趋势部分内）中display: grid;，当我尝试更改 中的行数和列数时@media (max-width: 768px)，我必须使用!important关键字。我访问了其他类似的问题，他们说把它放在
@media(max-width: 768px){...}最后以防止使用!important我所做的。唯一的区别是我使用的是sass/scss，你可以在这个 codepen - SCSS Code中看到它。
我不想使用，!important keyword因为这是一种不好的做法，我必须向我的老师展示这个项目。
如何防止使用!important？
HTML 和 CSS（由 live sass 编译器 vscode 扩展生成的 css）
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
html {
font-size: 62.5%;
}
:root {
--container-height: 90%;
--container-width: 90%;
--component-background: rgba(0, 0, 0, 0.45);
}
body {
background: url("https://4kwallpapers.com/images/wallpapers/macos-big-sur-apple-layers-fluidic-colorful-dark-wwdc-2020-5120x2880-1432.jpg");
background-size: cover;
background-attachment: fixed;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 100vh;
font-family: "Poppins", sans-serif;
}
.container {
background: rgba(0, 0, 0, 0.2);
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
-webkit-backdrop-filter: blur(30px);
backdrop-filter: blur(30px);
border-radius: 15px;
width: var(--container-width);
height: var(--container-height);
position: relative;
}
header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
height: 30px;
position: relative;
}
section.window--buttons {
position: absolute;
top: 15px;
left: 15px;
}
section.window--buttons .window__close {
width: 1.5rem;
height: 1.5rem;
background: #f00;
display: inline-block;
border-radius: 50%;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
section.window--buttons .window__close:hover {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
section.window--buttons .window__minimize {
margin-left: 5px;
width: 1.5rem;
height: 1.5rem;
background: #f57c00;
display: inline-block;
border-radius: 50%;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
section.window--buttons .window__minimize:hover {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
section.window--buttons .window__maximize {
margin-left: 5px;
width: 1.5rem;
height: 1.5rem;
background: #4caf50;
display: inline-block;
border-radius: 50%;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
section.window--buttons .window__maximize:hover {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
aside {
overflow: scroll;
height: 90%;
margin-top: 20px;
float: left;
width: 200px;
position: -webkit-sticky;
position: sticky;
top: 0;
}
aside button {
display: block;
margin-top: 7px;
margin-left: 15px;
padding: 0.7rem 4rem;
font-family: "Poppins", sans-serif;
font-size: 1.5rem;
background: none;
width: 170px;
border-radius: 10px;
border: 0;
color: white;
-webkit-transition: 0.2s ease;
transition: 0.2s ease;
cursor: pointer;
}
aside button:hover {
background: rgba(0, 0, 0, 0.55);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
aside button.active {
background: rgba(0, 0, 0, 0.55);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
aside input[type="text"] {
font-size: 1.5rem;
width: 170px;
margin-left: 15px;
padding: 0.9rem;
border-radius: 10px;
background: #000;
color: #fff;
font-family: "Poppins", sans-serif;
border: 0;
outline: 0;
text-align: center;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
background: rgba(0, 0, 0, 0.05);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
color: white;
}
aside input[type="text"]::-webkit-input-placeholder {
text-align: center;
}
aside input[type="text"]:-moz-placeholder {
/* Firefox 18- */
text-align: center;
}
aside input[type="text"]::-moz-placeholder {
/* Firefox 19+ */
text-align: center;
}
aside input[type="text"]:-ms-input-placeholder {
text-align: center;
}
aside .profile {
position: absolute;
left: 15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
bottom: 15px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
aside .profile .profile--pic {
width: 4rem;
border-radius: 50%;
}
aside .profile h1 {
color: #fff;
font-weight: 400;
margin-left: 10px;
font-size: 1.3rem;
}
.content {
color: white;
padding: 15px;
border-radius: 30px;
height: 90%;
margin-right: 20px;
overflow: scroll;
}
.content .ideas {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.content .ideas .idea {
background: var(--component-background);
width: 50%;
padding: 20px;
border-radius: 20px;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.content .ideas .idea:nth-of-type(2) {
margin-left: 15px;
}
.content .ideas .idea p {
color: gray;
font-size: 1.2rem;
}
.content .ideas .idea:hover {
-webkit-transform: scale(1.06);
transform: scale(1.06);
}
.content .updates {
margin-top: 20px;
}
.content .updates h1:nth-of-type(1) {
font-size: 2.2rem;
}
.content .updates .update {
width: 100%;
background: var(--component-background);
padding: 1.3rem 0.7rem;
border-radius: 10px;
margin-top: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-transition: 0.4s ease;
transition: 0.4s ease;
}
.content .updates .update:hover {
-webkit-transform: scale(1.03);
transform: scale(1.03);
}
.content .updates .update .updt-left {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.content .updates .update .updt-left h1 {
font-size: 1.7rem;
margin-left: 10px;
}
.content .updates .update .updt-left img {
width: 35px;
}
.content .updates .update .buttons button {
background: none;
color: dodgerblue;
border: 0;
font-size: 1.6rem;
-webkit-transition: 0.2s ease;
transition: 0.2s ease;
cursor: pointer;
font-family: "Poppins", sans-serif;
}
.content .updates .update .buttons button:hover {
color: blue;
}
.content .trending {
margin-top: 20px;
}
.content .trending h1:nth-last-of-type(1) {
font-size: 2.2rem;
}
.content .trending .grid {
display: -ms-grid;
display: grid;
-ms-grid-rows: (25%) [4];
grid-template-rows: repeat(4, 25%);
-ms-grid-columns: 25% 25% 25% 25%;
grid-template-columns: 25% 25% 25% 25%;
margin-top: 10px;
gap: 5px;
}
.content .trending .grid .grid__app {
background: var(--component-background);
padding: 13px;
display: inline-block;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
border-radius: 10px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.content .trending .grid .grid__app.margin {
margin-top: 20px;
}
.content .trending .grid .grid__app h1 {
font-size: 1.7rem;
}
.content .trending .grid .grid__app button {
background: dodgerblue;
color: #fff;
border: 0;
outline: 0;
border-radius: 30px;
width: 30%;
cursor: pointer;
}
.content .links {
display: -ms-grid;
display: grid;
-ms-grid-columns: (50%) [2];
grid-template-columns: repeat(2, 50%);
-ms-grid-rows: (50%) [2];
grid-template-rows: repeat(2, 50%);
}
.content .links a {
text-align: center;
color: #fff;
font-size: 1.4rem;
}
.content .links a:nth-of-type(3),
.content .links a:nth-of-type(4) {
margin-top: 7px;
}
@media (max-width: 768px) {
.grid {
grid-template-columns: repeat(2, 50%) !important;
grid-template-rows: repeat(4, 25%) !important;
}
aside {
display: none;
}
.links {
margin-top: 50px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MacOS App Store</title>
<link rel="stylesheet" href="./styles/style.css">
</head>
<body>
<div class="container" id="container">
<header>
<section class="window--buttons">
<div class="window__close"></div>
<div class="window__minimize"></div>
<div class="window__maximize"></div>
</section>
</header>
<aside>
<div>
<input type="text" placeholder="Search" /><br />
<button class="active" id="sidebar-btn">Discover</button>
<button id="sidebar-btn">Arcade</button>
<button id="sidebar-btn">Create</button>
<button id="sidebar-btn">Work</button>
<button id="sidebar-btn">Play</button>
<button id="sidebar-btn">Develop</button>
<button id="sidebar-btn">Categories</button>
<button id="sidebar-btn">Updates</button>
</div>
<div class="profile">
<img src="https://pbs.twimg.com/profile_images/994592419705274369/RLplF55e.jpg" alt="Profile Pic"
class="profile--pic" />
<h1>Jimmy Donaldson</h1>
</div>
</aside>
<div class="content">
<div class="ideas">
<div class="idea">
<p>MASTER YOUR MAC</p>
<h1>Make a great<br> handoff</h1>
<p>Work seamlessly across devices</p>
</div>
<div class="idea">
<p>GET STARTED</p>
<h1>Apps optimised for mac with M1</h1>
<p>Work seamlessly across devices</p>
</div>
</div>
<section class="updates">
<h1>Updates</h1>
<div class="update update-1">
<div class="updt-left">
<img src="https://img.icons8.com/color/452/microsoft-powerpoint-2019.png"
alt="powerpoint icon" />
<h1>Microsoft Powerpoint</h1>
</div>
<div class="buttons">
<button>Update</button>
</div>
</div>
<div class="update">
<div class="updt-left">
<img src="https://img.icons8.com/color/452/microsoft-word-2019--v2.png" alt="word icon" />
<h1>Microsoft Word</h1>
</div>
<div class="buttons">
<button style="color: lime;cursor: default">Updated</button>
</div>
</div>
<div class="update">
<div class="updt-left">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Adobe_Photoshop_Lightroom_CC_logo.svg/788px-Adobe_Photoshop_Lightroom_CC_logo.svg.png"
alt="lightroom icon" />
<h1>Adobe Lightroom</h1>
</div>
<div class="buttons">
<button>Update</button>
</div>
</div>
<div class="update">
<div class="updt-left">
<img src="https://developer.apple.com/design/human-interface-guidelines/macos/images/app-icon-realistic-materials_2x.png"
alt="xcode icon" />
<h1>Xcode</h1>
</div>
<div class="buttons">
<button>Update</button>
</div>
</div>
</section>
<section class="trending">
<h1>Trending</h1>
<div class="grid">
<span class="grid__app">
<h1>Kindle</h1>
<button>GET</button>
</span>
<span class="grid__app">
<h1>Slac</h1>
<button>GET</button>
</span>
<span class="grid__app">
<h1>Magnet</h1>
<button>₹699</button>
</span>
<span class="grid__app">
<h1>CotEditor</h1>
<button>GET</button>
</span>
<span class="grid__app margin">
<h1>Twitter</h1>
<button>GET</button>
</span>
<span class="grid__app margin">
<h1>Notability</h1>
<button>₹799</button>
</span>
<span class="grid__app margin">
<h1>NDTV</h1>
<button>GET</button>
</span>
<span class="grid__app margin">
<h1>Rummy</h1>
<button>₹179</button>
</span>
</div>
</section>
<section class="links">
<a href="#">Privacy Policy -></a>
<a href="#">Terms and Conditions -></a>
<a href="#">Report Error -></a>
<a href="#">
Parent's guide to Mac app store
</a>
</section>
</div>
</div>
<script src="./js/script.js"></script>
</body>
</html>解决方案
推荐阅读
- python - 为条形图比赛转换 DataFrame
- azure - 如何在 Azure 应用服务 Linux 中查找 NPM 代码
- tcp - 如何修改 Iperf TCP 连接超时？
- javascript - 将项目添加到 LocalStorage 然后使用 useState() REACT 检索它
- python - 我们可以在 PyPy 中腌制延续吗？如何？
- node.js - BigQuery NodeJS SDK 未创建原生 GEOGRAPHY 类型
- ios - Flutter fastlane ios如何通过--dart-define
- graphql - 有没有办法避免在 Apollo GraphQL 中返回具有空值的键？
- java - 如何在 JavaFX 中的 tabpane 之间添加拆分？
- django - 加载图像时没有这样的文件或目录