HTML viewports vs media query - PullRequest
Новая
       7

HTML viewports vs media query

0 голосов
/ 15 июня 2019

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

В некоторых промежуточных случаях я использую оба, просто потому, что это проще. Следующая ссылка является примером, который я построил: https://codepen.io/santimirandarp/pen/jjboKN файл css выглядит так: 

body{
  background-color:lightblue;
  text-align:center;}
main{

font-size:calc(10px + 0.5vw);
 margin: auto;
width: 80vw;
}
#title{
  color:magenta;
}
span{
color:hsl(110,100%,55%);
font-size:calc(20px + 3vw) ;
}
#description{}
p{font-size:calc(13px + 0.5vw) ;
text-align:justify;
line-height:calc(20px + 0.5vw);
margin-bottom:2vw;
}

#linend{
  color:blue;
  text-align:center;
  font-family:Garamond;
  font-size:1.5em;
  background-color:yellow;
}

@media only screen and (min-width: 1000px) { @media only screen and (min-width: 1000px) { 
  main{width:45%;}

  p {font-size:100%;
  }
  p strong{font-size:100%;
  color:brown;}

  }

Вопрос

Правильный ли этот подход? Когда использовать единицы просмотра окна против медиа-запросов? Можете ли вы объяснить правильный подход?

1 Ответ

1 голос
/ 15 июня 2019

По состоянию на MDN:

Медиа-запросы полезны, когда вы хотите изменить свой сайт или приложение в зависимости от общего типа устройства (например, печать против экрана)

Для сравнения, целью области просмотра является адаптация размеров экрана, таких как ширина и высота.

Имеется в виду, что нет 'use viewport или media query'. С помощью медиазапросов вы можете различать типы медиа, а не только их размеры. Например, если у вас есть медиа print, вы можете удалить цвета. Дополнительно (не альтернативно) вы можете использовать единицы просмотра для указания размеров.

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

...