Question

我正在用html和css做一个页面。此页面有一个标题，移动版本的高度为80px，PC版本的高度为150px，标题内的移动版本标识高度为70px，宽度为250px，版本为85px 300px 。问题是，当我在Firefox中打开页面并检查标题元素和徽标时，指定的ace尺寸较小，尽管程序员工具似乎验证了指定的尺寸。

＆＃13;

*{
  padding: 0;
  margin: 0;
}
body{
  min-width:300px;
  margin: 0px;
  padding: 0px;
}
.Wrapper {
  max-width: 980px;
  margin: 0px auto;
  position: relative; background-color: #fff;
}
header{
  background: rgba(51,20,10,0.95);
}
/* Mobile */
@media screen and (max-width: 979px) {
  header{
    display:block;
    width:100%;
    height:80px;
  }
  a.logo{
    background-image:url(Logo_M.png);
    width:250px;
    height:70px;
    position: absolute;
    top:5px;
    left:50%;
    transform: translate(-50%, 0%); 
  }
}
/* PC */    
@media screen and (min-width: 980px) {
  header{
    width:980px;
    height:150px;
  }
  a.logo{
    background-image:url(Logo_L.png);
    width:300px;
    height:85px;
    position: absolute;
    top:20px;
    left:56px;
  }
}

＆＃13;

<div class="Wrapper">
  <header>
    <a class="logo" href="#"></a>
  </header>
</div>

＆＃13;

Answer 1

我在Firefox 47.0上为Ubuntu测试了你的代码。似乎没问题，在移动设备上，徽标是250px / 70px

Answer 2

嗯。我建议的一些事情：

在分配类名时，坚持使用命名约定类名不是一个受欢迎的选择
关心css特异性，它会回来困扰你的时候进行媒体查询，因为你将面临覆盖风格的危险
避免在执行自适应网站时使用绝对位置
您不需要同时显示“display：block”和“width：100％”，
显示块已将宽度设置为100％
避免为图像指定宽度和高度，它可以导致图像拉伸

我会这样解决你的问题：

.container {
  max-width: 980px; 
  margin: 0 auto;
}

.main-header {
  background:rgba(51,20,10,0.95);
  height: 150px;
  text-align: center;
  padding-top: 5px;
}


@media(max-width:980px) {
  .main-header {
    height: 80px;
  }
  .main-header__logo {
    height: 70px;
  }
}

<!DOCTYPE html>
<html>
<body>

<div class="container">
  <header class="main-header">
    <a href="#">
      <img class="main-header__logo" src="http://placehold.it/300x80" alt="logo" />
    </a>
  </header>
</div>
  
</body>
</html>

我希望这会把你推向正确的方向。

标题不会与指定的维度一起显示

2 个答案: