我正在使用 HTML 和 CSS 开发响应式网页。我的主要徽标对于移动屏幕来说太宽。所以我想使用辅助徽标，它要小得多。比方说，主徽标是图标+文本，辅助徽标只是图标。
我可以仅使用 HTML 和 CSS 来实现此目的吗？如果是，怎么办？如果没有，任何人都可以帮助我完成这个任务吗？
我目前仅使用 HTML 和 CSS
如果是徽标，则应该是矢量，例如 .svg，无论大小如何，都会很脆。 但如果你想为不同的屏幕尺寸显示不同的徽标，这是内联方法：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>The picture element</h1>
<p>Resize the browser window to load different images.</p>
<picture class="logo">
<source media="(min-width:650px)" srcset="the-largest.sized.logo.jpg"><!--Largest logo"-->
<source media="(min-width:465px)" srcset="medium.sized.logo.jpg"> <!--Medium logo"-->
<img src="small.sized.logo.jpg" alt="Small logo" style="width:auto;">
</picture>
</body>
</html>这是纯 CSS 版本：
.logo {
background: url(https://static.vecteezy.com/system/resources/previews/027/395/710/original/twitter-brand-new-logo-3-d-with-new-x-shaped-graphic-of-the-world-s-most-popular-social-media-free-png.png);
background-size: 100%;
width: 20px;
height: 20px;
}
@media (min-width:465px) {
.logo {
background: url(https://logodownload.org/wp-content/uploads/2021/07/stack-overflow-logo-0.png);
background-size: 100%;
width: 200px;
height: 200px;
}
}
@media (min-width:650px) {
.logo {
background: url(https://logodownload.org/wp-content/uploads/2021/07/stack-overflow-logo-0.png);
background-size: 100%;
width: 400px;
height: 400px;
}
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<img class="logo">
</body>
</html>