Recommended Posts

<style>
  .right 
  {
    float: right;
  }
  @media only screen and (max-width: 600px) 
  {
	.zzzz 
	{
      display: none;
	}
}
</style>
<div class="right zzzz">
  // ...
</div>

Необходимо создавать класс zzzz для шаблона больше чем 600px если мне нечего будет вписать в него никаких параметров ?

Edited by Неугомонный

Share this post


Link to post
Share on other sites
29 минут назад, npofopr сказал:

Вы точно понимаете, что написали? 

Честно разбираюсь только с медиа и пытаюсь понять)),

класса нет для экранов выше 600px так и оставлять, это не будет считаться ошибкой что класса нет для экранов 600 и выше ?

Edited by Неугомонный

Share this post


Link to post
Share on other sites
2 часа назад, npofopr сказал:

нет. ошибкой не будет. 

еще такой вопрос, для основного дизайна я могу не использовать обертку @media  только для адаптации ? если скажем так телефон планшет обернул в PX а под пк просто как обычно в css Без @media записывать?

Edited by Неугомонный

Share this post


Link to post
Share on other sites

Я не понимаю, о чём вы пишете. 
Делайте, как знаете, думаю, ошибкой не будет. 

Share this post


Link to post
Share on other sites

@media вам нужны для указания стилей при определенных условиях, все остальное (без @media) у вас будет отрабатывать по умолчанию.

Share this post


Link to post
Share on other sites
1 час назад, Switch74 сказал:

@media вам нужны для указания стилей при определенных условиях, все остальное (без @media) у вас будет отрабатывать по умолчанию.

Спасибо, как-то так я и думал ))

Edited by Неугомонный

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Неугомонный
      Всем привет, есть документация под нормы расширения экранов @media screen , где обозначено до скольки PX я могу скажем так воображать себе в голове под что я верстаю телефон/планшет/пк ?
    • By FotGOD
      Народ, помогите разобраться в медиа запросах.
      написал в css файле 2 вида стилей. Для обычного десктоп и для телефона. Но обычный почему-то все равно немного перебивает стили.
      В чем проблема?
      вот html:
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" media="screen and (color)" href="css/style.css"> <title>Document</title> <style> </style> </head> <body> <div class="container"> <header class="header-item"> <div class="header-item"> <h1 class="logo_img">Prechu</h1> </div> <nav class="navbar"> <ul class="menu"> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <article class="bg-phone"> <div class="slayer transform"></div> <div class="phone-info "> <p class="phone_logo"></p> </div> <div class="phone-info"> <h1 class=" text_phone">Lorem ipsum dolor </h1> <p > sit amet consectetur adipisicing elit consectetur.</p> <p class="button"> <i class="fa fa-check button_check" aria-hidden="true"></i>Sign up now</p> </div> <div class="slayer"></div> </article> <article class="col"> <div class="col_item"> <p><img src="img/shape-1.png"></p> <div class="col_item_post"> <h3>Contary to popular</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</p> </div> </div> <div class="col_item"> <p><img src="img/shape-2.png"></p> <div class="col_item_post"> <h3>Contary to popular</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</p> </div> </div> <div class="col_item"> <p><img src="img/shape-3.png"></p> <div class="col_item_post"> <h3>Contary to popular</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</p> </div> </div> </article> <article class="shop-info"> <div class="self-center"> <h1>The Shopping cart</h1> <p ><img src="img/cart.png"> </p> </div> <div class="self-center"> <h2>Some bullet text here</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit commodi libero laborum, magni optio culpa, quia consectetur placeat quas accusamus eius ut aliquid eaque nemo impedit aliquam. Harum libero expedita quia commodi culpa consequatur, pariatur vero, iusto odit ex, sed modi nesciunt nisi debitis voluptate aspernatur animi officia ut. Sit distinctio modi esse natus non totam laboriosam nulla eveniet rerum molestias officia maiores id praesentium minima sint hic ea, unde expedita iusto iure. Ipsum facere dicta praesentium quaerat architecto ut non quae ducimus tempora quo amet unde distinctio earum laudantium id consectetur iusto perferendis, voluptates veniam at. Cumque, vel vitae!</p> </div> </article> <footer class="footer-item"> <p>Copyright © 2012-2013 cssauthor.com</p> <p><img src="img/vlad.png"> </p> </footer> </div> </body> </html> вот css:
       
      * { box-sizing: border-box; } .container { width: 1250px; margin: auto; background: white; } .header-item { background: white; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-around; height: 90px; padding: 0 10px; } .logo_img { background: url(../img/logo.png); background-repeat: no-repeat; width: 50px; height: 50px; text-indent:50px; padding-top: 10px; display: flex; margin-left: 140px; } .navbar{ flex: 1 1 600px; margin-right: 1em; } .menu { list-style: none; display: flex; justify-content: flex-end; margin: 0; } .menu a{ text-decoration: none; color: grey; padding: 40px; display: block; } .menu a:hover{ border-bottom: 2px solid #5094f2; } h1 { margin: 0; } .bg-phone { background: url(../img/bg2.png) no-repeat; width: 1250px; height: 490px; display: flex; flex-flow: row; justify-content: space-between; } .slayer{ background-image: url(../img/right.png); background-repeat: no-repeat; width: 23px; height: 65px; margin: auto; } .transform{ transform: scaleX(-1); } .phone-info { color: white; display: flex; flex-wrap: wrap; flex-direction: column; margin: auto ; } .phone_logo{ background-image: url(../img/phone2.png) ; background-repeat:no-repeat; height: 436px; width: 345px; } .text_phone { margin: 33px 0 0px 0; } .button { background: #5094f2; width: 235px; height: 55px; text-align: center; color: white; font-size: 26px; padding: 12px; } .button_check { border-radius: 50%; background: white; color: #5094f2; margin-right: 30px; } .col { display: flex; justify-content: space-around; text-align: center; } .col_item { display: flex; flex-direction: column; margin: 65px; } .col_item p img{ width: 182px; height: 182; } .col_item_post h3{ color: #5094f2; } .shop-info{ display: flex; justify-content: space-around; color: grey; } .self-center{ display:flex; flex-direction: column; margin: auto 100px; } .self-center p img{ width: 371px; height: 279px; } .self-center h1{ margin: auto; } .footer-item{ font-size: 12px; color:grey; display: flex; justify-content: space-around; align-items: center; } @media (max-width: 550px) { * { box-sizing: border-box; } body { background: grey; font-family: 'Open Sans', sans-serif; } .container { width: 550px; margin: auto; background: white; } .header-item { background: white; display: flex; justify-content: space-between; height: 90px; align-items: center; padding: 0 10px; } .logo_img { background: url(../img/logo.png); background-repeat: no-repeat; width: 50px; height: 50px; text-indent:50px; padding-top: 10px; } .navbar{ background: #5094f2; background: url(../img/menu.png); background-repeat: no-repeat; width: 59px; height: 45px; } .menu { display: none; } .slayer{ display: none; } .transform{ display: none; } h1 { margin: 0; } .bg-phone { background: url(../img/bg.jpg); background-repeat: no-repeat; height: 250px; display: flex; flex-flow: row; } .phone-info { color: white; display: flex; flex-wrap: wrap; justify-content: space-between; margin: auto 20px; } .phone_logo{ background-image: url(../img/phone.png) ; background-repeat:no-repeat; height: 217px; width: 180px; } .text_phone { margin: 33px 0 0px 0; } .button { background: #5094f2; width: 235px; height: 55px; text-align: center; color: white; font-size: 26px; padding: 12px; } .button_check { border-radius: 50%; background: white; color: #5094f2; margin-right: 30px; } .col { display: flex; flex-direction: column; flex-wrap: wrap; } .col_item { display: flex; flex-wrap: nowrap; align-items: center; margin: 30px 40px; border-bottom: 1px solid grey; } .col_item_post { margin: 0 20px; } .shop-info{ display: flex; flex-direction: column; align-items: flex-start; margin: 0 70px; color: grey; } .self-center{ margin: auto; } .footer-item{ font-size: 12px; color:grey; display: flex; justify-content: space-between; align-items: center; margin-left: 5px; } }  
      на первом рисунке макет выглядит, если я оставлю код с медиа на 550px. на втором рисунке, если я добавлю код для десктоп.
    • By Yudin
      Недавно начал учиться верстке. Столкнулся с адаптацией, и тут возникла одна проблема: моя среда разработки как-будто не видит медиа-запросы. Написал примитивный код, чтобы проверить. У друзей код работает, у меня нет. Подскажите с чем это может быть связано. Прикрепляю скрины.
  • Member Statistics

    46,434
    Total Members
    3,128
    Most Online
    Sterben
    Newest Member
    Sterben
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Если свойства нет в спецификации, то откуда его возьмет браузер? Даже если в каком то одном из браузеров введут это свойство то смысла его использовать все-равно не будет, так как в остальных оно работать не будет 🙂   Тогда бардак творился, DHTML, разные объектные модели и все дела. У netscape действительно была такая фича. Хотя не факт что она работала. Вот тут https://www.uv.es/jordi/v3/html/dynhtml/dynamic.pdf можно увидеть что float:center; присутствует в коде, но следом написано что элементы можно выровнять с помощью float слева или справа, или с помощью js по центру. Также в книге указаны допустимые значения для float - left, right, none. Так что это скорее всего была запланированная возможность, которая не получила реализации.
    • Если бы с html и css, все браузеры строго соответствовали спецификациям) Да статье около десятка лет, а то и более. Вот я тоже склоняюсь к тому, что это ошибка. но эта лекция была написана даже с учётом ещё живого на тот момент netscape navigator. Может быть он позволял интерпретировать такую конструкцию. В описании автор указывает, что так блок становится обтекаемым с двух сторон.
    • Может с clear путаете? Или в статье спутали. Наверно, древняя?
      http://htmlbook.ru/css/clear
  • Popular Contributors