【发布时间】：2021-08-15 08:56:55
【问题描述】：
我希望在最小化浏览器窗口时减小徽标的大小。我希望徽标的尺寸适合移动设备。我已经插入了媒体查询代码，但到目前为止，还没有运气。徽标是它自己的容器，它自己的类/div，但是当我最小化浏览器窗口时它不会改变它的大小。当我在移动设备上打开网站时，我希望这也能正常工作。
var audioButton = document.getElementById("audioButton");
var Button = document.getElementById("audioButton");
function playMusic() {
document.getElementById("audioButton");
if (music.paused == true) {
music.play();
audioButton.src = "images/musicon.png";
} else {
music.pause();
Button.src = "images/musicoff.png";
}
}@media screen and (max-width:640px) {
.images-container {
display: none;
}
}
.topnav {
display: none;
}
@media screen and (min-width:641px) {
.images-container {
float: none;
}
.topnav, .images-container {
display: block;
width: 85%;
min-width: 75%;
margin: auto;
}
}
body {
background-color: #999999;
/*background-image: url("images/movinggradient.gif");*/
background-size: cover;
}
.topnav {
overflow: hidden;
display: block;
}
.topnav a {
color: #ffffff;
text-align: center;
padding: 14px 19px;
text-decoration: none;
font-size: 39px;
}
.topnav a:hover {
background-color: rgb(255, 255, 255);
color: #ED1944;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
.images-container {
justify-content: center;
display: block;
position: relative;
}
.images-container img {
margin-left: 5px;
margin-right: 5px;
}
p {
color: white;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 35px;
}
#square {
width: 80%;
height: auto;
margin: auto;
padding: 1em;
background: #357E9F;
position: relative;
top: 1.5em;
z-index: 0;
}
#audioButton {
width: 5em;
height: auto;
position: fixed;
top: 1em;
left: 10%;
}
#audioButton:hover {
cursor: pointer;
width: 4.9em;
background: #ED1944;
border-radius: 30px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylsheet" href="stylesheet/homecss.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Main.html
</title>
<style>
body {
background-color: #999999;
/*background-image: url("images/movinggradient.gif");*/
background-size: cover;
}
.topnav {
overflow: hidden;
display: block;
}
.topnav a {
color: #ffffff;
text-align: center;
padding: 14px 19px;
text-decoration: none;
font-size: 39px;
}
.topnav a:hover {
background-color: rgb(255, 255, 255);
color: #ED1944;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
p {
color: white;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 35px;
}
#audioButton {
width: 5em;
height: auto;
position: relative;
top: 1em;
right: 30%;
}
#audioButton:hover {
cursor: pointer;
width: 4.9em;
background: #ED1944;
border-radius: 30px;
}
</style>
</head>
<body>
<br>
<center>
<audio id="music" loop>
<source src="audio/1 A.M Study Session ???? - [lofi hip hop_chill beats].mp3" type="audio/mp3"
title="relaxing music">
<!--https://www.youtube.com/watch?v=lTRiuFIWV54 -->
</audio>
<br>
<img id="audioButton" onclick="playMusic()" src="images/musicon.png" title="music on icon" />
<p id="audioButton"></p>
<div class="images-container">
<img src="tvologo/TVO_Red_1200px.png" width="750px" height="250px" alt="tvo red logo"><br>
<br>
<div class="topnav" title="menu bar">
<a href="About.html" title="go back home">About</a>
<a href="resources.html" title="resources/get help">Resources</a>
<a href="tvo.html" title="Parents webpage">Parents</a>
<a href="tvokids.html" title="Kids webpage">Kids</a>
<br>
<br>
<hr>
<p>Welcome to TVOntario.<br>This week we are talking about cyberbullying and what it actually means.</p>
</center>
<p style=font-size:30px;text-align:center;font-family:Georgia;font-style:italic>"1 in 10 Canadian online teens – 8 per cent – say they have been victims of online bullying on social networking sites."</p>
<!--Ipsos, Bullies Taking to Social Networking as Teens Become More Mobile, February 2013. https://www.publicsafety.gc.ca/cnt/ntnl-scrt/cbr-scrt/cbrbllng/prnts/cbrbllng-en.aspx#ftn1-ref
-->
<center>
<video loop controls preload="auto" width="75%" height="automatic">
<source src="video/cyberbullying.mp4" title="video about cyberbullying" />
</video>
</center>
<br>
<center>
<img src="images/quote.jpg" width="350px" height="300px" alt="it is okay to not be okay">
<img src="images/help.jpg" width="300px" height="300px" alt="asking for help is not a sign of weakness but a sign of strength">
</center>
<br>
<center>
<div class="images-container">
<a href="tvo.html"><img src="tvologo/TVO_BlueBlock_984px.png" width="300px" height="100px" title="parents webpage">
<a href="tvokids.html"><img src="tvologo/TVOKids_1200px.png" width="200px" height="100px" title="kids webpage">
</div>
</center>
</body>
</html>
<!-- https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_topnav
https://www.heapcoding.com/how-to-align-multiple-images-in-html-horizontally/#:~:text=Just%20add%20%E2%80%9C%20text%2Dalign%3A,div%2C%20objects%20or%20images%20horizontally.
https://www.redbubble.com/i/greeting-card/Asking-for-Help-is-not-a-Sign-of-Weakness-Mental-Health-Quote-Black-by-TimorousEclectc/44205648.5MT14
https://www.skipprichard.com/asking-for-help-is-a-sign-of-strength/ -->【问题讨论】：
标签： html css media-queries