首页 文章

如何使我的页面响应任何屏幕大小?

提问于
浏览
-1

请在下面找到我的代码:我需要让它响应所有屏幕尺寸?怎么样 ?注意:我重复相同的文字和链接,以显示我正在寻找的相同数量的信息。第一个代码是 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;  
}

3 回答

  • 3

    2 methods:

    • 使用%而不是 px

    • 在你的 CSS 中 Use_1_rules:

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

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

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

    在台式机或其他大型设备上,它的宽度为 1200px。当你小于那个时,它将是屏幕宽度的 96%。你可以 100%,但我个人更喜欢在屏幕的内容和边缘之间有一个非常小的差距,特别是对于像三星的 Edge 系列这样的手机。它还提供了一个用户可用于滚动页面的小画布。

    根据我的经验,浮动使响应式设计变得更加困难。我建议display: inline-block;并学习如何正确使用它与block元素组合:)

  • 0

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

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

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

相关问题