Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 16.09.2014, 01:12   #11
reset86
Новичок
Джуниор
 
Регистрация: 16.09.2014
Сообщений: 1
По умолчанию

Все гораздо проще.
В css:
Код HTML:
html{
width: 100%;
height: 100%;
}

body{
width: 100%;
height: 100%;
}

@media screen and (min-width: 1500px) {
html{
overflow-x:hidden;
}
body{
zoom: 115%;
-ms-zoom: 115%;
-webkit-zoom: 115%;
-moz-transform:  scale(1.15);
-moz-transform-origin: center top;
}
}

@media screen and (min-width: 1600px) {
html{
overflow-x:hidden;
}
body{
zoom: 125%;
-ms-zoom: 125%;
-webkit-zoom: 125%;
-moz-transform:  scale(1.25);
-moz-transform-origin: center top;
}
}

@media screen and (min-width: 1800px) {
html{
overflow-x:hidden;
}
body{
zoom: 135%;
-ms-zoom: 135%;
-webkit-zoom: 135%;
-moz-transform:  scale(1.35);
-moz-transform-origin: center top;
}
}
Можно добавить несколько разрешений и нужный zoom.
Для IE доп. стиль:

Код HTML:
@media screen and (min-width: 1500px) {
html{
overflow-x:hidden;
}
body{
-ms-zoom: 114%;
zoom: 114%;
position: absolute;
top: 0px;
left: -7%;
}
}



@media screen and (min-width: 1600px) {
html{
overflow-x:hidden;
}
body{
-ms-zoom: 125%;
zoom: 125%;
position: absolute;
top: 0px;
left: -12%;
}
}



@media screen and (min-width: 1800px) {
html{
overflow-x:hidden;
}
body{
-ms-zoom: 134%;
zoom: 134%;
position: absolute;
top: 0px;
left: -17%;
}
}
Сам придумал, так что при копировании просьба упомянуть.

Последний раз редактировалось reset86; 16.09.2014 в 12:54.
reset86 вне форума Ответить с цитированием
Старый 29.07.2015, 15:15   #12
_dvr
Пользователь
 
Регистрация: 29.07.2015
Сообщений: 15
По умолчанию

reset86, это самое простое и самое гениальное решение) Идеально подходит для промо-сайтов.

Только вот немного доработки требует:
Код HTML:
@media (max-width: 1280px) and (min-width: 1000px) {
html{
overflow-x:hidden;
}
body{
zoom: 70%;
-ms-zoom: 70%;
-webkit-zoom: 70%;
-moz-transform:  scale(0.70);
-moz-transform-origin: center top;
}
}

@media (max-width: 1600px) and (min-width: 1281px) 
{
html{
overflow-x:hidden;
}
body{
zoom: 75%;
-ms-zoom: 75%;
-webkit-zoom: 75%;
-moz-transform:  scale(0.75);
-moz-transform-origin: center top;
}
}
Ну и тд. Ибо разрешение не обязательно больше исходника, оно может быть и меньше. По этому лучше указать жесткие рамки экранов. А в целом, спасибо за идею)
_dvr вне форума Ответить с цитированием
Старый 29.07.2015, 17:54   #13
_dvr
Пользователь
 
Регистрация: 29.07.2015
Сообщений: 15
По умолчанию

Доработанная версия reset86'а. Работает на всех видах мониторов, а главное, исчезла проблема с "отлипанием" браузера, теперь масштабирование работает если браузер не развернут на весь экран.
Код HTML:
html{
width: 100%;
height: 100%;
}

body{
width: 100%;
height: 100%;
}

@media (max-width: 1024px) and (min-width: 100px) {
html{
overflow-x:hidden;
}
body{
zoom: 53%;
-ms-zoom: 53%;
-webkit-zoom: 53%;
-moz-transform:  scale(0.53);
-moz-transform-origin: center top;
}
}

@media (max-width: 1280px) and (min-width: 1025px) {
html{
overflow-x:hidden;
}
body{
zoom: 70%;
-ms-zoom: 70%;
-webkit-zoom: 70%;
-moz-transform:  scale(0.70);
-moz-transform-origin: center top;
}
}

@media (max-width: 1366px) and (min-width: 1281px) 
{
html{
overflow-x:hidden;
}
body{
zoom: 71%;
-ms-zoom: 71%;
-webkit-zoom: 71%;
-moz-transform:  scale(0.71);
-moz-transform-origin: center top;
}
}

@media (max-width: 1600px) and (min-width: 1367px) 
{
html{
overflow-x:hidden;
}
body{
zoom: 83%;
-ms-zoom: 83%;
-webkit-zoom: 83%;
-moz-transform:  scale(0.83);
-moz-transform-origin: center top;
}
}

@media (max-width: 1680px) and (min-width: 1601px) 
{
html{
overflow-x:hidden;
}
body{
zoom: 87%;
-ms-zoom: 87%;
-webkit-zoom: 87%;
-moz-transform:  scale(0.87);
-moz-transform-origin: center top;
}
}

@media (max-width: 1920px) and (min-width: 1681px) 
{
html{
overflow-x:hidden;
}
body{
zoom: 100%;
-ms-zoom: 100%;
-webkit-zoom: 100%;
-moz-transform:  scale(1);
-moz-transform-origin: center top;
}
}
Проверено на сайте-одностраничнике, со скролом экранов. А на обычном сайте так вообще без проблем работать будет.
_dvr вне форума Ответить с цитированием
Старый 29.07.2015, 17:56   #14
_dvr
Пользователь
 
Регистрация: 29.07.2015
Сообщений: 15
По умолчанию

З.Ы.: Масштаб указан при условии, что шаблон изначально был предназначен на ширину 1920рх.
_dvr вне форума Ответить с цитированием
Старый 30.07.2015, 11:02   #15
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Ну была же утоплена тема, что происходит? Это говно же новички могут прочитать и подумать, что так правильно делать
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 12.03.2016, 23:08   #16
Saratov64
 
Регистрация: 10.03.2016
Сообщений: 5
По умолчанию

Цитата:
Сообщение от Naive Посмотреть сообщение
Ну была же утоплена тема, что происходит? Это говно же новички могут прочитать и подумать, что так правильно делать
можете подсказать, как правильно нужно масштабировать новечкам ??? очень надо !!!
Saratov64 вне форума Ответить с цитированием
Старый 12.03.2016, 23:14   #17
Аватар
Старожил
 
Аватар для Аватар
 
Регистрация: 17.11.2010
Сообщений: 19,042
По умолчанию

<оффтоп>
Цитата:
как правильно нужно масштабировать новЕчкам
Овечкам не надо масштабировать
<оффтоп/>
Если бы архитекторы строили здания так, как программисты пишут программы, то первый залетевший дятел разрушил бы цивилизацию
Аватар вне форума Ответить с цитированием
Старый 16.03.2016, 14:01   #18
Saratov64
 
Регистрация: 10.03.2016
Сообщений: 5
По умолчанию

Цитата:
Сообщение от _dvr Посмотреть сообщение
З.Ы.: Масштаб указан при условии, что шаблон изначально был предназначен на ширину 1920рх.
а как переделать под ширину 1600 ??
Saratov64 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Масштаб всей страницы как при ctrl+колесико DJTreeno HTML и CSS 3 26.11.2013 08:21
Скачать сайт целиком vlrnk PHP 17 11.08.2011 10:42
изменение номера страницы в Колонтитулах по всей книге Exel DimonJar Microsoft Office Excel 0 09.02.2010 20:12
узнать запрос POST целиком Bendebej PHP 3 05.02.2010 16:25
Вопрос по копированию папок с (и на) ftp целиком. Slavka8800 Работа с сетью в Delphi 2 20.05.2009 21:27