Единицы измерения

CSS: как задавать размеры элементов на сайте

Мы тут рассказывали про размеры текста в вёрстке. Но что, если задавать размеры не только текста, но вообще всего? В CSS это делается так же легко, как и в случае с текстом.

Как задаются размеры

У большинства элементов в CSS есть такие параметры для работы с размером:

height, width — высота и ширина;

max-height, max-width — высота и ширина, больше которых элемент не может быть (а меньше — может);

min-height, min-width — минимальная высота и ширина;

margin — размер поля вокруг элемента. Другие элементы не должны влезать в это поле;

padding — отступы внутри элемента, например, если внутри будет написан текст.

Например, нам нужно нарисовать кнопку, внутри которой будет текст. Описание стиля кнопки может быть таким:

.button width:75%;
max-width:600px;
min-width:300px;
padding: 15px 15px 19px 15px;
margin: 20px auto 50px auto;
>

Перевод: кнопка должна занимать от 300 до 600 пикселей в ширину, а в этом диапазоне быть 75% ширины от содержащего ее контейнера; внутри кнопки отступи сверху 15 пикселей, справа 15, снизу 19, слева 15 (по часовой стрелке). Саму кнопку от ближайшего элемента сверху отодвинь на 20 пикселей, слева и справа отодвинь одинаково, чтобы она встала по центру, а снизу отступи еще 50 пикселей до следующего элемента.

Запись в стиле padding: 15px 15px 19px 15px — это короткий способ задать отступы по часовой стрелке. Первое значение — отступ сверху, второе — справа, третье — снизу, четвёртое — слева. Вместо короткой записи можно ещё так:

Но так обычно не пишут, потому что много текста.

Размеры в пикселях — жёстко, но точно

Самый простой способ задать размер элемента — указать его в пикселях. Например, если нам нужна ширина элемента 100 пикселей, то можно написать:

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

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

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

• на экране 5-дюймового телефона с разрешением 1920 на 1080 пикселей баннер шириной 200 пикселей получит размер в 5 сантиметров;
• а на мониторе с диагональю 24 дюйма, но с тем же разрешением 1920 на 1080 те же 200 пикселей будут иметь длину 10 сантиметров.

Чтобы было нагляднее, сделаем тестовую страницу с тремя блоками одинаковой высоты, но с шириной 100 пикселей.

div < /* у блоков будет единая высота */ height: 100px; /* и становиться они будут друг за другом в один ряд */ float: left; >/* у блоков будет одинаковая ширина, но разный цвет фона */ .div1 < width: 100px; background: red; >.div2 < width: 100px; background: green; >.div3

Справедливости ради, браузеры понимают эту проблему, поэтому умеют пересчитывать пиксели так, чтобы сайты не ломались. Например, если у вас есть современный экран с разрешением 288 точек на дюйм и тут же рядом старый экран с разрешением 72 точки на дюйм, то браузер поймёт, что надо пересчитать одни пиксели в другие. Если поставить два сайта рядом на этих экранах, они будут не один в один, но похожи.

В зависимости от размеров экрана — гибко, но надо перепроверять на разных экранах

Чтобы не зависеть от размера пикселей, а масштабировать элементы в зависимости от размера экрана, придумали другие единицы измерения:

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

В этом случае браузер сделает так:

1. Посмотрит, что за единица измерения — vw, значит нужна ширина экрана.
2. Узнает, какой ширины в пикселях окно, в котором открывается эта страница.
3. Поделит её на 100, чтобы узнать размер одного vw в пикселях.
4. Умножит это значиние на 50, чтобы понять размер в пикселях нужного нам элемента.
5. Установит это значение в пикселях при вёрстке.
6. Если в процессе просмотра у браузера поменяется размер экрана — он сам всё пересчитает и отрисует заново.

Используем страницу из предыдущего раздела и немного переделаем её — установим такой размер блоков:

div < /* у блоков будет единая высота */ height: 100px; /* и становиться они будут друг за другом в один ряд */ float: left; >/* задаём ширину относительно ширины экрана */ .div1 < width: 10vw; background: red; >.div2 < width: 20vw; background: green; >.div3

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

Ещё есть vmin и vmax, которые работают так:

• vmin находит минимальное значение из пары (vh, vw);
• а vmax находит максимальное значение из пары (vh, vw).

Это нужно, например, для адаптивной вёрстки, когда вам требуется привязаться к короткой стороне экрана и в зависимости от её размеров построить всю остальную страницу.

Проценты — очень гибко, но всегда нужен родительский элемент

Кажется, что vh и vw — это и есть те самые проценты от ширины экрана и что можно обойтись без обычных процентов. Но на самом деле просто проценты в вёрстке тоже используются, но с одним важным моментом:

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

Родительский элемент — тот, внутри которого находятся другие наши элементы. Например, мы хотим сделать на странице блок шириной 500 пикселей:

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

div < /* у блоков будет единая высота */ height: 100vh; /* и становиться они будут друг за другом в один ряд */ float: left; >/* задаём ширину в процентах относительно родителя */ .div1 < width: 10%; background: red; >.div2 < width: 20%; background: green; >.div3

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

Нужно ли в этом разбираться?

Вообще в современном мире взрослые фронтендеры верстают с помощью css-grid и готовых верстальных фреймворков: в них все размеры стандартизированы и прописаны под капотом, а верстальщики просто говорят «большое», «среднее», «сбоку», «на три четверти», «на всю ширину» и т. д. А уже как это интерпретировать и какие конкретно там размеры — этим занимается фреймворк.

Источник

How to get current screen width in css in Html?

HTML is a markup language used to structure and display content on the web. CSS, or Cascading Style Sheets, is used to control the layout and appearance of elements on a web page.

To get the current screen width in CSS, there are a few different methods that can be used. Here are three examples:

Method 1: Using the width property

For example, if you want to target the body element, you would add the following code to your CSS file:

In this example, we are setting the width of the body element to 100%, which will make it the same width as the screen.

Method 2: Using JavaScript

For example, if you want to target the body element, you would add the following code to your HTML file:

var screenWidth = window.innerWidth;

• Step 3 — Use the getElementById method to target the element you want to set the width of, and the style property to set the width

document.getElementById("myBody").style.width = screenWidth + "px";

This will set the width of the element with the id «myBody» to the current screen width.

Method 3: Using media queries

This media query will apply the CSS inside the curly braces only when the screen width is 600px or less.

@media (max-width: 600px) < body < width: 100%; >> @media (min-width: 601px) and (max-width: 900px) < body < width: 80%; >>

This will set the width of the body element to 100% when the screen width is 600px or less, and 80% when the screen width is between 601px and 900px.

These are just a few examples of how to get the current screen width in CSS. Depending on your specific use case and the tools you are using, there may be other methods that are more appropriate. The important thing is to understand the concepts behind each method, and how to apply them to your specific project.

It is worth noting that the method you choose will depend on what you are trying to achieve and the tools you are using. The width property method is a simple and straight forward method that doesn’t require any additional tools or libraries, and is supported by all modern browsers. However, it has a limitation in that it can only be used to set the width of a single element.

The JavaScript method is a more dynamic and flexible method that can be used to set the width of multiple elements and can be combined with other JavaScript code to create more complex interactions. However, it does require some knowledge of JavaScript and can be more complex to implement.

The media query method is a powerful tool that allows you to create responsive designs that adjust to different screen sizes. This method is also supported by all modern browsers, but it can be complex to implement if you have many different screen sizes to target.

In any case, It’s important to note that these examples are not the only ways to get current screen width in CSS, and there are other ways to achieve this.

For example, you can use libraries such as Bootstrap, Foundation or Bulma, which are pre-made collections of CSS and JavaScript that can help you quickly create responsive designs.

In addition, you can use the CSS variables(custom properties) to store the width and use it across your css.

It’s a good practice to try different ways and choose the one that best fits your project’s requirements.

Conclusion

To summarize, there are several ways to get the current screen width in CSS, including using the width property, JavaScript, and media queries. Each method has its own advantages and limitations, and the choice of which method to use will depend on the specific requirements of your project. The width property method is a simple and straightforward method that is supported by all modern browsers, while the JavaScript method is more flexible and dynamic but requires some knowledge of JavaScript. The media query method is a powerful tool for creating responsive designs that adjust to different screen sizes but can be complex to implement. Additionally, you can use pre-made libraries such as Bootstrap, Foundation, or Bulma, or even CSS variables to store and use the width across your CSS. It’s a good practice to try different approaches and choose the one that best fits your project’s requirements.

Источник