️
Контекст
Почему не библиотеки?
Хотя такие библиотеки, как Bootstrap и Reactstrap, отлично подходят для сокращения времени написания CSS, они приходят со своими собственными компромиссами отсутствия творческой свободы. Становится трудно разработать полностью настраиваемое веб-приложение с желаемой тематикой с помощью этих библиотек, которые влекут за собой ряд ограничений в процессе проектирования. Таким образом, чистый CSS-это единственный способ сделать ваше веб-приложение таким, каким вы хотите его видеть, вплоть до мельчайших деталей.
Первое правило: Старайтесь не смешивать их!
Это обычное дело, что мы начинаем кодировать некоторые части интерфейса в Bootstrap, а затем для некоторых частей мы используем чистый CSS, и в конце концов, когда вы пытаетесь что-то изменить, все это становится беспорядком. Иногда CSS работает не так, как вы ожидали, а иногда Bootstrap ведет себя странно, что делает процесс отладки и в целом делает приложение отзывчивым. Следовательно, даже если вы используете обе библиотеки и CSS, старайтесь использовать их таким образом, чтобы они не сталкивались друг с другом.
Начните с менталитета
Важно иметь в виду, что приложение не будет работать в вашей системе вечно, в течение большей части времени оно будет работать на sceen намного меньше, чем ваш монитор, и вы должны соответствующим образом кодировать интерфейс.
Забудьте о пикселях
Это распространено среди новичков, чтобы использовать параметр измерения " px " при написании их CSS. Пиксели-это фиксированные величины. Он представляет собой абсолютную величину, точно так же, как метр или дюйм. Это исправлено, dn, поэтому вы должны избегать его. То, что может выглядеть как небольшое расстояние на вашем гигантском мониторе, может оказаться огромным расстоянием на чьем-то iPhone SE, потому что " px " остается фиксированным, даже если размер экрана меняется. И именно поэтому вы должны использовать относительные единицы измерения. Относительные единицы измерения изменяют свое значение с различными размерами экрана и разрешениями, что делает процесс создания адаптивных приложений более плавным.
Иди Родственник
CSS имеет несколько относительных единиц измерения. Наиболее полезными из них являются : rem, em, vh, vw и проценты. Вы будете использовать их много для того, чтобы сделать ваш CSS отзывчивым.
em относится к размеру шрифта текущего родителя.
rem - это корневой em, и, как следует из названия, он относится к размеру шрифта корневого элемента. Это зависит от размера шрифта по умолчанию, установленного в веб-браузере пользователя. В chrome по умолчанию установлено значение 16px.
vh расшифровывается как view-высота окна браузера
vw расшифровывается как view - ширина окна браузера
процентное отношение к родительскому элементу
Ныряйте в контейнеры
Если ключевые части пользовательского интерфейса разделены на небольшие фрагменты контейнеров, это делает процесс намного проще и менее запутанным. Поэтому всегда упаковывайте ключевые компоненты в отдельные родительские контейнеры. Например,
Исправление шрифтов
В случае шрифтов используйте em или rem. Это позволит установить размер шрифта в контексте размера шрифта, используемого в Родительском контейнере, таким образом поддерживая плавный поток в дизайне. Использование px вместо относительных единиц измерения может показаться законным решением в разработке, но оно портится при открытии в разных устройствах.
Отступы И Поля
Для заполнения и маржи избегайте использования em, используйте rem или процент. Использование абсолютных единиц измерения приведет к серьезным проблемам именно в этом случае, так как отступы и поля зависят от размера экрана.
Сгибание с помощью Flexbox
Если вы не создаете ретро-сайт из 90-х годов, вам определенно нужно будет использовать flexbox для создания современных веб-сайтов. Flexbox предоставляет очень простой в реализации способ распределения различных элементов в контейнере. Для использования flexbox вам необходимо указать все элементы в родительском элементе и установить свойство display в flex. Flexbox поставляется с различными вариантами настройки. Прелесть flex заключается в том, что он реагирует на размеры экрана, а это значит, что он может увеличивать или уменьшать элементы в зависимости от размера экрана.
Попадание в сетки
Grid-это превосходная версия flexbox. В отличие от flexbox, сетка является двумерной, что означает, что вы можете работать со строками и столбцами одновременно. Как и flexbox, вам нужно обернуть нужные элементы в виде элементов сетки в контейнер сетки и применить свойство отображения сетки. Grid поставляется с широким спектром функциональных возможностей и настроек.
Медиа Запрос
Media query-это когда вы явно говорите CSS, что этот фрагмент кода предназначен только для указанного размера экрана . Медиа запрос принимает параметр в терминах ширины экрана:
Наиболее распространенным значением для обеспечения отзывчивости большинства современных смартфонов, таких как iPhone X, является максимальная ширина 768 пикселей.
Используйте инструменты разработки браузера
Большинство современных веб-браузеров оснащены отличной поддержкой инструментов разработчика. Чтобы проверить, как выглядит ваше веб-приложение на мобильном устройстве, вы можете быстро перейти к инструментам разработки и изменить размер экрана на любое устройство по вашему выбору из приведенных вариантов.
Вывод
Добавление отзывчивости к вашему веб-приложению-непростая задача, и иногда может быть неприятно исправить сайт для всех размеров экрана, которые там есть. Но если вы новичок и создаете веб-приложение просто для удовольствия, вам не нужно работать для каждого из устройств, которые там есть. Просто работайте на ту, которая, как вы точно знаете, будет использоваться больше всего. Постарайтесь выработать привычку мыслить ответственно. Если вы можете разработать его умно, эффективно внедряя две системы компоновки, упомянутые здесь, на самом деле, это не такая уж большая работа. Просто для развития мыслительного процесса требуется время и практика.
Для людей, которые новички в кодировании или создании своего первого веб-приложения с помощью React, или просто пробуют свои руки на некоторых HTML и CSS, сделать приложение отзывчивым ко всем размерам экрана-это большая боль. Это очень распространено среди разработчиков, чтобы полностью пренебречь этим аспектом своего приложения в первую очередь, позволяя ему стать серьезной проблемой в долгосрочной перспективе. Когда Вы делитесь ссылкой на свое новое веб-приложение с друзьями, помните, что они собираются открыть ее в своих смартфонах, а не на рабочем столе, поэтому приложение, которым вы так гордитесь, может в конечном итоге выглядеть как разбросанная головоломка на их крошечных экранах. Поэтому, если вы не хотите видеть кнопку регистрации, летящую поверх логотипа приложения, важно принять эту проблему во внимание в первую очередь.
Почему не библиотеки?
Хотя такие библиотеки, как Bootstrap и Reactstrap, отлично подходят для сокращения времени написания CSS, они приходят со своими собственными компромиссами отсутствия творческой свободы. Становится трудно разработать полностью настраиваемое веб-приложение с желаемой тематикой с помощью этих библиотек, которые влекут за собой ряд ограничений в процессе проектирования. Таким образом, чистый CSS-это единственный способ сделать ваше веб-приложение таким, каким вы хотите его видеть, вплоть до мельчайших деталей.
Первое правило: Старайтесь не смешивать их!
Это обычное дело, что мы начинаем кодировать некоторые части интерфейса в Bootstrap, а затем для некоторых частей мы используем чистый CSS, и в конце концов, когда вы пытаетесь что-то изменить, все это становится беспорядком. Иногда CSS работает не так, как вы ожидали, а иногда Bootstrap ведет себя странно, что делает процесс отладки и в целом делает приложение отзывчивым. Следовательно, даже если вы используете обе библиотеки и CSS, старайтесь использовать их таким образом, чтобы они не сталкивались друг с другом.
Начните с менталитета
Важно иметь в виду, что приложение не будет работать в вашей системе вечно, в течение большей части времени оно будет работать на sceen намного меньше, чем ваш монитор, и вы должны соответствующим образом кодировать интерфейс.
Забудьте о пикселях
Это распространено среди новичков, чтобы использовать параметр измерения " px " при написании их CSS. Пиксели-это фиксированные величины. Он представляет собой абсолютную величину, точно так же, как метр или дюйм. Это исправлено, dn, поэтому вы должны избегать его. То, что может выглядеть как небольшое расстояние на вашем гигантском мониторе, может оказаться огромным расстоянием на чьем-то iPhone SE, потому что " px " остается фиксированным, даже если размер экрана меняется. И именно поэтому вы должны использовать относительные единицы измерения. Относительные единицы измерения изменяют свое значение с различными размерами экрана и разрешениями, что делает процесс создания адаптивных приложений более плавным.
Иди Родственник
CSS имеет несколько относительных единиц измерения. Наиболее полезными из них являются : rem, em, vh, vw и проценты. Вы будете использовать их много для того, чтобы сделать ваш CSS отзывчивым.
em относится к размеру шрифта текущего родителя.
rem - это корневой em, и, как следует из названия, он относится к размеру шрифта корневого элемента. Это зависит от размера шрифта по умолчанию, установленного в веб-браузере пользователя. В chrome по умолчанию установлено значение 16px.
vh расшифровывается как view-высота окна браузера
vw расшифровывается как view - ширина окна браузера
процентное отношение к родительскому элементу
Ныряйте в контейнеры
Если ключевые части пользовательского интерфейса разделены на небольшие фрагменты контейнеров, это делает процесс намного проще и менее запутанным. Поэтому всегда упаковывайте ключевые компоненты в отдельные родительские контейнеры. Например,
HTML:
<div className="container">
<p className="text">Big Tuna</p>
<img className="jim-image" src={Jim} alt="X" />
</div>Исправление шрифтов
В случае шрифтов используйте em или rem. Это позволит установить размер шрифта в контексте размера шрифта, используемого в Родительском контейнере, таким образом поддерживая плавный поток в дизайне. Использование px вместо относительных единиц измерения может показаться законным решением в разработке, но оно портится при открытии в разных устройствах.
Отступы И Поля
Для заполнения и маржи избегайте использования em, используйте rem или процент. Использование абсолютных единиц измерения приведет к серьезным проблемам именно в этом случае, так как отступы и поля зависят от размера экрана.
Сгибание с помощью Flexbox
Если вы не создаете ретро-сайт из 90-х годов, вам определенно нужно будет использовать flexbox для создания современных веб-сайтов. Flexbox предоставляет очень простой в реализации способ распределения различных элементов в контейнере. Для использования flexbox вам необходимо указать все элементы в родительском элементе и установить свойство display в flex. Flexbox поставляется с различными вариантами настройки. Прелесть flex заключается в том, что он реагирует на размеры экрана, а это значит, что он может увеличивать или уменьшать элементы в зависимости от размера экрана.
Код:
.parent{
display: flex;
}Попадание в сетки
Grid-это превосходная версия flexbox. В отличие от flexbox, сетка является двумерной, что означает, что вы можете работать со строками и столбцами одновременно. Как и flexbox, вам нужно обернуть нужные элементы в виде элементов сетки в контейнер сетки и применить свойство отображения сетки. Grid поставляется с широким спектром функциональных возможностей и настроек.
Код:
.grid-container{
display: grid;
}Медиа Запрос
Media query-это когда вы явно говорите CSS, что этот фрагмент кода предназначен только для указанного размера экрана . Медиа запрос принимает параметр в терминах ширины экрана:
Код:
@media only screen and (max-width: give_a_value) {
/* Your CSS for the specific screen size goes here */
}Наиболее распространенным значением для обеспечения отзывчивости большинства современных смартфонов, таких как iPhone X, является максимальная ширина 768 пикселей.
Используйте инструменты разработки браузера
Большинство современных веб-браузеров оснащены отличной поддержкой инструментов разработчика. Чтобы проверить, как выглядит ваше веб-приложение на мобильном устройстве, вы можете быстро перейти к инструментам разработки и изменить размер экрана на любое устройство по вашему выбору из приведенных вариантов.
Вывод
Добавление отзывчивости к вашему веб-приложению-непростая задача, и иногда может быть неприятно исправить сайт для всех размеров экрана, которые там есть. Но если вы новичок и создаете веб-приложение просто для удовольствия, вам не нужно работать для каждого из устройств, которые там есть. Просто работайте на ту, которая, как вы точно знаете, будет использоваться больше всего. Постарайтесь выработать привычку мыслить ответственно. Если вы можете разработать его умно, эффективно внедряя две системы компоновки, упомянутые здесь, на самом деле, это не такая уж большая работа. Просто для развития мыслительного процесса требуется время и практика.