logo标签列表

如何使 DIV 元素具有响应式设计

htmlcssstyling
9
在我的小网站上，我用CSS设置了一个div。当我在不同分辨率下测试时，相比27英寸的屏幕，11英寸的小屏幕上这个盒子看起来变形了。我该如何让我的高度为700像素，宽度为200像素的div在所有显示器尺寸下都呈现相同大小？
感谢您。
下面是该div的CSS样式：
text-align:center; 
border:3px solid black; 
padding-bottom:10px; 
height:700px; width:200px; 
background-color: white; margin-right: 2cm; 
margin-top: -19cm; 
margin-left: auto;
为使其具有响应性，请在宽度和高度上使用百分比代替像素，并添加CSS媒体查询（https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries）。 - BradleyIW
学习媒体查询！ - Pratik Joshi
5个回答
6

您需要添加一个元标签来识别宽度和媒体查询，以便在宽度不同时执行操作。将百分比添加到CSS元素而不是像素也会非常有帮助。

HTML代码：

<!doctype html>
    <meta name="viewport" content="width=device-width"/>

添加元标记以允许页面识别设备的宽度。请参见Mozilla对此的看法。

在此示例中，将在<p>标记和背景上查询四个不同设备宽度，并应用它们。

<body>
    <h1>Media Queries Examples</h1>
    <p>Increase or decrease the size of your window to see the background color change</p>
</body>

CSS代码：

p {
  font-family: arial,san-serif;   
  font-size: 13px;
  font-color: black;
}

h1 {
  font-size:30px;   
}

@media screen and (min-width:761px) {
  body {
    background-color:white;
  }
  h1 {
    color:red;
  }    
}

@media screen and (max-width:760px) {
  body {
    background-color: #333;
  }
  h1 {
    color:red;
  }  
  p {
    color: white;
  }
}

@media screen and (max-width:480px) {
  body {
    background-color: #807f83;
  }
  h1 {
    color:white;
  }  
  p {
    color: white;
  }
}

@media screen and (max-width:360px) {
  body {
    background-color: #0096d6;
  }
  h1 {
    color:white;
    font-size:25px;
  }  
  p {
    color: white;
  }
}

使用 @media Screen 在你的 css 中调用一个屏幕查询。当设备宽度达到该查询范围时，可以使用 @Media all 适用于所有媒体设备（请参见进一步阅读），然后将应用到相关元素的 css。查看 当前示例。当你在 JSFiddle 窗口中拖动框，如果满足查询条件，它会改变背景和文字颜色。你可以将相同的逻辑应用于手机、平板电脑、电视和台式机。标准设备的媒体查询 - CSS Tricks 此示例由 JSFiddle 上的匿名用户提供。它提供了一个清晰的示例，说明如何确保你的元素根据所涉及的设备进行样式设置。我不承认任何功劳。

进一步阅读
- 微软 - 媒体查询
- @Media规则 - W3C
- 响应式Web设计Wiki

2
你需要使你的网站响应式，为了做到这一点，我们使用一些被称为媒体查询的东西，它基本上只是在你的css语法中添加额外的标记。
一个很棒的框架可以用来实现响应式设计，因为你刚开始学习，那就使用Bootstrap吧，它非常容易根据你项目的需求进行定制。
这也有助于帮助你更好地理解流体网格系统是如何整合到你的网站中去的。
希望这可以帮到你！
2
2
您可以通过以下方法调整页面大小以适应任何屏幕： 

body {
  background: white;
  width: 100%;
}

.content {
  width: 100%;
}

.paragraphs {
  width: 50%;
  margin: 0 auto;
}
<html>
  <head>
    <title>Example of resizing</title>
  </head>
  
  <body>
    <div class="content">
      <div class="header">
        <h1>Header</h1>
      </div>
      
      <div class="paragraphs">
        <p>#000000 color RGB value is (0,0,0). This hex color code is also a web safe color which is equal to #000. #000000 color name is Black color.

#000000 hex color red value is 0, green value is 0 and the blue value of its RGB is 0. Cylindrical-coordinate representations (also known as HSL) of color #000000 hue: 0.00 , saturation: 0.00 and the lightness value of 000000 is 0.00.

The process color (four color CMYK) of #000000 color hex is 0.00, 0.00, 0.00, 1.00. Web safe color of #000000 is #000000. Color #000000 rgb is equally color.</p>
      </div>
    </div>
  </body>
</html>

谢谢

0

有很多方法可以让DIV变得具有响应性。 最简单的方法是使用像Bootstrap这样的框架，它会为您完成所有工作。

另一种方法是使用@media('max-width: 1024px'){//code...} 这种方式可以定义您想要的每个屏幕分辨率下会发生什么。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接