Jump to content

Typical society in the Telegram - This is the backup site feed forum.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.

Типичный Социум
Create New...

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


AndrewPro
 Share

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 сайта  "Типичный социум"

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.

Guest
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.

 Share

  • Current Donation Goals

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

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


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

  • 88 Небольшой соц. опрос по определенным 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

-->