Question

我正在尝试使我的网站始终符合浏览器大小。现在，如果我用更小的屏幕进入我的网站，一切都搞乱了。这是我的代码中的一个和css示例

HTML

<div class="contactus">

<h2>Contact Us</h2>

<h3>PhoneNumber</h3>
<h3>812-123-4567</h3>
<h3>Email</h3>
<h3>qwerty@asd.com</h3>
</div>

CSS

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

Answer 1

为了使它具有响应性，你需要将CSS的代码保持在相对单位，因为你用固定单位制作代码时，代码将无法适应屏幕，所以你必须使你的代码像这样：< / p>

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

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

Answer 2

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

Answer 3

首先欢迎来到我们的社区，首先阅读本主题，以帮助您回答更好的问题并获得更准确的回复：https://stackoverflow.com/help/how-to-ask

关于你的问题，你必须更好地解释“混乱”的意思。

我做了一个简单的小提示，帮助您解决响应问题：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>
       qwerty@blabla.com
        </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。我还建议阅读标题https://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824

如何使网站中的元素始终符合浏览器大小

3 个答案: