HTML/CSS @media
HTML/CSS @media
提问于 2014-12-09 17:53:27
哟，我正在为服务器做一个MOTD，供终端用户阅读。然而，对于具有较小监视器的用户来说，它看起来是如此的压缩--例如，当分辨率为1280x1040时，它就被分散了。我不熟悉CSS中的@媒体标签，我该如何使它在较小的显示器上看起来更好呢？
这是我的密码；
<DOCTYPE! html>
<html>
<head>
<title>MOTD</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
background: rgba(169,3,41,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(169,3,41,1)), color-stop(44%, rgba(143,2,34,1)), color-stop(100%, rgba(109,0,25,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
background: radial-gradient(ellipse at center, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019', GradientType=1 );
}
#border {
background: #6d0019;
margin-right: 500px;
margin-left: 500px;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
-webkit-border-radius: 150px 150px 150px 150px;
border-radius: 150px 150px 150px 150px;
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
li {
font-size: 25px;
font-family: Impact;
}
h1 {
font-size: 65px;
font-family: Impact;
}
p {
font-size: 25px;
font-family: Impact;
}
</style>
</head>
<body>
<br><br><br><br>
<div id="border">
<center>
<br>
<h1>Hello & Welcome :)</h3>
<p>
Yo. This is a simple Trouble In Terrorist Town that is still under development<br>
Do us a favor and have fun and don't be an ass ;)
</p>
<br>
</center>
</div>
<br><br>
<div id="border">
<center>
<br>
<h1>Rules:</h3>
<li>Offensive Language Not Tolerented</li>
<li>Sexism and Racism Result To Permenant Ban</li>
<li>Respect and Obey Our Staff</li>
<li>No RDM</li>
<li>No Greifing</li>
<br><br>
</center>
</div>
</body>
</html>回答 3
Stack Overflow用户
回答已采纳
发布于 2014-12-09 18:03:02
尝试改变你的#边框div有一个宽度和边距:auto，这将确保它总是在设备屏幕的中间。请参阅http://jsfiddle.net/richardblyth/f5roksrv/
#border {
background: #6d0019;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
-webkit-border-radius: 150px 150px 150px 150px;
border-radius: 150px 150px 150px 150px;
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
/* Altered */
width: 92.1875%; /* = 1280 minus 1000 */
margin-right: auto;
margin-left: auto;
}您可能也想对字体大小做些什么(对于较小的设备)。
Stack Overflow用户
发布于 2014-12-09 18:06:38
您应该在CSS中添加@media，如下所示
@media only screen and (min-device-width : 1024px) and (max-device-width : 1280px)
{
body {
/*your custom CSS*/
}
#border {
/*your custom CSS*/
}
...
}通过该代码，您可以为1024 to和1280px.also之间的监视器宽度设置不同的css，您可以向CSS中添加更多@media。
EDIT1：
也请看一下这些链接
EDIT2：
标准设备的媒体查询
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Stack Overflow用户
发布于 2014-12-09 18:12:11
你可以这样做：
@media screen and (max-width: 1024px){
h1{font-size:44px}
#border{margin:0 400px;}
}@媒体屏幕和(最大宽度: 1024 px )是您希望css成为applyed.You的分辨率，可以用任何东西更改1024 px，比如480 px、768 px等等。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27385536
复制相关文章
相似问题
腾讯云开发者
