如何使我的頁面響應任何屏幕尺寸？

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 個解決方案

解決方案1
3 2018-12-12 09:10:14

解決方案2
0 2018-12-12 09:05:33

解決方案3
0 2018-12-12 10:58:26

如何使我的頁面響應任何屏幕尺寸？

問題描述

3 個解決方案

解決方案1 3 2018-12-12 09:10:14

解決方案2 0 2018-12-12 09:05:33

解決方案3 0 2018-12-12 10:58:26

解決方案1
3 2018-12-12 09:10:14

解決方案2
0 2018-12-12 09:05:33

解決方案3
0 2018-12-12 10:58:26