CSS Media Запросы как размеры браузера? - PullRequest
Новая
       4

CSS Media Запросы как размеры браузера?

4 голосов
/ 04 марта 2011

Я думаю, что медиа-запросы CSS не работают, поскольку пользователь изменяет размеры браузера?Пользователю придется обновить страницу, чтобы медиа-запрос вступил в силу?Как я могу обновить медиа-запрос, возможно, с помощью JS?В настоящее время я использую JS, чтобы определить размер окна при изменении размера. add addClass()

1 Ответ

16 голосов
/ 04 марта 2011

Вам не нужен JS для MediaQueries, чтобы работать или определять размер экрана / порт просмотра.Кроме того, вам не нужно обновлять браузер, чтобы получить результат MediaQuery.

Ознакомьтесь с этой статьей для получения подробной информации и инструкции по использованию MediaQueries:

http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

Вероятно, самый простой способ добиться этого - предоставить отдельные MediaQueries в заголовке вашего HTML: 

<link rel="stylesheet" type="text/css" media="only screen and (min-width: 480px)" href="/css/small-device.css" />

Вы также можете использовать MediaQueries в своей основной таблице стилей: 

@media screen and (max-width: 350px) {  /* -- If the view port is less than 350px wide (portrait on phone) then display the following styles -- */
   .content{
       padding:6px;
   }
}

Я бы настоятельно рекомендовал уделить время прочтению вышеприведенной статьи, чтобы лучше понять MediaQueries.Как только вы поймете, как лучше всего их использовать, вы найдете их бесценными!

...