Как сделать scale для определённого размера экрана?

[drkrol]

Здравствуйте. Посмотрите пожалуйста на мои стили:

<link media="screen" href="{THEME}/style/styles.css" type="text/css" rel="stylesheet" /> <!-- Все стили и стили при размере экрана более 1340px  -->
<link rel="stylesheet" media="screen and (min-width: 690px) and (max-width: 999px)" href="{THEME}/style/adap-phone-tablet.css" />
<link rel="stylesheet" media="screen and (min-width: 1000px) and (max-width: 1309px)" href="{THEME}/style/adap-pc-tablet.css" />

Почитал я документацию по viewport, но так и не разобрался. Как сделать так, чтобы при размерах от 320px до 689px сайт просто зуммировал стиль adap-phone-tablet.css ? Я попытался в начале отдельно написать стиль для размеров 320 и 689, но ничего годного не вышло, поэтому лучше, чтобы на 320 пикселях сайт выглядел так же, как и на 690, только был зуммирован. Подскажите, как такое сделать?

 

[zALEHANz]

Что вы хотите зуммировать? Если текст, то используйте rem

 

[drkrol]

Что вы хотите зуммировать? Если текст, то используйте rem

нет, хочу, чтобы viewport scale зуммировал на размере от 320 до 689 стили adap-phone-tablet.css

 

[zALEHANz]

А! Так вам нужен масштаб? Так ставьте различные значения viewport scale от 0.1 до 10 и найдите наиболее удобоваримый.

 

[Alexandeer Belov]

Используйте конструкцию в CSS:

@media screen and (max-width: 800px) {
.class {transform:scale(1,1); }
}

@media screen and (max-width: 1200px) {
.class {transform:scale(1.5,1.5); }
}

Настройте правила с помощью: max-width, min-width, max-height, min-height

Так создается адаптивная верстка

 

[mervinking]

Зачем зумировать? В обычной разработке делают 1 масштаб и растягивают-сужают, это и есть адаптивный сайт

а так чтобы увеличить попробуйте к html применить стиль

-moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);

значение 2 подберете методом тыка..