загадочное поведение @media screen (max/min width/height)

[mushroom]

Дамы и господа, добрый, последний мартовский день!

Столкнулся с следующей траблемой:

в <meta /> HTML index:

<link rel="stylesheet" type="text/css" media="screen and (max-width: 800px) and (max-height: 600px)" href="css/800x600.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width: 1024px) and (max-height: 768px)" href="css/1024x768.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1152px) and (max-height: 864px)" href="css/1152x864.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width: 1280px) and (max-height: 600px)" href="css/1280x600.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1280px) and (min-height: 601px)" href="css/1280x800.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width: 1280px) and (min-height: 801px)" href="css/1280x1024.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1400px) and (max-height: 1050px)" href="css/1400x1050.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1600px) and (max-height: 900px)" href="css/1600x900.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1600px) and (min-height: 901px)" href="css/1600x1200.css" />
и т.д...

сам стиль отдельным файлом.css:

div.data {font-size: 60%;}

сам html:

<div class="data">
Лорем ипсум долор сит амет, патер уника суе ин модо ад квита</div>

Хочу чтобы при увеличении/уменьшении разрешения экрана маштабировался размер шрифта, проблема в том, что срабатывает на всех разрешениях вплоть до максимальных, а вот при 800x600 - ни при каких вариантах max / min / с или без hight - не меняет размер шрифта, а вот, что характерно - если попросить сменить color или border там поставить - пожалуйста, никаких проблем. Я пытался найти откуда он берёт этот размер, скажем с следующих разрешений - найти не смог.

Проконсультируйте пожалуйста, что может быть по вашему мнению, спасибо.

[x-doggy]

В медиа так не пишут — только специальные значения — screen, print, speech и др. Такие записи как у вас необходимо делать в самих CSS как правила.

[mushroom]

В медиа так не пишут

если обратиться к спецификации:

согласно Example XI и XII, ребята пишут:

<link rel="stylesheet" media="aural and (device-aspect-ratio: 16/9)" href="example.css" />

<link rel="stylesheet" media="speech and (min-device-width: 800px)" href="example.css" />

а если бы не писали, с чего бы все браузеры понимали?

[arez]

Вам нужно что то подобное? http://jaredstein.org/resources/stein/js/fonter.html

[x-doggy]

Простите, я просто не знал, что вы на CSS 3 практикуетесь... Тут JS нужен. Вот, в пред. сообщении ссылку дали.

[mushroom]

Вам нужно что то подобное? http://jaredstein.org/resources/stein/js/fonter.html

Да, причем средствами CSS only.

Ведь получилось сделать от 1024х768 до .. до небес короче, а вот в меньшую сторону - нет. Не помогли ни смена font-family, ни смена единиц pt/px/em/%.

Конечно можно сделать скриптом, но если я правильно понимаю, что, если вы зайдете через Opera mini смартфоном - который скрипты не читает, то ничего не получится ведь.

Уверен, что решение где-то близко и очень просто, а вот найти второй день не могу, только неделю CSS юзаю.

Edited March 31, 2011 by mushroom

[SelenIT]

Какой браузер? Бывает, что браузеры в принципе не позволяют уменьшить текст меньше некоего предела "читаемости", иногда этот предел даже можно регулировать настройками (точно помню, что так вели себя какие-то Оперы внутри 9-й ветки, не удивлюсь, если поймаю на подобном Хромого). Попробуйте для минимального разрешения не уменьшать, а увеличить шрифт, если сработает — вероятно, дело в этом...

[mushroom]

Какой браузер? ..... Попробуйте для минимального разрешения не уменьшать, а увеличить шрифт

Браузеры: Safari 5.0.3 / Chrome 9.0.597 / Firefox 4.0 / Opera 11.00 (в IE не пробовал, религия не позволяет).

Media Queries поддерживают все.

На данный момент я пришел к тому, что ни один из браузеров не поддерживает изменение font-size в любую сторону при разрешении 800x600, а такие свойства как цвет, границы, жирность - поддерживают изменение без проблем.

Отсюда вопрос, что, нереально сделать средствами CSS без js маштабируемость шрифта? мне ведь не только 800х600 нужно, хотел до смартфоновских экранов дойти.

[arez]

http://www.bitstampede.com/demos/media-queries/ тут вроде все работает

[mushroom]

вроде все работает

Спасибо!

проблема была действительно в body. Т.е. если только div`ам ставить, он не понимает ниже 1024х768. Всё меняет даже на шрифт для таракашек файрбаг