Question

我知道大量的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;
}

Answer 1

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

例如：

使新的.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 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) {
}

所以你必须为每个标签做这个...一个desctop，桌子，电话屏幕。

@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或更低。我不知道你需要多小屏幕。

希望这会对你有所帮助:)。

Answer 2

在我看来，您的概念的最大问题是position: absolute通常用于从正常的页面流中呈现项目。它们呈现在页面上方。这就是您放置下拉菜单，工具提示，模态窗口，滑动内容或超级菜单的抽屉的方式。

将所有内容放在正常流程之外仅仅是因为您可能不是特别有用，因为您实际上并不需要在流程外部放置元素的功能。你没有流量！。

当你开始考虑布局时，你根本不应该考虑CSS。您应该问自己的一切是：我的页面将如何在不同大小和比例的屏幕上呈现？：

巨大的屏幕，宽度如此之大，所有段落都会呈现为1个衬里（＆gt; 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
}

另一个好的做法是尽可能少编写代码。例如，不像为你所做的那样为每种颜色编写相同的属性，最好创建一个包含颜色的所有常见属性的类，并将其应用于所有颜色div。

.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的特定属性。

请注意，在使用之前，您应该加载font-family，例如Roboto，以确保它在所有设备上呈现，即使它未安装。

@import url(https://fonts.googleapis.com/css?family=Roboto);

您还应指定通用font-family类型，以防下载字体文件时出错，因此浏览器会将页面呈现为尽可能接近原始页面。

除此之外，我唯一的建议是：始终在所有屏幕尺寸和至少3个主要浏览器上测试您的CSS ，然后才能上线。

祝你好运！

定位积极响应的体验

2 个答案: