Media Queries Адаптивный дизайн

@media only screen and (min-width: 600px) { 
 

 
nav ul{ 
 
    transform: translateY(0); 
 
    box-shadow: 0 0 5px rgba(0,0,0, .7); 
 
    transition: all .5s; 
 
    } 
 
nav li{ 
 
    flex: none; 
 
    width: 100%; 
 
    border-bottom: solid 1px #777; 
 
    } 
 
    nav input[type="checkbox"]:checked + ul{ 
 
    transform: translateY(-100%); 
 
    width: 100%; 
 
    background: #999; 
 
    transition: all .5s; 
 
    } 
 
    nav label{display: block;} 
 
    nav input[type="checkbox"]:checked + ul li:nth-child(1){ 
 
    background: #777; 
 
    color: #fff; 
 
    } 
 

 
    #css-toggle-menu{ 
 
    float:right; 
 
    margin: 10px; 
 
    } 
 

 
} 
 

 

 

 

 
/*Desktop*/ 
 

 

 
@media (min-width: 961px) and (max-width: 2000px) { 
 
nav{ 
 

 
float:left; 
 
color:white; 
 

 

 

 
} 
 

 

 

 
nav ul li.active a { 
 
background-color: none; 
 
    color: white; 
 
    text-decoration:none; 
 
} 
 
    a:hover { 
 

 
    color:black; 
 
    background-color:#00E3FF; 
 

 
    } 
 

 

 

 
nav ul li a:visited { 
 
color:black; 
 
text-decoration:none; 
 
} 
 

 
}

<header> 
 
    <nav> 
 
    <input type="checkbox" id="css-toggle-menu" name="css-toggle-menu"> 
 
    <ul class="main"> 
 
      <li><a class="space" href="">Home</a></li> 
 
      <li><a class="space" href="">Programs</a></li> 
 
      <li><a class="space" href="">Assignments</a></li> 
 
      <li><a class="space" href="">Enroll</a></li> 
 
      <li><a class="space" href="">Contact</a></li> 
 

 
    </ul> 
 
    <label for="css-toggle-menu" id="css-toggle-menu"></label> 
 
    </nav> 
 
</header>

с запросами средств массовой информации я думал, что, когда вы устанавливаете их в таблетки и на рабочем столе, что как только вы достигнете тех параметров, что другой макет, как таблетки уедет, когда вы переходили на рабочий стол. Тем не менее, я столкнулся с проблемой, когда, когда я переключаюсь с планшета на рабочий стол, моя панель навигации с мобильных экранов и планшета выводится на мой рабочий стол. На моем рабочем столе мне просто нужен горизонтальный навигатор в верхней части страницы. Я не помещал никаких css, чтобы сделать это в планшетах планшета, поэтому я не знаю, как переопределить это на рабочем столе. Я мог бы действительно помочь с этим в понимании этой проблемы с медиа-запросами. Спасибо!

Вот JsFiddle: https://jsfiddle.net/ma28j5kd/ (я знаю, что скрипка не очень, поэтому я заранее извиняюсь)

HTML:

<header> 
    <nav> 
    <input type="checkbox" id="css-toggle-menu" name="css-toggle-menu"> 
    <ul class="main"> 
      <li><a class="space" href="">Home</a></li> 
      <li><a class="space" href="">Programs</a></li> 
      <li><a class="space" href="">Assignments</a></li> 
      <li><a class="space" href="">Enroll</a></li> 
      <li><a class="space" href="">Contact</a></li> 

    </ul> 
    <label for="css-toggle-menu" id="css-toggle-menu"></label> 
    </nav> 
</header>

CSS:

Таблетка:

@media only screen and (min-width: 600px) { 

nav ul{ 
    transform: translateY(0); 
    box-shadow: 0 0 5px rgba(0,0,0, .7); 
    transition: all .5s; 
    } 
nav li{ 
    flex: none; 
    width: 100%; 
    border-bottom: solid 1px #777; 
    } 
    nav input[type="checkbox"]:checked + ul{ 
    transform: translateY(-100%); 
    width: 100%; 
    background: #999; 
    transition: all .5s; 
    } 
    nav label{display: block;} 
    nav input[type="checkbox"]:checked + ul li:nth-child(1){ 
    background: #777; 
    color: #fff; 
    } 

    #css-toggle-menu{ 
    float:right; 
    margin: 10px; 
    } 

}

Рабочий стол:

@media (min-width: 961px) and (max-width: 2000px) { 
nav{ 

float:left; 
color:white; 



} 



nav ul li.active a { 
background-color: none; 
    color: white; 
    text-decoration:none; 
} 
    a:hover { 

    color:black; 
    background-color:#00E3FF; 

    } 



nav ul li a:visited { 
color:black; 
text-decoration:none; 
} 

}

источник

2016-11-20 Cakers

Вы должны обеспечить [mcve] в самом вопросе. В коде, который вы поставили в вопросе, нет вопросов со средствами массовой информации. Пример тоже не очень минимален: возможно, вы замените его набором правил в каждом мультимедийном запросе, чтобы показать, чего вы пытаетесь достичь. Кроме того, пожалуйста, используйте [встроенные функции для живых демонстраций] (https://stackoverflow.blog/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). – Quentin

Вы неправильно поняли, как работают '@ media'-запросы. '@ media'-queries должны переопределять предыдущие правила, установленные в CSS, - если вы хотите, чтобы они выполняли полный захват, вам нужно предоставить как минимальную ширину, так и максимальную ширину, когда они должны работать, однако это не их намерение. Вам никогда не придется анализировать медиа-запрос на «рабочий стол» - рабочий стол - это ваша начальная точка, то, что вы создаете в первую очередь, тогда вы создаете точки останова для меньших экранов, когда материал на вашем экране начинает перекрываться или слишком мал для хорошей компоновки и удобной работы , Поэтому вам нужно начинать с самого начала. – junkfoodjunkie

-1

То, что я сделал, это вернуть стиль к конкретным запросам в средствах массовой информации.

/* smartphones, iPhone, portrait 480x320 phones */ 
 
@media (min-width:321px) and (max-width: 480px) { 
 
\t .image-display { display: block; } 
 
} 
 

 
/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
 
@media (min-width:481px) and (max-width: 640px) { 
 
\t .image-display { display: none; } 
 
}

источник

2016-11-20 22:45:09 levinjay

Media Queries Адаптивный дизайн

ответ

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