HTML/CSS @media

Эй, я делаю MOTD для сервера для чтения конечных пользователей. Тем не менее, он выглядит настолько сжатым для пользователей с меньшими мониторами, например, когда разрешение составляет 1280x1040, оно растянуто. Я не знаком с тегами @media в CSS, как я собираюсь сделать это, чтобы он выглядел лучше на более мелких мониторах?HTML/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>

источник

2014-12-09 Eiður Geir Vilhelmsson

У вас есть «margin-left» и «margin-right», равные '500px'. Это означает, что ваш контент будет иметь нулевую ширину, если экран меньше, чем '1000px'. Подумайте о том, чтобы использовать что-то вроде 'width: 90%; макс-ширина: 800px; margin: 0 auto; вместо этого. –

Для этого основного файла HTML вам не нужно использовать мультимедийные запросы, тем более, что все ваши пользователи будут просматривать эту страницу с настольного компьютера. Запросы к мультимедиа предназначены для страниц, которые будут просматриваться на нескольких устройствах (настольных компьютерах, планшетах, телефонах и т. Д.). Просто используйте ширину в процентах и центрируйте контейнер с «margin: 0 auto;», как предложили другие. – user13286

Попробуйте изменить #border DIV, чтобы иметь ширину и маржи: авто, это будет гарантировать, что всегда в центре экрана устройства. См 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; 
}

Вы можете захотеть сделать что-то о размерах шрифтов тоже (для небольших устройств).

источник

2014-12-09 18:03:02

Это работает также на всех мониторах, на которых я тестировал это. Спасибо :) –

Рад, что это помогло. –

вы должны добавить @media в CSS, как показано ниже

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

#border { 
     /*your custom CSS*/ 
} 
... 
}

этим кодом вы можете установить различные CSS для мониторов ширины между 1024px и 1280px.also, вы можете добавить больше @ средств массовой информации в CSS.

EDIT1:

также взглянуть на эти ссылки угождать

EDIT2:

Media Queries для стандартных устройств

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

источник

2014-12-09 18:06:38

Это было так просто! Спасибо, сэр :) –

Вы можете сделать это следующим образом:

@media screen and (max-width: 1024px){ 
    h1{font-size:44px} 
    #border{margin:0 400px;} 
}

@media экран и (макс-ширина: 1024px) является разрешение, которое вы хотите CSS быть applyed.You может изменить 1024 точек с чем угодно, например 480px, 768px и т. д.

источник

2014-12-09 18:12:11

HTML/CSS @media

ответ

Смежные вопросы