我正在try 为不同的屏幕大小更改SVG圆的大小.我用Mixin为不同的屏幕尺寸设置了一个断点文件，如下所示
$breakpoints: (
"xs": 0,
"sm": 480px,
"md": 720px,
"lg": 960px,
"xl": 1200px,
)；
My issue is that when I try to add different sizes the browser accepts only the first one in this case the xl. If I shrink down the browser window to the size of the lg still applies the xl rule.
In the inspect it shows like this:
你能告诉我我做错了什么吗，为什么会发生这种情况，我应该做些什么不同的事情？
.app-skills-container {
display: flex;
width: 43vw;
height: max-content;
padding: 25px 0;
row-gap: 3vh;
column-gap: 3vw;
flex-wrap: wrap;
z-index: 1;
}
.circle-container {
display: flex;
position: relative;
align-items: center;
flex-direction: column;
width: 90px;
height: 140px;
}
.outer {
width: 90px;
height: 90px;
border-radius: 50%;
background-color: #fff;
rotate: -90deg;
}
.inner {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 10px;
left: 10px;
width: 70px;
height: 70px;
background-color: #b3b3b3;
border-radius: 50%;
}
.circle {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 100px;
}
.cicle-viewport {
width: 100px;
height: 100px;
}
.circle1 {
fill: none;
stroke: #000;
position: absolute;
top: 0;
left: 0;
stroke-width: 5px;
stroke-dasharray: 350;
stroke-dashoffset: 350;
animation: anim 2s linear forwards;
}
@keyframes anim {
100% {
stroke-dashoffset: 157.5;
}
}
@media (max-width: 0) {
.circle1 {
stroke: orange;
}
}
@media (max-width: 480px) {
.circle1 {
stroke: purple;
}
}
@media (max-width: 720px) {
.circle1 {
stroke: blue;
}
}
@media (max-width: 960px) {
.circle1 {
stroke: green;
}
}
@media (max-width: 1200px) {
.circle1 {
stroke: red;
}
}
.app-logos {
display: flex;
justify-content: center;
align-items: center;
rotate: 90deg;
width: 35px;
}
.app-name {
display: flex;
justify-content: center;
align-items: center;
font-family: Roboto Condensed, sans-serif;
font-weight: 700;
text-align: center;
font-size: 1em;
line-height: 1.2em;
height: 55px;
}
p {
margin: 0;
}
<div class="circle-container">
<div>
<div class="outer">
<div class="circle" >
<svg version="1.1" class="cicle-viewport" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet" >
<circle class="circle1" cx="45" cy="45" r="40" stroke-linecap="round" /></svg>
</div>
<div class="inner">
<img class="app-logos" src="https://designordering.com/resume/img/Adobe-Illustrator.png" alt="js logo">
</div>
</div>
<div class="app-name">
<p>Adobe<br>Illustrator</p>
</div>
</div>
</div>我不知道如何在代码面板中插入SCSS，这就是显示不同的原因.在这里，您可以看到CodePen链接https://codepen.io/weisz-istvan/pen/JjaGNpL中的代码.