Блог

В настоящее время я изучаю адаптивную концепцию и медиа-запросы, и я не могу понять ее назначение, поскольку мы можем использовать «%» для свойств размера в наших CSS-файлах. На самом деле, например, в моем CSS-файле, если я добавлю свойство стиля «width» следующим образом: «{width: 70%;}», моя веб-страница поместится на любом размере экрана, потому что она займет 70% от него, не учитывая экран? Или, может быть, она будет отображаться слишком маленькими символами, это было бы объяснением того, почему мы используем адаптивные методы ? Похоже, что, возможно, я действительно не понял цели этого. Спасибо за всю вашу помощь.

Вы пользовались новостным сайтом? В устройствах широкого применения, таких как ноутбуки, на экранах есть несколько столбцов. Когда вы используете тот же веб-сайт на мобильном телефоне, один столбец занимает все доступное пространство. Здесь на помощь приходят адаптивный дизайн и медиа-запросы. Вы можете наблюдать тот же эффект почти везде в Интернете.

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

Это не единственное использование медиа-запросов. Вы даже можете указать, как будет выглядеть ваша веб-страница при печати с помощью медиа-запросов. Современные css-фреймворки, такие как Bootstrap, полностью основаны на медиа-запросах

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

Использование % и других модулей может быть сделано в небольшой степени, но они не дают нам той свободы, которую дает нам адаптивный дизайн. Адаптивный дизайн — это нечто большее, чем использование таких модулей.