编写此代码的更有效/更合适的方式？答案

【问题标题】：More efficient/appropriate way to write this code?编写此代码的更有效/更合适的方式？
【发布时间】：2016-10-13 03:18:34
【问题描述】：

所以我最近才开始学习响应式网页设计并在我的 CSS 中使用媒体查询。我已经明白了如何让手机响应和优化。

如果有人只是觉得无聊或有兴趣看这个，你能告诉我我是否走在正确的轨道上，或者我是否违反了任何严重的编码规则？哈。

这是我正在处理的部分内容：（这是指移动的小盒子，忽略背景）

<style>
  
  .three img {
  	position: relative;
    top: 0;
  }
  
  #shoutout{
   	position: absolute;
    margin: 40% 45%;
    border: 2px solid black;
    background-color: white;
    padding: 7% 14%;
    z-index: 1;
  }
  
  .sotext p{
  	font-size: 120%;
    font-weight: bold;
    text-align: center;
  }
  
  @media screen and (max-width: 1023px){
   	 #shoutout{
      	text-align: center;
      	font-size: 75%;
      	margin-top: 40%;
    }
    
    .sotext p{
      	text-align: center;
      	font-size: 100%;
    }
  }
  
  @media screen and (max-width: 740px){
    #shoutout{
      	text-align: center;
      	margin-top: 35%;
      	margin-left: 45%;
    }
    
    .sotext p{
      	text-align: center;
      	font-size: 60%;
    }
  }
</style>

<head>
  <!-- Header Placeholder-->
</head>

<body>
  
  <div>
    <section id="shoutout">
        <!-- shoutut box -->
          <div class="sotext">
            <p>Placeholder Text</p>
          </div>
    </section>
    <section class="three">
      <img       src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/575d8fed4d088eb0ab810e52/1465749487419/mother_daughter.png" alt="shoutout image" />
    </section>
  </div>
  
<body>

【问题讨论】：

删除重复，.sotext p 已经居中对齐，你只添加媒体查询中改变的元素，其余保持不变。基本上，您希望在基本元素中为您的元素提供所需的所有代码，然后在媒体查询中调整需要调整的代码。
这可能更适合CodeReview，但请先查看他们的发布指南。

标签： html css responsive-design media-queries

【解决方案1】：

微调

html, body {
  height: 100%;
  width: 100%;
}

.background {
  background-image:url(http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/575d8fed4d088eb0ab810e52/1465749487419/mother_daughter.png);
  background-position: center left;
  background-size: cover;
  width: 100%; 
  height: 100%;
}

#shoutout{
   	position: absolute;
    margin: 40% 45%;
    border: 2px solid black;
    background-color: white;
    padding: 7% 14%;
    z-index: 1;
  }
  
  .sotext p{
  	font-size: 1.2em;
    font-weight: bold;
    text-align: center;
  }
  
  @media screen and (max-width: 1023px){
   	 #shoutout{
      	text-align: center;
      	font-size: 0.75em;
      	margin-top: 40%;
    }
    
    .sotext p{
      	font-size: 1em;
    }
  }
  
  @media screen and (max-width: 740px){
    #shoutout{
      	margin-top: 35%;
      	margin-left: 45%;
    }
    
    .sotext p{
      	font-size: 0.6em;
    }
  }

  <div class="background">
    <section id="shoutout">
        <!-- shoutut box -->
          <div class="sotext">
            <p>Placeholder Text</p>
          </div>
    </section>
  </div>

我个人会使用 background-image 而不是 img 标签，让您对显示有更多的控制。我也会使用 ems 而不是百分比来表示字体大小。正如我在我的 cmets 中所说，删除重复项。

【讨论】：

啊，感谢您注意到重复。我什至没有意识到我已经这样做了。使图像成为背景图像是一个好主意，特别是因为我没有对它做任何特别的事情。 ems和%'s到底有什么区别？他们只是反应更好吗？
更多个人喜好和常用用途。这是一篇关于整件事的好文章kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs
我刚刚阅读了那篇文章，它说要使用 % 大声笑。对他们自己来说，虽然那篇文章是 7 年前的。
太棒了，谢谢！在人们继续否决我的问题之前，我现在会删除这篇文章......我不太了解这个社区哈哈
哈哈，他们可能很挑剔。从技术上讲，他们想要的只是那些实际上是你无法解决的问题，而不仅仅是基于意见的事情。有一个美好的夜晚本！