Използване на медийни заявки

Опитвам се да създам медийна заявка, която показва изображение, ако разделителната способност на екрана ви е между определен размер и не мога да я накарам да работи. Аз използвам следното:

<style>
@meida (min-width: 701px) and (max-width: 5000px) {
<div="sixteen columns" align="center">
<div class="home-boxes"><img src="http://www.ursovain.com/wp-content/uploads/boxes-3.jpg">   
</div>
}
</style>

css media
person Chris English    schedule 03.09.2014    source източник
comment
Добре дошли! @meida трябва да бъде @media. И не трябва да вграждате html елементи в стил, въпреки че те не са наистина html елементи, както сте ги написали. По принцип мисля, че трябва да прочетете документация или урок за HTML и CSS като цяло, защото тази част от кода е доста объркана.   -  person GolezTrol    schedule 03.09.2014
comment
Търсите Javascript, а не CSS.   -  person Mike    schedule 03.09.2014
comment
Решение на JavaScript би използвало Matchmedia, developer.mozilla.org/ en-US/docs/Web/API/Window.matchMedia   -  person Pablo Rincon    schedule 03.09.2014

Отговори (1)


arrow_upward
2
arrow_downward

Трябва да го посочите, както в моя пример по-долу. HTML и CSS са отделни.

<style>
@media (max-width: 600px) {
  .home-boxes {
    display: none;
  }
}
</style>

HTML

<div class="home-boxes">
    <img src="http://www.ursovain.com/wp-content/uploads/boxes-3.jpg" />
</div>

В моя пример по-горе медийната заявка ще приложи CSS в нея, когато условието на екрана е изпълнено. В този случай CSS, който ще бъде приложен, е display: none към всички елементи с клас home-boxes

person Kevin Lynch    schedule 03.09.2014