Question

请在下面找到我的代码：我需要使其适应所有屏幕尺寸吗？怎么样？注意：我重复了相同的文本和链接，以显示相同数量的要查找的信息。第一个代码是html，第二个代码是CSS。确实需要帮助，因为在不同的屏幕尺寸上使用不同的格式看起来并不好。在此先感谢您，并租我问代码是否不清楚或需要更多说明：

html代码：

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Index</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
<div class="Header">
<div id="object1"><a href="index.html"><img src="Images/Capture logo.PNG" 
width="230" height="100" alt=""/></a></div>
<div id="object2">

<p class="text1">test</p>

</div></div>



<div class="watermarked"> <hr size="20"; color="#140098"</hr>







<table  align="center" width="100%" border="0"   cellspacing="0" 
cellpadding="0" margin="0" border-collapse="collapse" border-spacing="0" >

<tbody >
<tr>
<td width="50%">     <p class="ltrh" >test</p></td>

<td width="50%"><p class="rtlh">test</p></td>
</tr>



</tbody>
</table >

<table  align="center" width="100%" border="0"   cellspacing="0" 
cellpadding="0" margin="0" border-collapse="collapse" border-spacing="0" >
<tbody >
<tr>
<td><a href="https://stackoverflow.com"><p class="ltr" >test</p></a></td>
<td><a href="https://stackoverflow.com"><p class="rtl" >test</p></a></td>
</tr>
<tr>

<td><a href="https://stackoverflow.com"><p class="ltr" >test</p></a></td>
<td><a href="https://stackoverflow.com"><p class="rtl" >test</p></a></td>
</tr>
<tr>

<td><a href="https://stackoverflow.com"><p class="ltr" >test</p></a></td>
<td><a href="https://stackoverflow.com"><p class="rtl" >test</p></a></td>
</tr>
<tr>

<td><a href="https://stackoverflow.com"><p class="ltr" >PR Approval:</p> 
</a></td>
<td><a href="https://stackoverflow.com"><p class="rtl" >test</p></a></td>
</tr>
<tr>
    <td><a href="https://stackoverflow.com"><p class="ltr" >test</p></a> 
</td>
<td><a href="https://stackoverflow.com"><p class="rtl" >test</p></a></td>
</tr>
<tr>
<td><a href="https://stackoverflow.com"><p class="ltr" >test</p></a> 
</td>
<td><a href="https://stackoverflow.com"><p class="rtl" >test</p></a></td>
</tr>

<tr>
<td><a href="https://stackoverflow.com"><p class="ltr" >test</p></a> 
</td>
<td><a href="https://stackoverflow.com"><p class="rtl" >test</p></a></td>
</tr>

<tr>
<td><a href="https://stackoverflow.com"><p class="ltr" >test</p></a> 
</td>
<td><a href="https://stackoverflow.com"><p class="rtl" >test</p></a></td>
</tr>

<tr>

<td><a href="https://stackoverflow.com"><p class="ltr" >test</p></a></td>
<td><a href="https://stackoverflow.com"><p class="rtl" >test</p></a></td>
</tr>
</tbody>
</table>
</div>



</body>
</html>

css代码：

@charset "utf-8";
/* CSS Document */


#object1{
    width:auto;
    float: left;
}

#object2{
    width:auto;
    float: right;
    align-content: center


}
p.text1{
    color: #464646;
    font-size: 25pt;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";

    }
p.rtlh {
    direction: rtl;
    font-size: 22pt;
    color: red;
    text-align: center;
    font-weight:bold;
}

p.ltrh{
    font-size: 21pt;
    color: red;
    text-align: center;
    font-weight:bold;

}

p.ltr{
    font-size: 18pt;
    color: mediumblue;
    margin-left:10em;
    margin-top: 0em;
    margin-bottom: 1.25em;
}

p.rtl{
     direction: rtl;
    font-size: 18pt;
    color: mediumblue;
    margin-right:10em;
        margin-top: 0em;
    margin-bottom: 1.25em;
}

.Header {
    height: 100px;


}





.watermarked {
  position: relative;
}

.watermarked:after {
 content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background-image: url(Images/blue.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.2;
      z-index: -1;  
}

Answer 1

2种方法：

使用％而不是px

在CSS中使用@media规则：

@media only screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

Answer 2

我喜欢使用的一个简单技巧：

#page{
    width: 96%;
    max-width: 1200px;
    margin: 0 auto;
}

在台式机或其他大型设备上，宽度为1200px。当您缩小尺寸时，它将是屏幕宽度的96％。您可以100％做到这一点，但我个人更希望内容与屏幕边缘之间的间隙很小，尤其是对于三星Edge系列手机。它还提供了一个小画布，用户可以使用它来滚动页面。

_{根据我的经验，float使响应式设计更加困难。我建议使用display: inline-block;，并学习如何结合使用block元素：）}

Answer 3

要在不同设备上查看网页，您必须将以下代码添加到标题中。（该代码适用于HTML5）

<meta name="viewport" content="width=device-width, initial-scale=1.0">

视口是用户在网页上的可见区域，它将在手机上小于在计算机屏幕上。 “ width = device-width”将网页的宽度设置为设备的宽度。初始比例是网页首次被调用时的缩放级别。

如何使我的页面响应任何屏幕尺寸？

3 个答案: