为了使它响应，你需要保持CSS的代码在相对单位，因为whey你使它与固定单位的代码将不适应屏幕，所以你将不得不使你的代码这样的东西：

div.contactus {
    position:absolute;
    right:5%;
    top:25%;
    border: 2px solid;
    border-color:#333;
    width:100%;
    font:20px;}

字符串
如果百分比不好，就继续玩，直到你喜欢它。

响应式媒体查询将非常有用，但我看到的最大问题是您的容器（.contactus）不够宽，无法容纳您试图放置的文本。尝试将contactus宽度更改为400 px。然而，在较小的屏幕上，您应该有一个媒体查询，可以根据视口宽度更新字体大小和容器大小。

我做了一个简单的小提琴，以帮助您与您的响应问题：https://jsfiddle.net/nLxa1745/
HTML

<div class="main"> 
  <img class="user-pic" src="http://placehold.it/250x150">
  <div class="contact-box">
    <h4 class="user-name">Contact Us</h4>
    <ul class="info-contact">
        <li>
       phonenumber
        </li> 
        <li>
        812-123-4567
        </li>
            <li>
       email
        </li> 
        <li>
       [email protected]
        </li>
    </ul>
  </div>
</div>

字符串
CSS

body {
  font-family: sans-serif;
  color: #3f3f3f;
}

li{
  margin: 5px 0px 0px 20px;
}

.main {
  border: 2px solid gray;
  width: 250px;
  margin: auto;
  box-shadow: 2px 2px 5px 1px gray;
}

.user-pic {
  border-bottom: 2px solid gray;
}

.user-name {
  margin-left: 15px;
  margin-bottom: 0;
  color: #B77425;
}

.info-contact {
  list-style-type: none;
  padding: 0;
}

@media only screen 
and (min-width : 600px) {
  .main {
    width: 100%;
    height: 150px; 
  }
  .user-pic {
    border-right: 2px solid gray;
    float: left;
  }
  .contact-box {
    float: left;
  }
}

型
P.S.我也推荐关于标题的阅读：The Truth About Multiple H1 Tags in the HTML5 Era