所以在我的小网站上,我有一个用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 元素上添加百分比而不是像素也会非常有帮助。
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 技巧
此示例由 JSFiddle 上的匿名用户提供。它提供了一个清晰的示例，说明您需要什么来确保您的元素的样式与相关设备相对应。我不相信。
进一步阅读
-微软 - 媒体查询
- @Media Rule - W3C
- Responsive Web Design Wiki
| 归档时间： |
|
| 查看次数： |
28313 次 |
| 最近记录： |