请在下面找到我的代码:我需要让它响应所有屏幕尺寸?怎么样 ?注意:我重复相同的文字和链接,以显示我正在寻找的相同数量的信息。第一个代码是 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 回答
2 methods:
使用%而不是 px
在你的 CSS 中 Use_1_rules:
我喜欢使用的一个简单技巧:
在台式机或其他大型设备上,它的宽度为 1200px。当你小于那个时,它将是屏幕宽度的 96%。你可以 100%,但我个人更喜欢在屏幕的内容和边缘之间有一个非常小的差距,特别是对于像三星的 Edge 系列这样的手机。它还提供了一个用户可用于滚动页面的小画布。
根据我的经验,浮动使响应式设计变得更加困难。我建议
display: inline-block;
并学习如何正确使用它与block
元素组合:)要在不同设备上查看网页,您必须将以下代码添加到标题中。 (代码适用于 HTML5)
视口是用户在网页上的可见区域,它在手机上比在计算机屏幕上小。 “width=device-width”将网页的宽度设置为设备的宽度。初始比例是首次调用网页时的缩放级别。