Fatal编程技术网
  • html/
  • HTML/CSS@media

HTML/CSS@media

html css

HTML/CSS@media,html,css,media,Html,Css,Media,哟，我正在为服务器制作MOTD，供最终用户阅读。但是，对于使用较小显示器的用户来说，它看起来是如此压缩，例如，当分辨率为1280x1040时，它被拉伸了。我不熟悉CSS中的@media标签，我该如何使它在更小的显示器上看起来更好 这是我的密码 <DOCTYPE! html> <html> <head> <title>MOTD</title> <style type="text/css">

哟，我正在为服务器制作MOTD，供最终用户阅读。但是，对于使用较小显示器的用户来说，它看起来是如此压缩，例如，当分辨率为1280x1040时，它被拉伸了。我不熟悉CSS中的@media标签，我该如何使它在更小的显示器上看起来更好

这是我的密码

<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>

尝试更改边框DIV以获得宽度和边距：Auto-，这将确保它始终位于设备屏幕的中间。看

对于较小的设备，您可能也需要对字体大小做一些调整。

您应该在CSS中添加@media，如下所示

@media only screen and (min-device-width : 1024px) and (max-device-width : 1280px)
{
body {
      /*your custom CSS*/
}

#border {
      /*your custom CSS*/
}
...
}
通过该代码，您可以为1024px和1280px之间的监视器宽度设置不同的CSS。此外，您还可以在CSS中添加更多的@media

编辑1：

请也看看这些链接

编辑2：

标准设备的媒体查询

您可以这样做：

 @media screen and (max-width: 1024px){
  h1{font-size:44px} 
  #border{margin:0 400px;}
}
@媒体屏幕和最大宽度：1024px是您希望应用css的分辨率。您可以用任何东西更改1024px，如480px、768px等

您的左边距和右边距设置为500px。这意味着，如果屏幕宽度小于1000px，则内容的宽度为零。考虑使用宽度：90%；最大宽度：800px；保证金：0自动；相反，对于这个基本的HTML文件，您不需要使用媒体查询，尤其是因为您的所有用户都将从桌面计算机上查看此页面。媒体查询适用于将在多个设备上查看的页面桌面、平板电脑、手机等。只需使用基于百分比的宽度，并将容器居中，边距为：0自动；正如其他人所建议的，就是这么简单！谢谢你，先生：这在我测试过的所有显示器上都能正常工作。谢谢： 
 @media screen and (max-width: 1024px){
  h1{font-size:44px} 
  #border{margin:0 400px;}
}