2015-08-25 3 views
3

Когда вы нажимаете Ctrl + - в любом браузере, страница масштабируется до 90% от ее первоначального размера. Мне нужно повторить это и открыть мою веб-страницу на 90% от оригинала по умолчанию, вместо 100%, потому что он выглядит лучше на 90%.Уменьшить веб-страницу до 90%

Я попытался наиболее общий подход, как упоминалось here, here и here, все из которых в основном сказать вам, чтобы добавить этот блок кода в css.

html 
{ 
    zoom: 0.9; /* Old IE only */ 
    -moz-transform: scale(0.9); 
    -webkit-transform: scale(0.9); 
    transform: scale(0.9); 
} 

Проблема с этим состоит в том, что она создает разрыв на левой и правой сторон, а также огромный разрыв на вершине, которая не присутствует, когда вы вручную уменьшить размер, делая ctrl + -.

Это то, что происходит, когда я использую вышеупомянутый код - обратите внимание на пробелы слева, справа, сверху. This is what happens when I use the above mentioned code

В то время как это то, что я хочу, - это то, что происходит, когда вы делаете ctrl + - вручную в вашем браузере. While this is what I want - this is what happens when you do a ctrl -.

Как это сделать?

EDIT: Как сказал Джонатон в комментариях, если моя страница выглядит более привлекательно на 90%, я должен был спроектировать ее таким образом, чтобы не уменьшаться. Проблема заключалась в том, что я использую this default template, и я просто предпочитаю его на 90% за 100%.

+18

Не может быть того, что вы хотите услышать, но если ваша страница «выглядит лучше» на 90%, вы должны проектировать ее таким образом на 100%. Таким образом, вы не должны обезьяны с предпочтениями пользователей. – Jonathan

+0

Ха-ха @ Джонатан, правда. Но теперь, когда я использую этот стандартный шаблон - http://startbootstrap.com/template-overviews/business-casual/, и мне нравится, как он выглядит на 90% более 100%. Любая идея о том, как я должен действовать? –

+1

@RandomlyNamedUser Вам необходимо изменить шаблон. Вы вряд ли сможете получить точное соответствие, пытаясь вручную набросать материал - рендеринг браузера - это то, что изменится при масштабировании вывода. Вам действительно нужно пройти через CSS и сделать его соответствующим 90% – Ian

ответ

1

Вам необходимо использовать/преобразовать в относительные единицы в CSS. Либо%, либо em или rem.

Затем на уровне тела вы можете установить абсолютный размер, который приведет к относительным мерам, пересчитывающим то, что вы хотите.

Если вы используете em или ex исключительно: Вы объявляете размер шрифта: 90% для тела, и вы сможете регулировать его на лету.

Все это относится к единицам, которые вы выбираете, и делает их родственниками, позволяя вам вид свободы, которую вы ищете сейчас.

+0

Будьте предупреждены, что на основе мультимедийных запросов не будет использоваться ваш размер базового размера, а размер базы, заданный пользователем. –

0

Возможно, вы можете компенсировать эти пробелы с помощью margin-top: -50px; для конкретных элементов.