Как изменить масштаб html страницы?
Что нужно прописать CSS для того, чтобы уменьшить масштаб HTML страницы? В браузере можно сделать так: нажать последовательно CTRL и — . После этого масштаб страницы уменьшится с сохранением ширины документа. Это важный момент, т. к. решения, которые я находил в интернете уменьшали масштаб и в том числе сужали страницу по ширине. Мне требуется уменьшить масштаб, но ширину страницы сохранить (уменьшить шрифт, например).
Отслеживать
32k 19 19 золотых знаков 79 79 серебряных знаков 105 105 бронзовых знаков
задан 11 июн 2015 в 13:24
user179410 user179410
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Это функция браузера, которая не описана в стандартах. Браузеры вольны реализовывать масштабирование так, как захочется левой пятке архитектора браузера, а также учитывать предпочтения юзера в настройках.
Так как «уникальные» для браузеров фичи признаны Вселенским Злом™, то из жабоскрипта масштабирование недоступно.
Масштабирование может быть реализовано самим сайтом с помощью возможностей CSS.
Правильный способ
Использовать относительные размеры для шрифтов ( % , em и др.), в корне страницы менять размер базового шрифта.
Для остальных элементов можно добавить дополнительные стили и опять же в зависимости от класса корня менять размер. Для картинок будет разумно округлять масштаб до «круглых» чисел вроде 50%, 33% и т. п.
Жёсткий способ
Использовать стандартное свойство CSS transform . Можно добавить в корень документа стиль transform: scale(N%) , тогда отмасштабируется вся страница. Учтите, что за качество и производительность никто не отвечает.
Чтобы сохранить ширину страницы, её можно менять в соответствии с масштабом (помножить на обратное число, собственно).
Костыльный способ
Ипользовать нестандартное свойство CSS zoom . Опять же в корень можно добавить zoom: N% . Поддержка не гарантируется, работает не во всех браузерах.
Пример правильного способа:
$(function() < var fontSize = 12; var imgScales = < small: 0.25, normal: 0.50, large: 1.00 >function setFontSize(fontSize) < var zoomLevel = 'normal'; if (fontSize = 15) zoomLevel = 'large'; var imgScale = imgScales[zoomLevel]; $('#root').css('font-size', fontSize + 'pt'); $('#root').removeClass('zoom-small zoom-normal zoom-large'); $('#root').addClass('zoom-' + zoomLevel); $('img.scalable').each(function() < $(this).css('width', this.naturalWidth * imgScale); $(this).css('height', this.naturalHeight * imgScale); >); > $('#plus').on('click', function() < setFontSize(++fontSize); >); $('#minus').on('click', function() < setFontSize(--fontSize); >); >);#root < font: 12pt sans-serif; width: 500px; background: lightskyblue; >p < font-size: 1em; >h1
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
font-size
Определяет размер шрифта элемента. Размер может быть установлен несколькими способами. Набор констант ( xx-small , x-small , small , medium , large , x-large , xx-large ) задает размер, который называется абсолютным. По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера и операционной системы.
Другой набор констант ( larger , smaller ) устанавливает относительные размеры шрифта. Поскольку размер унаследован от родительского элемента, эти относительные размеры применяются к родительскому элементу, чтобы определить размер шрифта текущего элемента.
В конечном итоге, размер шрифта сильно зависит от значения свойства font-size у родителя элемента.
Сам размер шрифта определяется как высота от базовой линии до верхней границы кегельной площадки, как показано на рис. 1.
Рис. 1. Размер шрифта
Синтаксис
font-size: абсолютный размер | относительный размер | значение | проценты | inherit
Значения
Для задания абсолютного размера используются следующие значения: xx-small , x-small , small , medium , large , x-large , xx-large . Их соответствие с размером шрифта в HTML приведено в табл. 1.
| CSS | xx-small | x-small | small | medium | large | x-large | xx-large |
|---|---|---|---|---|---|---|---|
| HTML | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
Относительный размер шрифта задается значениями larger и smaller .
Также разрешается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), пункты ( pt ), пикселы ( px ), проценты ( % ) и др. За 100% берется размер шрифта родительского элемента. Отрицательные значения не допускаются.
inherit Наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
font-size Duis te feugifacilisi
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Результат данного примера показан на рис. 1.
Рис. 2. Применение свойства font-size
Объектная модель
[window.]document.getElementById(» elementID «).style.fontSize
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
font — size
Значение в em высчитывается относительно текущего шрифта. Поэтому дочерняя строка в 1.5 раза больше, чем родительская.
Размер этого текста в 1.5 раза больше, чем стандартный размер вашего браузера, а этот текст в 1.5 раза больше, чем в родительском контейнере.div class="parent"> Размер этого текста в 1.5 раза больше, чем стандартный размер вашего браузера, span class="child"> а этот текст в 1.5 раза больше, чем в родительском контейнере. span> div>
.parent font-size: 1.5em;> .child font-size: 1.5em;>.parent font-size: 1.5em; > .child font-size: 1.5em; >
А вот как сочетается значение em , когда родительский элемент задан в процентах.
Очень часто можно встретить ситуацию, когда размер шрифта у html равен 62 . 5 % . Это магическое число появилось не просто так. Всё дело в том, что стандартный размер шрифта в браузере — 16 пикселей. А 62.5% от него равно 10 пикселям. Что крайне удобно для расчётов.
Здесь основной текст такой же, как в стандартных настройках браузера, а эта фраза в 1.6 раз больше, чем основной текст.div> span> Здесь основной текст такой же, как в стандартных настройках браузера, span>а эта фраза в 1.6 раз больше, чем основной текстspan>. span> div>
Теперь 1 em будет равен 10 px (62.5% от 16), а размер шрифта будет 10 * 1.6 = 16px:
html font-size: 62.5%;> span font-size: 1.6em;>html font-size: 62.5%; > span font-size: 1.6em; >
Пример, где размер шрифта не зависит от родительского элемента, потому что мы задали его в rem .
Теперь один контейнер находится внутри другого, но относительный размер текста больше не зависит от родительского элемента.span> Теперь один контейнер находится span>внутри другогоspan>, но относительный размер текста больше не зависит от родительского элемента. span>
Размер 1em равен 16px, как в стандартных настройках браузера:
html font-size: 100%;> span font-size: 2rem;>html font-size: 100%; > span font-size: 2rem; >
И ещё три примера, как можно задать размер шрифта.
Текст параграфа будет очень большим:
p font-size: xx-large;>p font-size: xx-large; >
Заголовок будет в 2.5 раза больше, чем текст вокруг него:
h1 font-size: 250%;>h1 font-size: 250%; >
Размер текста внутри тега будет равен 16px, независимо ни от чего:
span font-size: 16px;>span font-size: 16px; >
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Если не задать никакое значение font — size , то браузер использует размер по умолчанию. Обычно это 16px .
�� У font — size не бывает отрицательных значений.
�� Размер шрифта наследуется.
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� Для использования относительных единиц измерения — em , rem или проценты — нужно чётко понимать, от чего будет отсчитываться 1 единица. На начальном этапе я бы не советовала использовать эти единицы для размера шрифта. Велика вероятность, что вы запутаетесь в вычислениях.
�� Если в вёрстке используются строчно-блочные ( inline — block ) элементы, то не забывай задавать родителю свойство font — size со значением 0 .
Между строчно-блочными ( inline — block ) элементами, как и между словами в тексте, есть небольшие отступы — пробелы. Устанавливайте размер шрифта в ноль чтобы эти отступы не влияли на положение вложенных элементов и можно было получить более ожидаемый результат от задания внешних отступов.
�� Единицы измерения pt не используются в вёрстке веба. Эта единица измерения возникла ещё во времена вёрстки печатной продукции, например, газет.
Сперва она перекочевала в Фотошоп, к дизайнерам. Многие из них также перешли из печатки в веб. По инерции эта единица просочилась и в CSS, но свою логическую составляющую она потеряла. Совершенно не понятно что принимать за пункт в вебе. Гораздо логичнее оперировать пикселями — точками на экране.
Как увеличить шрифт в css
Размером шрифта можно управлять с помощью свойства font-size .
/* Размер основного шрифта страницы*/ body font-size: 1.3rem; > /* Размер шрифта заголовка первого уровня*/ h1 font-size: 2rem; > Здесь для определения размера используется единица rem. Если значение rem для не задано, то оно принимается за 1rem, и все остальные размеры задаются относительно него. Таким образом, например, 1.2rem увеличит размер шрифта на 20%.