Jump to content

Typical society in the Telegram - This is the backup site feed losper.net

Mass debate, problem-solving, assistance, support and a wonderful community ...

You can upload files in the Telegram channel and share link on the forum "Typical society."

This method helps to avoid broken links in the future and the loss of files on the site!

Important events on the site, you'll also find in our Telegram channel ...

Share your experiences with others, help, be responsive, friendly and communicate with other users.

Как использовать vw и vh для Заголовка в адаптивной верстке


Recommended Posts

  • Admin

1 x4A1kpLEJs8GFA4gXC3eJg.png

Если у нас есть большой заголовок (или заголовок с блоком) и нам нужно, чтобы этот очень большой заголовок с размером 60px, смотрелся на всех устройствах одинаково?

Высчитываем по формуле vw:

vw 1 сотая ширины.
Для шрифта в 60px мы должны узнать этот размер в vw.
Для этого, мы должны взять 12px это размер шрифта по умолчанию, умножить его на число, что бы получилось 60, а в нашем случае это число будет 5 и получаем 5vw (font-size: 5vw; = font-size: 60px;)

Высчитываем по формуле vh:
vh 1 сотая высоты.
Если наш текст с блоком...
Берем Ширину экрана, делим ширину экрана на 100 и умножаем на 5 (где 5 это число нашего vw — шрифта), получаем высчитанный розмер (шрифта), высоты.

Все эти действия, помогут нам закрыть все лишние медиа (@media) запросы.

Telegram сайта  "Типичный социум"

Do not be indifferent. Support for motivation to continue on to engage in this further! Thanks


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


Обжалование или подача апелляции на снятие Бана в группе "Типичный Социум IT!
Заявки и обжалование отправлять в Телеграм bot @ModeratorTS_Bot

  • Donation

  • 110 Небольшой соц. опрос по определенным языкам программирования...

    1. 1. Выберите язык программирования из списка, который вам больше всего нравится или на котором вы программируете?

      • PHP 7.x
      • JavaScript
      • Python 3.x
      • C#
      • Node.js
      • Dart \ Flutter
      • ASP.Net Core
      • .Net Core
      • C++
      • TypeScript
      • Ruby
      • Go
      • Kotlin

  • 107 Небольшой соц. опрос по определенным IDE (TOP 15 IDE)

    1. 1. Выберите из списка среду разработки на которой вы пишите код

      • Visual Studio Community
      • VS Code
      • WebStorm
      • PhpStorm
      • NetBeans
      • Notepad++
      • Eclipse
      • IntelliJ IDEA
      • PyCharm
      • Qt
      • Android Studio
      • Другие редакторы от JetBrains
      • SublimeText
      • Vim
      • Atom

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.Privacy Policy

Search In
  • More options...
Find results that contain...
Find results in...

Write what you are looking for and press enter or click the search icon to begin your search