如何使DIV元素响应
所以在我的小网站上，我有一个用CSS设置样式的div，当我用不同的分辨率测试时，这个盒子在11英寸的小屏幕上看起来扭曲了，而我的屏幕是27英寸的。怎样才能使我的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;回答 5
Stack Overflow用户
发布于 2015-05-10 20:29:30
您需要添加一个meta标记来标识宽度，并在宽度不同时添加媒体查询来执行操作。将百分比添加到css元素而不是像素上也是非常有用的。
HTML代码：
<!doctype html>
<meta name="viewport" content="width=device-width"/>添加meta标签以允许页面标识设备的宽度。请参阅Mozilla's take on this
在此示例中，将对<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;
}
}因此，在css中使用@media Screen调用对屏幕的查询。您可以对所有媒体设备使用@Media all (请参阅进一步的阅读)当设备宽度达到该查询的范围内时，css将应用于相关元素。请参阅current example。当您在JSFiddle窗口中拖动该框时，如果满足查询条件，它将更改背景颜色和文字颜色。您可以将相同的逻辑应用于手机、平板电脑、电视和台式机。Media Queries for Standard Devices - CSS Tricks
这个例子是由JSFiddle上的一个匿名用户提供的。它提供了一个清晰的示例，说明需要什么来确保元素的样式与所讨论的设备相对应。我不接受任何荣誉。
进一步阅读
- Microsoft - Media Queries
- @Media Rule - W3C
- Responsive Web Design Wiki
Stack Overflow用户
发布于 2015-05-10 20:19:00
你需要让你的网站具有响应性，为了做到这一点，我们使用了一种叫做的东西，它基本上就是你的css语法中的额外标记。
使用是一个很好的框架，因为你刚刚开始使用响应式设计，它很容易定制来满足你的项目需求。
这还可以帮助您更好地了解流体网格系统是如何整合到您的站点中的。
希望这能有所帮助！
Stack Overflow用户
发布于 2015-05-10 20:25:51
除了乔丹所说的。这是一个学习媒体查询和响应能力的好地方：https://www.udacity.com/course/mobile-web-development--cs256
https://stackoverflow.com/questions/30151213
复制相似问题
腾讯云开发者
