Загрузка адаптивного дизайна (max-width: 800px) в качестве макета по умолчанию

0

Я scree_style.css screen_layout_medium.css сайте, на данный момент я сделал 2 css файла scree_style.css и screen_layout_medium.css я написал css для раздела только для средних экранов, о которых говорится ниже

вот как я связал их

<link rel="stylesheet" type="text/css" href="css/screen_styles.css"  />
<link rel="stylesheet" type="text/css"  @media="only screen and(min-width:501px) and (max-width: 800px)" href="css/screen_layout_medium.css"  />

теперь после того, как я написал css для секции заголовка для screen_layout_medium.css это загружает как макет по умолчанию, даже если мой браузер находится в полной ширине.

css для раздела заголовка для screen_layout_medium.css

header { height:200px; background:url(images/banner_medium.jpg) no-repeat 90% 0px;}
header a.logo { width:115px; height:70px; top:20px;right:20px;background:url(images/logo_medium.png) ; }

И стили для default css

 header  { height:275px ; background:url(images/banner_large.jpg) no-repeat right 0px;}
 header a.logo {width:150px ; height:85px ; top:28px; right:30px; background:url(images/logo_large.png) no-repeat ; }

Причина в том, что не загружая scree_style.css по умолчанию, пожалуйста, помогите мне с этим.

  • 4
    атрибут в вашем теге ссылки должен быть media = "" not @ media = ""
  • 0
    тогда он не загружает CSS для ширины 800 пикселей, если я изменить размер браузера
Теги:
responsive-design
media-queries

1 ответ

2
Лучший ответ

Удалите @ перед media во второй <link> и поставьте пробел между скобками and скобками:

<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width: 800px)" href="css/screen_layout_medium.css"  />

Пример (изменить размер правого столбца, чтобы увидеть, работает ли он): http://jsfiddle.net/4gP4M/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню