我了解相当多的 HTML、CSS、Jquery 和 PHP。但是当谈到制作响应式网页时，我真的很陌生。所以基本上在我名为“colors.html”的基本网页中，我有 4 个 div。 4 种颜色是黄色、蓝色、红色和绿色。因此，为了理解响应式网页应该是什么，我在 % 中完成了所有的定位和高度和宽度。我所有的定位都放在一个相对的主体内，而其中的所有元素都是绝对的。看起来它工作正常，我为所有 div 设置了一个最小宽度，这样当用户调整浏览器窗口大小时，它不会全部困惑在一起。我这样做是否正确，或者是否有更好的方法来做到这一点？
<!doctype html>
<html>
<head>
<title> Test </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="colors.css">
</head>
<body>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="yellow"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script>
$('#red').click(function() {
alert('Red');
})
$('#green').click(function() {
alert('Green');
})
$('#blue').click(function() {
alert('Blue');
})
$('#yellow').click(function() {
alert('Yellow');
})
</script>
</body>
</html>
body {
margin: 0;
position: relative;
}
#blue {
position: absolute;
width: 20%;
height: 10%;
background-color: blue;
color: white;
text-align: center;
font-size: 150%;
font-family: Roboto;
cursor: pointer;
border-radius: 5px;
left: 3%;
top: 5%;
min-width: 150px;
}
#yellow {
position: absolute;
width: 20%;
height: 10%;
background-color: yellow;
color: white;
text-align: center;
font-size: 150%;
font-family: Roboto;
cursor: pointer;
border-radius: 5px;
left: 3%;
top: 20%;
min-width: 150px;
}
#red {
position: absolute;
width: 20%;
height: 10%;
background-color: red;
color: white;
text-align: center;
font-size: 150%;
font-family: Roboto;
cursor: pointer;
border-radius: 5px;
right: 3%;
top: 5%;
min-width: 150px;
}
#green {
position: absolute;
width: 20%;
height: 10%;
background-color: green;
color: white;
text-align: center;
font-size: 150%;
font-family: Roboto;
cursor: pointer;
border-radius: 5px;
right: 3%;
top: 20%;
min-width: 150px;
}
最佳答案
您可以使用 Media Rule 对每个分辨率做出响应...这可能有点太多工作。但它会为你工作...
例如:
制作新的 .css 文件，随心所欲地调用它。响应.css 您将使用所有标签(div、ul、li 等)...将其包含在您的 html 文件中以标记...
好吧，例如你有:
#blue {
position: absolute;
width: 20%;
height: 10%;
background-color: blue;
color: white;
text-align: center;
font-size: 150%;
font-family: Roboto;
cursor: pointer;
border-radius: 5px;
left: 3%;
top: 5%;
min-width: 150px;
}在 Media Rule 标签中，它看起来像:
@media screen and (max-width: 699px) and (min-width: 520px) {
#blue {
position: absolute;
width: 20%;
height: 10%;
background-color: blue;
color: white;
text-align: center;
font-size: 150%;
font-family: Roboto;
cursor: pointer;
border-radius: 5px;
left: 3%;
top: 5%;
min-width: 150px;
}
#red {
}
.div {
}
}
@media screen and (max-width: 1000px) and (min-width: 700px) {
}所以你必须为每个标签做这件事...桌面、表格、电话屏幕。
@media screen and (max-width: 1680px){
}
@media screen and (max-width: 1600px) {
}
@media screen and (max-width: 1440px) {
}
@media screen and (max-width: 1400px) {
}
@media screen and (max-width: 1366px) {
}
@media screen and (max-width: 1360px) {
}
@media screen and (max-width: 1280px) {
}
@media screen and (max-width: 1152px) {
}
@media screen and (max-width: 1024px) {
}希望这对你有帮助:)
关于html - 定位响应式体验，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34146001/