Как задать размер страницы в css

Как задать масштаб странице

Следующий код масштабирует страницу до 1024px = 100% при условии, что доступная ширина меньше 1024. Если больше, то страница показывается в единичном масштабе.

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

~function () < var $window = $(window), $body = $("body"); var ie = document.documentMode; function updateSizes() < var width = $window.width(), scale = Math.min(width / 1024, 1); var style = $body[0].style; style.msZoom = ie === 8 || ie === 9 ? scale : 1; style.zoom = ie === 10 || ie === 11 ? 1 : scale; style.mozTransform = "scale(" + scale + ")"; style.oTransform = "scale(" + scale + ")"; style.transform = "scale(" + scale + ")"; >$window.resize(updateSizes); updateSizes(); >();

html < width: 100%; overflow: hidden; >body < margin: 0; transform-origin: top left; >@supports (transform: scale(1)) < body < -ms-zoom: 1 !important; zoom: 1 !important; >> div < width: 1024px; height: 128px; background: url(//i.stack.imgur.com/eMSCb.png) repeat-x; background: repeating-linear-gradient(to right, blue, red 256px); >

Теоретически (не проверял) должно работать так:

• IE 5.5 — 7 zoom
• IE 8 — 9 -ms-zoom
• IE 10 — 11 transform & ie
• Edge 12+ transform & @supports
• Opera 11.5 — 12.0 -o-transform
• Opera 12.1 transform
• Firefox 3.5 — 15 -moz-transform
• Firefox 16+ transform
• Firefox 22+ transform (есть @supports , но zoom всё равно нет)
• Safari 4 — 8 zoom
• Safari 9+ transform & @supports (появились одновременно — повезло)
• Chrome 4 — 27 zoom
• Chrome 28 — 35 zoom (есть @supports , но ещё нет transform )
• Chrome 36+ transform & @supports

Если добавить -webkit-transform , то появится поддержка Safari 3.1 — 3.2, но многое сломается, так что лучше не надо.

Т. о. для современных браузеров результат тем или иным способом сводится к использованию transform и уничтожению zoom . Во всех совсем современных и развивающися (Edge, Firefox, Safari, Chrome) в итоге уже получилось transform & @supports , что соответствует стандарту, а следовательно, скорее всего не сломается в будущем.

Проверено в (пожалуйста, дополняйте список, если проверяете в другом браузере):

• IE 11
• Edge 15
• Opera 12.18
• Firefox 50
• Safari 5 (Win)
• Safari 10 (Mac)
• Chrome 54

Детали по поддержке браузерами:

• http://caniuse.com/#feat=css-zoom
• http://caniuse.com/#feat=css-featurequeries (это про @supports )
• http://caniuse.com/#feat=transforms2d

PS: А вообще, правильнее было сделать нормальный responsive-дизайн.

CSS: Базовые стили тегов

По умолчанию, все HTML-теги имеют своё стандартное оформление. Это оформление задают браузеры, причём каждый браузер может задать свой стиль. Из-за этого одна и та же вёрстка может выводиться по разному, в зависимости от браузера, операционной системы и системных настроек.

Например, заголовок первого уровня в браузерах имеет размер 2em , что обозначает в два раза больше размера шрифта в блоке. Это значение не фиксировано — оно может меняться из-за настроек системы, или если разработчики браузера решили сделать его немного другим.

Используя тег мы научились менять стили для всех элементов сразу, например:

Но такой вариант удобен лишь для установки первоначальных/основных значений для нашей веб-страницы. В её разных частях могут понадобиться разные стили оформления заголовков одного уровня. Мы научимся решать эту задачу с помощью селекторов CSS и атрибутов HTML в следующих уроках. Главное помнить, что почти все элементы имееют стили по умолчанию, что может быть как пользой, так и неудобством при разработке страницы

Задание

Добавьте в редактор заголовок первого уровня и установите размер шрифта в 20 пикселей. Стили запишите в теге .

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет ��

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя ��

Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно ��

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

Как увеличить размер шрифта?

Для увеличения или уменьшения шрифта применяется стилевое свойство font-size, значение которого определяет размер текста. В качестве единиц можно применять rem; так, 1rem соответствует размеру шрифта всей веб-страницы. Таким образом, чтобы увеличить шрифт, указываем значение больше 1, например, 1.2rem, что увеличит размер текста на 20%. Ниже показано как задать размер основного текста всей веб-страницы через CSS (пример 1).

Пример 1. Использование font-size

Аналогично определяется размер шрифта и других элементов, в частности, заголовков. В примере 2 показано как задать размер заголовка .

Пример 2. Размер заголовка

Заголовок

Пример текста

См. также

• font-size
• Единицы размера в CSS
• Размер текста
• Свойства шрифта в CSS

Как задавать размеры шрифта в вёрстке

Продолжаем говорить о размерах в CSS. Мы уже разбирали пиксели, проценты и зависимость от окна браузера, а теперь посмотрим на особенности размеров шрифтов.

Коротко о том, что уже было: пиксели и высота экрана

Самый простой способ задать размер чего-нибудь на веб-странице — указать его в пикселях:

Также можно указать размер в виде пропорций от ширины или высоты браузера. Например, чтобы размер шрифта был 1/10 от высоты окна. Необычно, но может быть интересно:

Проценты и шрифты

Ещё есть проценты, но с ними сложнее: нужно знать размеры родительского элемента, чтобы процентам было от чего отталкиваться. Например, если мы просто напишем font-size: 50%;, то браузер сделает так:

1. Поищет в стилях, есть ли где-то точное указание размеров шрифта для этого или родительского элемента.
2. Если есть — возьмёт 50 процентов от них.
3. Если нет — возьмёт стандартный размер шрифта для этого элемента из своих настроек и уже от них посчитает 50%.

     /*задаём общие параметры для всей страницы*/ body 
Привет, это журнал «Код»!
  

Теперь добавим отдельный стиль для абзаца и в нём укажем, что размер текста должен быть 50%:

А вот что будет, если мы удалим размер в пикселях из стиля body<> и дадим браузеру самому разобраться с размером:

Так как мы не задали точные размеры, то браузер взял какой-то свой размер абзаца по умолчанию и посчитал 50% от этого стандартного размера. Получилось мелко и нечитаемо.

Em — относительный размер шрифта

Если неохота считать проценты или нужно, чтобы шрифт точно был в 2 раза больше или в 0,7 раз меньше обычного шрифта, используют em. Это то же самое, что проценты: font-size: 100% — это как font-size:1em .

     /*задаём общие параметры для всей страницы*/ body  
Привет, это журнал «Код»!
 
А это — статья про размеры шрифтов
 
И здесь всё постоянно меняется
  

Так же, как и с процентами, em — это относительные значения. Всё зависит от родительского элемента. В этом примере родительским элементом был общий размер для всей страницы, заданный в body<>. Но что, если мы вложим с помощью блоков абзацы друг в друга?

     /*задаём общие параметры для всей страницы*/ body  
 
Привет, это журнал «Код»!
  
 
Делаем шрифт побольше предыдущего
  
 
А этот — поменьше своего предыдущего
 
 
 
  

Размеры в эмах удобно использовать для вёрстки разных иерархических элементов, где каждый вложенный уровень должен по размеру быть меньше предыдущего. Чтобы каждый раз не считать размеры вручную, можно использовать одно и то же значение в em — а браузер сам уменьшит шрифт пропорционально вложенности.

�� Em считается относительно текущего размера шрифта и пересчитывается при изменении размеров родительского шрифта. Это можно использовать для адаптивной вёрстки.

Кроме em есть ещё rem — она считает размеры шрифта только относительно тех, которые заданы в блоке стилей html<>. Если этого блока нет или в нём ничего не написано — rem посчитает размер шрифта от стандартного значения в браузере. Отличие от em в том, что даже при вложенности друг в друга все значения будут считаться не относительно предыдущего блока, а относительно значения в html<>.

Межстрочный интервал

Помимо размера самих букв у текста есть параметр межстрочного интервала — это расстояние между нижними краями текста на каждой строке.

Стандартное значение межстрочного интервала — normal. Это значит, что браузер спросит у шрифта, какое межстрочное расстояние тот предпочитает. Вам ни о чём думать не нужно:

Интересно, что вся строка выше в целом бессмысленна, потому что она говорит браузеру «у текста абзацев должен быть стандартный размер и стандартный межстрочный интервал». На что браузер справедливо скажет: «Да я и так бы их сделал стандартными, не учи меня жить».

Иногда мы используем нестандартные шрифты, в которых браузер не знает стандартного межстрочного интервала. Или он его знает, но нас этот интервал не устраивает. Тогда интервал можно задать во всех тех же единицах: пикселях, емах, процентах.

Как адаптировать размер текста под размер экрана

Допустим, дизайнер поручил нам сделать так, чтобы заголовки на странице меняли размер в зависимости от ширины экрана. Если экран широкий, то и заголовок должен быть большим. Если экран узкий — пусть будет компактным.

Самый прямолинейный способ это сделать — задать размер в единицах vw. Например, 1vw — это 1% ширины экрана; 10vw — 10% ширины экрана. Если экран шириной 1000 пикселей, то 20vw — это 200 пикселей.

Звучит неплохо, но может плохо выглядеть: смартфоны обычно очень узкие, а экраны компьютеров очень широкие, и разница в размере шрифта будет в 5–6 раз. И если, например, основной текст фиксированного размера, а заголовки должны менять размер, то на широких экранах заголовки будут мельче, чем основной текст.

      `   
Привет, это журнал «Код»!
 
Этот текст зависит от ширины экрана. Чем больше ширина — тем больше размер этого текста
  

Второй вариант — использовать медиазапросы. Мы расскажем о них подробно в другой статье, а пока кратко: это когда мы можем накатывать разные стили на документ в зависимости от того, как этот документ отображается. Можно сказать: «Если экран шире 500 пикселей, используй вот такой размер шрифта; если шире 1000 пикселей — сякой; а если это не веб-страница, а версия для печати — вообще используй другой шрифт и размер».

Тогда мы можем просто задать размеры стандартных экранов смартфонов и прописать нужные размеры текста для каждого, и всё будет выглядеть идеально.

@media screen and (min-width: 601px) < h2 > @media screen and (max-width: 600px) < h2 >