Html 如何使 DIV 元素具有响应性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30151213/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a DIV element responsive
提问by user2451511
So on my small website I have a div that I styled with CSS and as I was testing with various resolutions, the box looked distorted on a small 11 inch screen compared to my 27 inch screen. How can I make my 700 pixel heigth 200 pixel width div look the same size on all monitor sizes
因此，在我的小网站上，我有一个使用 CSS 设计样式的 div，当我使用各种分辨率进行测试时，与我的 27 英寸屏幕相比，在 11 英寸的小屏幕上，该框看起来扭曲了。如何使我的 700 像素高度 200 像素宽度 div 在所有显示器尺寸上看起来都相同
Thanks
谢谢
HERE IS THE CSS FOR THE 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;
回答by BIW
You'll need to add a meta tag to identify the width and media queries to perform an action when the width is different. It would also be very helpful to add percentage onto your css elements rather than pixels.
您需要添加一个元标记来标识宽度和媒体查询以在宽度不同时执行操作。在 css 元素上添加百分比而不是像素也会非常有帮助。
HTML code:
HTML代码：
<!doctype html>
<meta name="viewport" content="width=device-width"/>
add the meta tag to allow for the page identify the width of the device. see Mozilla's take on this
添加元标记以允许页面识别设备的宽度。看看Mozilla 对此的看法
In this example a query for four different device widths on a <p>tag and background will be applied.
在此示例中<p>，将应用对标签和背景上四种不同设备宽度的查询。
<body>
<h1>Media Queries Examples</h1>
<p>Increase or decrease the size of your window to see the background color change</p>
</body>
The CSS code:
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;
}
}
So using the @media Screeninside your css calls a query for the screen. You can use @Media allfor all media devices (see further reading) when the device width reaches within the bounds of that query the css will then be applied to the element in question. see a current example. When you drag the box in the JSFiddle window, it'll change the color of the background and the color of the writing if the query is satisfied. You can apply the same logic to phones, tablets, tv and desktop. Media Queries for Standard Devices - CSS Tricks
因此，使用@media Screen您的 css 内部调用屏幕查询。@Media all当设备宽度达到该查询的范围内时，您可以将其用于所有媒体设备（请参阅进一步阅读），然后将 css 应用于相关元素。查看当前示例。当您在 JSFiddle 窗口中拖动框时，如果查询满足，它将更改背景颜色和文字颜色。您可以将相同的逻辑应用于手机、平板电脑、电视和台式机。标准设备的媒体查询 - CSS 技巧
This example was provided by an Anonymous user on JSFiddle. It provides a clear example of what is needed for you to ensure that your elements are styled in correspondence to the device in question. I take no credit.
此示例由 JSFiddle 上的匿名用户提供。它提供了一个清晰的示例，说明您需要什么来确保您的元素的样式与相关设备相对应。我不相信。
Further Reading
- Microsoft - Media Queries
- @Media Rule - W3C
- Responsive Web Design Wiki
进一步阅读
-微软 - 媒体查询
- @Media Rule - W3C
- Responsive Web Design Wiki
回答by Jordan
You need to make your website responsive, to do that we use something called media querieswhich is basically just extra markup in your css syntax.
您需要使您的网站具有响应性，为此我们使用称为媒体查询的东西，它基本上只是您的 css 语法中的额外标记。
A great framework to use since you're just starting out with responsive design would be using Bootstrap, it's easily customised to fit the needs of your project.
一个很好的框架可以使用，因为您刚刚开始使用响应式设计将使用Bootstrap，它可以轻松定制以满足您的项目需求。
This should also help give you a better understanding about how fluid grid systems are incorporated into your site.
这也应该有助于让您更好地了解如何将流体网格系统整合到您的站点中。
Hope this helps!
希望这可以帮助！
回答by dakoto
In addition to what Jordan said. This is a great place to learn about media queries and responsiveness: https://www.udacity.com/course/mobile-web-development--cs256
除了乔丹所说的。这是了解媒体查询和响应能力的好地方：https: //www.udacity.com/course/mobile-web-development--cs256
回答by Josh Murray
You could do this to resize the page to fit any screen:
您可以这样做来调整页面大小以适合任何屏幕：
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>Thanks
谢谢
回答by HackinGuy
There are a lot of ways to make a DIV responsive. The easiest one is to use a framework like bootstrap that does all of the work for you.
有很多方法可以使 DIV 具有响应性。最简单的方法是使用像 bootstrap 这样的框架来为您完成所有工作。
The other way is to use @media('max-width: 1024px'){//code...}this way you will define what will happen in each of the screen resolutions you want.
另一种方法是使用@media('max-width: 1024px'){//code...}这种方式，您将定义在您想要的每个屏幕分辨率下会发生什么。
