Question

所以在我的小网站上，我有一个用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;

Answer 1

您需要添加元标记来标识宽度和媒体查询，以便在宽度不同时执行操作。将百分比添加到css元素而不是像素上也非常有用。

HTML code：

添加元标记以允许页面标识设备的宽度。见Mozilla's take on this

在此示例中，将应用<!doctype html> <meta name="viewport" content="width=device-width"/>标记和背景上四种不同设备宽度的查询。

<p>

CSS代码：

<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应用于相关元素。见current example。当您在JSFiddle窗口中拖动框时，如果满足查询，它将更改背景的颜色和书写的颜色。您可以将相同的逻辑应用于手机，平板电脑，电视和桌面。 Media Queries for Standard Devices - CSS Tricks

此示例由JSFiddle上的匿名用户提供。它提供了一个明确的示例，说明您需要确保元素的样式与相关设备相对应。我不相信。

进一步阅读
- Microsoft - Media Queries
- @Media Rule - W3C
- Responsive Web Design Wiki

Answer 2

你需要让你的网站响应，为此我们使用一个名为media queries的东西，它基本上只是你的css语法中的额外标记。

一个很好的框架，因为你刚刚开始使用响应式设计，它将使用Bootstrap，它可以轻松定制，以满足您项目的需求。

这也有助于您更好地了解流体网格系统如何整合到您的网站中。

希望这有帮助！

Answer 3

除了乔丹所说的。这是了解媒体查询和响应能力的好地方：https://www.udacity.com/course/mobile-web-development--cs256

Answer 4

您可以这样做来调整页面大小以适应任何屏幕：

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>

由于

Answer 5

有很多方法可以让DIV做出响应。最简单的方法是使用像bootstrap这样的框架来完成所有工作。

另一种方法是使用.search-wrapper > ul > li:last-child > hr{ 这样你就可以定义你想要的每个屏幕分辨率会发生什么。

如何使DIV元素响应

5 个答案: