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

Как сделать чтобы при масштабировании не менялись размеры css

  • автор:

Динамическое масштабирование элементов в CSS

Перед началом статьи хочу сказать, что еще больше полезной и нужной информации вы найдете в нашем Telegram-канале. Подпишитесь, мне будет очень приятно.

Сегодня я поделюсь с вами одним трюком, с которым я столкнулся, работая с CSS. С его помощью можно динамически масштабировать любой HTML-элемент, а заодно устранить многие причины, по которым раньше приходилось писать медиа-запросы.

Прежде всего, я хотел бы отдать должное Майку Ритмюллеру за то, что он изначально придумал эту функцию, и Джеффу Грэму из CSS-Tricks за расширение её функциональности. Я ни в коем случае не ставлю себе в заслугу создание этой функции. Я только хочу пропеть ей хвалу.

Итак, давайте приступим к применению стилей.

В CSS по умолчанию присутствует возможность применять базовые математические операции с помощью функции calc(). Благодаря ей мы можем решить любое простое математическое уравнение и установить полученный результат в качестве свойства CSS, которому требуется численное значение. calc() может применяться везде: от font-size до width и box-shadow… .

В CSS также есть средство измерения, которое вычисляет viewport height и viewport width окна браузера:vh и vw соответственно. 100vh обозначает всю высоту окна браузера, а 100vw — всю ширину. Разница между 100% и 100vh/100vw в том, что 100% устанавливается относительно селектора, внутри которого происходит определение, в то время как значение 100vh/100vw — абсолютное для окна браузера. Это различие важно.

Объяснив этот момент с calc() и 100vh/100vw, пропущу несколько шагов и перейду прямо к формуле.

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

calc([min size]px + ([max size] — [min size]) * ((100vw — [min vw width]px) / ([max vw width] — [min vw width])))

Хорошо… Давайте разбираться.

Во-первых, взглянем на правую часть уравнения:

Нам нужно установить минимальный размер для элемента element, так, чтобы любой element, который мы хотим масштабировать, не был равен 0px. Если мы хотим, чтобы элемент был размером не менее 25px, то можем подставить это значение в первую часть calc():

[min size]px = 25px

Нам важна левая часть:

([max size] — [min size]) * ((100vw — [min vw width]px) / ([max vw width] — [min vw width])))

Разберёмся с ней:

([max size] — [min size])

Здесь мы устанавливаем диапазон через минимальный и максимальный размер, который хочется видеть у элемента, и эта разность будет действовать как множитель. Если нужно, чтобы размер элемента находился в пределах между 25px и 50px, мы можем подставить сюда такие значения:

([max size] — [min size]) = (50 — 25)

Третья часть сложнее всего:

((100vw — [min vw width]px) / ([max vw width] — [min vw width]))

Здесь мы можем задать диапазон через минимальное и максимальное ожидаемое разрешение браузера. На десктопе я всегда, исходя из опыта, беру 1920px (горизонтальное разрешение для 1080p) и 500px (самое маленькое разрешение, до которого возможно масштабировать в Chrome без инструментов разработчика).

Подставим эти значения, и крайняя слева часть уравнения примет следующий вид:

((100vw — [min vw width]px) / ([max vw width] — [min vw width])) = ((100vw — 500px) / (1920–500)))

Это создаёт соотношение, основанное на величине значения свойства viewport (окна просмотра) браузера. Всё, что выходит за пределы диапазона между 500px и 1920px, будет масштабироваться вверх или вниз, но с линейной скоростью. Мы также можем написать медиа-запрос для мобильных устройств или сверхшироких мониторов или записать эти исключения в саму функцию calc().

Давайте начнём упрощать: подставим в функцию некоторые числа и посмотрим на неё в действии. Мы можем заменить 100vw любым разрешением, чтобы увидеть соотношение, которое устанавливаем для размера нашего element:

((1920px — 500px) / (1920–500)) = 1 ((1565px — 500px) / (1920–500)) = 0.75 ((1210px — 500px) / (1920–500)) = 0.5 ((855px — 500px) / (1920–500)) = 0.25 ((500px — 500px) / (1920–500)) = 0

Если затем взять множитель размера элемента, заданный ранее, и умножить на это соотношение, то в итоге получится динамическое значение размера нашего элемента, основанное на размере viewport:

(50–25) * ((1920px — 500px) / (1920–500)) = 25px (50–25) * ((1565px — 500px) / (1920–500)) = 18.75px (50–25) * ((1210px — 500px) / (1920–500)) = 12.5px (50–25) * ((855px — 500px) / (1920–500)) = 6.25px (50–25) * ((500px — 500px) / (1920–500)) = 0px

Наконец, если мы затем добавим минимальный размер элемента к этому множителю, то получим окончательный размер элемента:

25 + (50–25) * ((1920px — 500px) / (1920–500)) = 50px 25 + (50–25) * ((1565px — 500px) / (1920–500)) = 43.75px 25 + (50–25) * ((1210px — 500px) / (1920–500)) = 37.5px 25 + (50–25) * ((855px — 500px) / (1920–500)) = 31.25px 25 + (50–25) * ((500px — 500px) / (1920–500)) = 25px

Итак, если мы хотим, чтобы элемент был равен 25px, когда ширина браузера равна 500px, и 50px, когда ширина браузера равна 1920px, вся функция будет выглядеть следующим образом:

calc(25px + (50–25) * ((100vw — 500px) / (1920–500)))

Запутанно? Ещё как.

Что получаем в итоге:

calc([min size]px + ([max size] — [min size]) * ((100vw — [min vw width]px) / ([max vw width] — [min vw width])))

Теперь перейдём к примерам.

Предварительная настройка

У меня есть очень простая настройка “скелета” HTML с импортом CSS-файла:

Dynamic Scaling Example

Here Be Headline

Here Be Subheader

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.

Here Be Subsubheader

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, eaque ipsa quae ab illo inventore veritatis. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.


body < align-content: center; align-items: center; background: white; display: flex; flex-direction: column; flex-wrap: nowrap; height: 100vh; justify-content: flex-start; margin: 0px; width: 100vw; >h1 < background: lightgrey; >.square < background: darkgreen; >.square h2 < background: green; >.square p < background: lightgreen; >.small_square < background: blue; >.small_square h3 < background: lightblue; >.small_square p < background: cyan; >

В хроме это выглядит так:

Давайте для начала поиграем с шириной width у square и small_square с помощью нашей новой причудливой функции масштабирования.

Допустим, нам нужно, чтобы ширина square была равна максимум 1500px и минимум 250px.

body < align-content: center; align-items: center; background: white; display: flex; flex-direction: column; flex-wrap: nowrap; height: 100vh; justify-content: flex-start; margin: 0px; width: 100vw; >h1 < background: lightgrey; >.square < background: darkgreen; width: calc(250px + (1500 - 250) * ((100vw - 500px) / (1920 - 500))); >.square h2 < background: green; >.square p < background: lightgreen; >.small_square < background: blue; >.small_square h3 < background: lightblue; >.small_square p < background: cyan; >

Также настроим small_square на ширину максимум 1000px и минимум 100px.

Как зафиксировать размеры блока при масштабировании в браузере?

Author24 — интернет-сервис помощи студентам

Скажите пожалуйста мне нужно чтобы в правом угле была стрелка(картинкой) но когда я колёсиком мыши уменьшаю и увеличиваю то мне нужно чтобы стрелка не меняла своего размера. как это можно сделать?

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Аннотативные размеры. Не образмериваются размеры при масштабировании
Доброго времени! Решил поэкспериментировать с аннотативными размерами. Создал файл по видео из.

Анимация глючит в Firefox при масштабировании блока
Всем привет Столкнулся с такой проблемой. Мне надо изменять размеры блока и его содержимого.

Div выходит за пределы родительского блока при масштабировании (+скрин)
Есть внешний div (outer-outer), первый внутренний (outer), второй внутренний (inner) и внутри него.

html + css = камасутра
Регистрация: 31.01.2012
Сообщений: 536
Записей в блоге: 6

ЦитатаСообщение от mirabola Посмотреть сообщение

Скажите пожалуйста мне нужно чтобы в правом угле была стрелка(картинкой) но когда я колёсиком мыши уменьшаю и увеличиваю то мне нужно чтобы стрелка не меняла своего размера. как это можно сделать?

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

Регистрация: 04.08.2012
Сообщений: 18

не действует, стрелка всё равно уменьшается

Добавлено через 19 минут
Kantaria, не получается, может что-то другое?

html + css = камасутра
Регистрация: 31.01.2012
Сообщений: 536
Записей в блоге: 6

ЦитатаСообщение от mirabola Посмотреть сообщение

не действует, стрелка всё равно уменьшается

Добавлено через 19 минут
Kantaria, не получается, может что-то другое?

Пожалуйста скажите название Вашего сайте, либо если он на денвере, либо на другой похожей программе, то дайте скрипт.
Я постараюсь его исправить.

Регистрация: 04.08.2012
Сообщений: 18

вот тут мне нужно чтобы текст при прокрутке мышки так и оставался на месте. или и вовсе просто напросто отменить возможность прокрутки. мне нужно чтобы текст не уменьшался и не увеличивался

work6.rar (128.5 Кб, 54 просмотров)

269 / 261 / 35
Регистрация: 21.02.2012
Сообщений: 1,078

ЦитатаСообщение от mirabola Посмотреть сообщение

Скажите пожалуйста мне нужно чтобы в правом угле была стрелка(картинкой) но когда я колёсиком мыши уменьшаю и увеличиваю то мне нужно чтобы стрелка не меняла своего размера. как это можно сделать?

Как то немного не понятно. Вам стрелка нужна. Даете текст. И что вы колесиком увеличиваете, а что уменьшаете. Или всетаки прокрутку делаете. Потомучто если вы увеличиваете или уменьшаете масштаб, то стрелка ваша в любом случае будет делать тоже самое. Ну а если уж надо ее просто зафиксировать в углу, тогда делайте так.

div id="strelka">сюда можно вашу стрелку/div>
1 2 3 4 5
#strelka{ position:absolut; top:0; left:0; }

Вот как то так))
html + css = камасутра
Регистрация: 31.01.2012
Сообщений: 536
Записей в блоге: 6

ЦитатаСообщение от mirabola Посмотреть сообщение

вот тут мне нужно чтобы текст при прокрутке мышки так и оставался на месте. или и вовсе просто напросто отменить возможность прокрутки. мне нужно чтобы текст не уменьшался и не увеличивался

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
.bg { background-image:url(img/bg.jpg); } .strelka { height:256px; width:256px; float:left; } img { border: 3px solid #00FF00; } .text { color:#000000;[OFF]тут можешь менять цвет текста на твой желаемый[/OFF] }
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
 html xmlns="http://www.w3.org/1999/xhtml"> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> link rel="stylesheet" href="style.css" type="text/css"> title>https://www.cyberforum.ru/members/224801.html/title> /head> body> div class="bg"> img align="top" src="img/element.png" />div class="text"> Думаю я сделал то, что Вы имелли ввиду. p>Но хотел бы сказать, что при увеличении или уменьшении маштаба страницы - 'Ctrl +-' br /> слова в данном тексте, 100% будут уменьшаться или увеличиваться вне зависимости от вашегоbr /> желания.br /> А фотография останется такой какая она есть, тоесть в пиксельном плане, она не будет изменятся и не будет ходить по экрану.br /> Надеюсь я обьяснил внятно.br /> По вопросам пишите br /> E-mail: kantariamo@yandex.ru skype:br /> (домашний) mixail228253br /> (рабочий) mikheili.kantaria/p>/div>/div> /body> /html>
kantaria-work6.rar (174.7 Кб, 37 просмотров)

Как адаптировать размер текста при масштабировании страницы?

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

  • Вопрос задан более трёх лет назад
  • 3492 просмотра

Комментировать

Решения вопроса 0

Ответы на вопрос 3

webinar

Учим yii: https://youtu.be/-WRMlGHLgRg

Можно например использовать vh, задавая и высоту блока и размеры шрифта в vh — можно получить желаемый результат, но все завит от проекта.
Обычно делаю так:
для body и html задаем font-size:2vh;
далее используем rem
добавляем пару медиазапросов и меняем font-size для body и html, например для устройств где высота, больше ширины и т.д. Тогда все резиновое. Для всех блоков тоже можно высоту в rem указывать.

Ответ написан более трёх лет назад

Комментировать

Нравится 1 Комментировать

Как закрепить положение текста, чтобы он не смещался при масштабировании в css?

Author24 — интернет-сервис помощи студентам

Необходимо закрепить шапку и footer при масштабировании страницы в браузере
Добрый день, нашла вашу тему, очень близка мне по тематике. Есть сайт tagansorbent.kz, на котором.

Как сделать фоновую картинку на всю ширину и чтобы при масштабировании она менялась?
Есть сайт, kinozip.com, нужно чтобы при масштабировании фоновая картинка менялась как при значении.

Как сделать так, чтобы при масштабировании объекта, объект расширялся только по одному вектору
Всем привет, я новичок в Unity3D. Столкнулся с проблемой при создании лазера. Цилиндр, который я.

Регистрация: 06.03.2015
Сообщений: 209

font-size: 3vw;

В этом случае текст будет уменьшаться\увеличиваться пропорционально уменьшению\увеличению окна браузера.
Кстати, на будущее лучше выкладывать хотя бы часть кода (связанную с этим блоком), чтобы тебе смогли помочь лучше.

767 / 323 / 157
Регистрация: 26.05.2016
Сообщений: 2,127

Лучший ответ

Сообщение было отмечено Tomas Curda как решение

Решение

ЦитатаСообщение от Tomas Curda Посмотреть сообщение

Как закрепить положение текста, чтобы он не смещался при масштабировании в css?

position: fixed;

87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

CSS. Позиционирование элементов на странице. Некорректное отображение при масштабировании.
Есть два симметрично расположенных объекта в шапке веб-страницы, при масштабировании их положение.

Непропорциональное уменьшение текста при масштабировании
Имеем контейнер с другими контейнерами внутри — в которых текст. При уменьшении масштабирования -.

Как сделать чтобы контролы не меняли положение при измении размера грида?
пожалуйста скажите как сделать чтобы все контролы не ездили вслед за гридом. я изменяю размер.

Как сделать чтобы при открытии формы scroll элемента panel выставлялся в нужное положение?
Как сделать чтобы при открытии WinFoRm scroll элемента panel выставлялся в нужное положение?

Или воспользуйтесь поиском по форуму:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *