html – 定位响应式体验

2023年7月16日 212次阅读

我知道大量的
HTML,CSS,
Jquery和
PHP.但是,当涉及到制作响应式网页时,我真的很陌生.所以基本上在我的基本网页’colors.html’我有4个div. 4种颜色为黄色,蓝色,红色和绿色.因此,了解响应式网页应该是什么,我以％的方式完成了我的所有定位,高度和宽度.我的所有定位都放在一个相对的体内,其中的所有元素都是绝对的.看起来它工作正常,我为所有div设置了一个min-width,这样当用户调整浏览器窗口的大小时,它们并不是全部一起争夺.我这样做是正确的还是有更好的方法来做到这一点？

<!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;
}

最佳答案 您可以使用媒体规则为每个分辨率做出响应……它可能是一个太多的工作.但它会为你工作…

例如：

使新的.css文件调用它,无论你想要什么. responsive.css
你将使用你所有的tagst(div,ul,li等)…将它包含在你的html文件中以标记…

好吧,对于ecample你有：

#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) {
}

所以你必须为每个标签做这个… dor desseop,table,phone screen.

@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) {
}

直到480px或更低.我不知道你需要多小屏幕.

希望对你有帮助 ：)

点赞