Html 定位为响应性体验
我知道大量的HTML、CSS、Jquery和PHP。但是当涉及到制作一个响应性强的网页时，我真的是个新手。所以基本上在我的名为“colors.html”的基本网页中，我有4个div。这四种颜色是黄色、蓝色、红色和绿色。所以，为了理解一个响应性强的网页应该是什么样子，我在%中做了所有的定位、高度和宽度。我所有的定位都是在一个相对的身体内，身体内的所有元素都是绝对的。它看起来工作得很好，我为所有div设置了一个最小宽度，这样当用户调整浏览器窗口的大小时，它就不会一起乱动。我这样做是正确的还是有更好的方法Html 定位为响应性体验,html,css,responsive-design,Html,Css,Responsive Design,我知道大量的HTML、CSS、Jquery和PHP。但是当涉及到制作一个响应性强的网页时，我真的是个新手。所以基本上在我的名为“colors.html”的基本网页中，我有4个div。这四种颜色是黄色、蓝色、红色和绿色。所以，为了理解一个响应性强的网页应该是什么样子，我在%中做了所有的定位、高度和宽度。我所有的定位都是在一个相对的身体内，身体内的所有元素都是绝对的。它看起来工作得很好，我为所有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;
}
试验
$（'#红色'）。单击（函数（）{
警报（“红色”）；
})
$（'#绿色'）。单击（函数（）{
警报（“绿色”）；
})
$（'#蓝色'）。单击（函数（）{
警报（“蓝色”）；
})
$（'#黄色'）。单击（函数（）{
警报（“黄色”）；
})
身体{
保证金：0；
位置：相对位置；
}
#蓝色的{
位置：绝对位置；
宽度：20%；
身高：10%；
背景颜色：蓝色；
颜色：白色；
文本对齐：居中；
字体大小：150%；
字体系列：Roboto；
光标：指针；
边界半径：5px；
左：3%；
最高：5%；
最小宽度：150px；
}
#黄色的{
位置：绝对位置；
宽度：20%；
身高：10%；
背景颜色：黄色；
颜色：白色；
文本对齐：居中；
字体大小：150%；
字体系列：Roboto；
光标：指针；
边界半径：5px；
左：3%；
最高：20%；
最小宽度：150px；
}
#红色的{
位置：绝对位置；
宽度：20%；
身高：10%；
背景色：红色；
颜色：白色；
文本对齐：居中；
字体大小：150%；
字体系列：Roboto；
光标：指针；
边界半径：5px；
右：3%；
最高：5%；
最小宽度：150px；
}
#绿色的{
位置：绝对位置；
宽度：20%；
身高：10%；
背景颜色：绿色；
颜色：白色；
文本对齐：居中；
字体大小：150%；
字体系列：Roboto；
光标：指针；
边界半径：5px；
右：3%；
最高：20%；
最小宽度：150px；
}
#蓝色{
位置：绝对位置；
宽度：20%；
身高：10%；
背景颜色：蓝色；
颜色：白色；
文本对齐：居中；
字体大小：150%；
字体系列：Roboto；
光标：指针；
边界半径：5px；
左：3%；
最高：5%；
最小宽度：150px；
}位置：绝对值- 巨大的屏幕，宽度如此之大，您的所有段落都将呈现为1行（>75em）
- 大屏幕：台式机、大型笔记本电脑（62em>74.9em）
- 中型设备：笔记本电脑/平板电脑（48em>61.9em）
- 小型设备大多数智能手机、平板电脑（34em>47.9em）
- 非常小的屏幕（高达33.9em）
// CSS for very large screens
@media (max-height: 74.9em) {
// CSS overrides for large screens
}
@media (max-height: 61.9em) {
// CSS overrides for medium screens
}
@media (max-height: 47.9em) {
// CSS overrides for small screens
}
@media (max-height: 33.9em) {
// CSS overrides for very small screens
}
.color {
position: absolute;
width: 20%;
color: white;
text-align: center;
font-size: 150%;
font-family: Roboto, sans-serif;
cursor: pointer;
border-radius: 5px;
min-width: 150px;
}
{color}{…}div字体系列Roboto@import url(https://fonts.googleapis.com/css?family=Roboto);
字体系列祝你好运 不要使用绝对位置。位置相对，具有智能/深思熟虑的宽度（我倾向于使用
width:%；max-width:pxcolors.css