Question

我的徽标未在移动设备上调整大小，因此菜单与徽标重叠。我已经为桌面屏幕上的徽标硬编码了css属性，因为我希望徽标在桌面上显得很大，但是我希望它在移动设备上调整大小，并且我已经为其设置了设置，但是它不起作用，请告诉我最好的解决方案是什么，或者我做错了什么，我该如何解决。

    .logo {}
    #logoimg {
              width:250px; height:70px; transition: all .3s ease;
             }

/*============= media query max-width: 768px; =============*/

@media only screen and (max-width:768px) {

  /* start query */
  .header { padding-top: 5px; padding-bottom: 5px;}
  .logo img {width:auto;}

Answer 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}
img {
  width: auto ;
  max-width: 100% ;
  height: auto ;
}

/*============= media query max-width: 768px; =============*/

@media only screen and (max-width:768px) {
/* start query */
.header {
	padding-top: 5px;
	padding-bottom: 5px;
}
.img  {
	width:100%;
	height:auto;
}
}
</style>
</head>
<body>
<div class="container">
  <div class="row">
    <!-- logo -->
    <div class="col-md-12"> 
    <a href="index.html"><img src="https://upload.wikimedia.org/wikipedia/en/9/91/National_Film_and_Television_School_Logo.jpg" alt="logo"></a> </div>
    <!-- logo --> 
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div id="navigation"> <!-- navigation start-->
        <ul>
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Menu 1</a></li>
          <li><a href="#">Menu 2</a> </li>
          <li><a href="#">Menu 3</a></li>
          <li><a href="#">Menu 4</a></li>
          <li><a href="#">Menu 5</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Answer 2

使用img-responsiv类它将为您提供帮助

调整移动设备上徽标的大小

2 个答案: