Отзывчивость в CSS

Содержание

Отзывчивость сайта

Ссылки сообщества
Социальные группы
Самые популярные темы
За сутки За 3 дня За неделю
Поиск Google по форуму
Поиск Yandex по форуму
Поиск по форуму
Расширенный поиск
К странице.
Обсуждение
Имя Дата Сообщение Читать обсуждение полностью:
Отзывчивость сайта
Alakonda 01.03.2020 15:30 http://www.cyberforum.ru/post13367952.html Academik 01.03.2020 18:31 http://www.cyberforum.ru/post13368430.html Alakonda 01.03.2020 19:03 http://www.cyberforum.ru/post13368524.html

Отзывчивость ПО. Как улучшить?
Есть программка, постепенно дополнялась и сейчас некоторые операции (в основном выполнение внешних.

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

Почему папка сайта на денвере, находится у меня в корне сайта на хостинге ?
Привет всем, подскажите пожалуйста, правильно ли то, что у меня на сайте, в корне \вой папке.

Индексация сайта: можно ли настроить отображение сайта в Google при поиске
уважаемые форумчане,с новым годом прошедшим, и с рождеством вас всех создал сайт,в роди.

Интерактивный таймер обратного отчета на страницу сайта (не для сайта заглушки)
Всем добрый вечер,прошу помощи если это возможно. Необходимо создать простой таймер обратного.

MoreAnswers

Парсить данные одного сайта со стороны клиента со страницы другого сайта
Есть 2 сайта. 1 — не мой 2 — мой. Мне нужно сделать следующее : Как только пользователь.

RSS-feed Отобразить текст с сайта без отображения самого сайта
Здравствуйте. При написании приложения для чтения rss ленты, возникла проблема: Появляется список.

Отсутствует отзывчивость в HTML5 — css

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

    2 2
  • 2 сен 2020 2020-09-02 21:31:57
  • msdvc

2 ответа

проблема связана с значениями в px. Эти фиксированные значения не будут меняться при изменении разрешения. тогда как значения, такие как em и%, будут меняться при изменении разрешения. Кроме того, у нас есть гибкие рамки для выполнения этой задачи для нас. Нам нужно использовать медиа-запросы.

Отзывчивость в CSS

Стили CSS3, это последняя версия, которая имеет много преимуществ перед своим предшественником, где CSS3 начал набирать популярность в начале 2010 года. В то время некоторые браузеры даже не использовали поддержку CSS3, поэтому сообществу веб-разработчиков потребовалось некоторое время, чтобы начать реализовывать это в своих проектах. Здесь мы увидим преимущества CSS3 перед CSS, а также обсудим, почему CSS3 приобрел такую огромную популярность за короткое время.

Отзывчивость: CSS3 по своей природе поддерживает адаптивный дизайн и оснащен для обработки медиа запросов. Медиа запросы помогают адаптировать веб-сайт, поскольку мы можем применять персонализированные свойства CSS для различной ширины экрана. Таким образом сайт выглядит хорошо на каждом устройстве с которого осуществляется доступ.

Цвета: добавлены новые форматы цветов, такие как RGBA — красный, зеленый, синий, альфа, HSL — оттенок, насыщенность, яркость, HSLA — оттенок, насыщенность, яркость, альфа. Это помогает веб дизайнерам применять стили и различные цветовые эффекты на своих страницах, где свойства градиента и непрозрачности также были добавлены.

Уменьшено количество проблем с выравниванием: Размер окна позволил устранить некоторые досадные проблемы с выравниванием, поскольку теперь разработчики могут придавать разделам соответствующий размер, используя такие свойства, как отступы, поля и так далее. Это помогает создавать сложные структуры страниц, как пример сетка CSS помогает создавать адаптивные страницы без использования строк и столбцов таблицы. Таким образом проблемы с выравниванием были решены, и теперь сайты стали удобными для мобильных устройств.

Анимации: CSS требует от разработчика создания анимации с использованием языка сценариев. С другой стороны, CSS3 представил такие функции анимации, как text-shadow. Это уменьшило нагрузку на разработчиков, так как применение таких анимации было трудным ранее, но с введением этих новых свойств CSS это стало намного проще.

Совместимость: как уже обсуждалось ранее, во время его выпуска CSS3 не поддерживался многими браузерами, и поэтому разработчикам потребовалось некоторое время, чтобы овладеть этим. Но в настоящее время каждый современный браузер поддерживает CSS3, и именно поэтому каждый веб-сайт, который создается в настоящее время, использует CSS3 вместо обычного CSS.

Ускорение загрузки [removed] как уже говорилось выше, ранее разработчикам приходилось смешивать JavaScript и CSS, чтобы обеспечить даже простые декорации, такие как text-shadow и так далее. С введением CSS3 зависимость CSS от JS уменьшилась в результате который, время загрузки страниц уменьшилось.

Тестирование: Ранние версии CSS были немного сложными, когда дело дошло до тестирования, где тем не менее CSS3 был разделен на более мелкие модули, что облегчает пользователю запуск тестов на совместимость и тестирование отдельных частей. Таким образом, обнаружение ошибок становится легче.

Friendly Platform: CSS3 совместим со всеми платформами или устройствами, такими как мобильные телефоны, планшеты и другие.

Радиус границы: CSS свойство border-radius помогает сделать границы изображений и элементов div округленными по форме, что требовало большого количества усилий для форматирования и фотошоп. Еще одна важная вещь, это поддержка закругленных углов изображения. Другие свойства, такие как затенение, также были добавлены.

CSS Отзывчивость — предотвращение автономного элемента

У меня есть такой код:

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

Пожалуйста, помогите мне. Спасибо!

3 ответа

Попробуйте отобразить: inline-block; вместо встроенного для пользователя класса.

Если вы не хотите видеть аватар в одиночку, просто используйте пробел: nowrap.

Надеюсь, приведенный ниже код поможет вам .

В классе контейнера используйте flex и flex-wrap.

Отзывчивость в CSS

512 просмотра

3 ответа

662 Репутация автора

Я создал следующую страницу здесь, я добавил одно фоновое изображение, эта страница не реагирует на всех устройствах.
Что я сделал не так? Я использовал bootstrap. Я хочу, чтобы изображение также было отзывчивым на всех устройствах. Я не хочу, чтобы полное изображение отображалось в мобильном представлении. Но когда я вижу в мобильном представлении, это должно быть хорошо видеть.
Помогите мне, пожалуйста.

Ответы (3)

плюса

11 Репутация автора

Вам нужно указать один класс для тела. Вы использовали класс img, который уже предоставляется Bootstrap, и теперь определите это, как показано ниже.

также используйте этот код CSS.

Я думаю, что это может работать для вашей веб-страницы.

плюса

1372 Репутация автора

Исправьте свой CSS:

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

плюса

662 Репутация автора

Ребята, я не добавляю эту строку в заголовок, поэтому я получил несколько ошибок

И я получил хороший фон для мобильного просмотра.

Отзывчивость к мобильному в CSS

Im пытается сделать мой нижний лист отзывчивым к мобильному и настольному. вы можете увидеть в ноутбуке нижний лист при нажатии новую тему работает все отлично:

Но затем позволяет увидеть его в мобильной версии (на регулярной Iphone 5):

Вы можете увидеть его за пределы страшно . Мой HTML Для этого зрения (уменьшенное):

Im в настоящее время Программирование этот сайт here, так что если вы идете туда, мы можем решить эту проблему очень быстро: https://ide.c9.io/amanuel2/ng-fourm

Спасибо за ваше время!

Создан 26 июн. 16 2020-06-26 20:22:11 amanuel2

ваши ссылки просят входа на обоих, так что я не могу увидеть весь код – mlegg 26 июн. 16 2020-06-26 21:16:07

Тогда Просто войдите? @mlegg это занимает как минута . – amanuel2 26 июн. 16 2020-06-26 21:17:23

извините, у меня нет учетной записи, можете ли вы опубликовать все html и css на jsfiddle.net или codepen.io – mlegg 26 июн. 16 2020-06-26 21:20:22

1 ответ

Чтобы настроить таргетинг на мобильные устройства, вам необходимо использовать медиа-запросы в своем CSS. Например:

Создан 26 июн. 16 2020-06-26 20:30:35 Coop

ok . но этот dosent поможет решить настоящую проблему. Я хочу исправить мою проблему, а не намек . и я был больше привлекателен для гибкости, я думаю? – amanuel2 26 июн. 16 2020-06-26 20:35:18

Вы сказали, что хотите, чтобы он «реагировал на мобильный и рабочий стол». Вы не можете добиться гибких конструкций в CSS без медиа-запросов, так что это не намек, это ядро ​​ответа, который вам нужен. Что касается остальных, вам нужно быть более конкретным в своем вопросе о проблемной области и том, что вы пробовали, а не просто размещать огромный блок кода и ожидать, что люди будут выполнять эту работу за вас. – Coop 26 июн. 16 2020-06-26 20:40:18

Lol, это больше, чем jjut media quiereies . – amanuel2 26 июн. 16 2020-06-26 20:50:01

Я уже пробовал медиа quiereies, и это доцент, чтобы получить работу. – amanuel2 26 июн. 16 2020-06-26 20:56:24

Основы отзывчивого веб-дизайна

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

Responsive Web Design

In this course you’ll learn the fundamentals of responsive web design with Google’s Pete LePage! You’ll create your own responsive web page that works well on any device — phone, tablet, desktop or anything in between.

You’ll start by exploring what makes a site responsive and how some common responsive design patterns work across different devices. From there, you’ll learn how to create your own responsive layout using the viewport tag and CSS media queries. As you proceed, you’ll experiment with major and minor breakpoints, and optimizing text for reading.

This is a free course offered through Udacity

Существует множество различных устройств с экранами всевозможных размеров: телефоны, фаблеты , планшетные и домашние ПК, игровые консоли, телевизоры и даже электронные аксессуары, которые можно носить прямо на себе. Размеры экранов постоянно меняются, поэтому важно, чтобы сайт мог адаптироваться к любому из них — не только сейчас, но и в будущем.

Об отзывчивом веб-дизайне впервые написал Итан Маркотт в статье журнала A List Apart. Это именно то, чего так не хватало устройствам и их пользователям. Макет подстраивается под устройство, исходя из его возможностей и размера. К примеру, определенный контент на телефоне располагается в одной колонке, а на планшете — в двух.

Настройка области просмотра

Страницы, адаптированные для просмотра на разных устройствах, должны содержать в контейнере head метатег viewport. Он сообщает браузеру, каким образом нужно контролировать размеры и масштаб страницы.

  • Чтобы контролировать масштабирование окна просмотра в браузере, используйте метатег viewport.
  • Добавьте w >, чтобы адаптировать ширину окна просмотра к экрану устройства.
  • Вставьте initial-scale=1 , чтобы обеспечить соотношение 1:1 между пикселями CSS и независимыми пикселями устройства.
  • Чтобы страница была доступна, проверьте, не отключено ли пользовательское масштабирование.

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

Чтобы страница подстроилась под ширину нужного экрана (в независимых пикселях), используйте метатег viewport w >. С его помощью размер и положение контента изменятся, и сайт будет хорошо смотреться на любом устройстве.

Некоторые браузеры не редактируют ширину страницы и размер контента, а изменяют ориентацию сайта на альбомную или увеличивают масштаб. С помощью атрибута initial-scale=1 можно указать браузеру соотношение пикселей CSS и устройства, равное 1:1 независимо от ориентации дисплея. Благодаря этому страница будет лучше выглядеть в альбомной ориентации.

Специальные возможности области просмотра

Настроив initial-scale, вы также можете установить следующие атрибуты для области просмотра:

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

Масштабирование контента для области просмотра

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

  • Не используйте крупные элементы с фиксированной шириной.
  • Для корректного отображения контента не ограничивайте его определенной шириной области просмотра.
  • Используйте медиазапросы CSS, чтобы указать разные стили для больших и маленьких экранов.

Используя метатег viewport при разработке сайта для мобильных устройств, можно по ошибке создать контент страницы, которые не полностью соответствует определенной области просмотра. Например, если ширина показываемого изображения больше области просмотра, придется использовать горизонтальную прокрутку. Чтобы избавить пользователей от этой необходимости, потребуется подогнать контент под шир ну области просмотра.

Диапазон размеров экрана и ширины в пикселях CSS очень велик (например, телефоны могут значительно отличаться от планшетов или даже от других телефонов), поэтому отображение контента не должно зависеть от конкретной ширины области просмотра.

Установка больших абсолютных значений ширины CSS для компонентов страницы сделает div слишком большим для более узкой области просмотра (например, на устройствах шириной 320 пикселей CSS, таких как iPhone). Вместо этого можно использовать значения в относительных единицах, например width: 100%. Также старайтесь избегать больших абсолютных значений позиционирования. Из-за них на маленьком экране элемент может оказаться эа пределами области просмотра.

Улучшение отзывчивости с помощью медиазапросов CSS

Медиазапросы — это простые фильтры, которые можно применять к стилям CSS. Они позволяют изменять стили на основании характеристик устройства, связанных с отображением контента, включая тип, ширину, высоту, ориентацию и даже разрешение экрана.

  • Медиазапросы также позволяют выбрать стиль на основе характеристик устройства.
  • Добавьте min-width вместо min-device-width для корректного отображения сайта на большинстве устройств.
  • Чтобы не нарушать структуру макета, используйте элементы относительных размеров.

Например, вы можете поместить в медиазапрос print все стили, необходимые для печати:

Кроме использования атрибут media в ссылке на таблицу стилей существует ещё два способа применить медиазапросы @media и @import, которые можно встроить в файл CSS: Приоритет отдается первым двум методам, более эффективным, чем синтаксис @import (см. Избегайте правила @import).

Логика медиазапросов не является взаимоисключающей, поэтому к блоку CSS применяются все фильтры, отвечающие его критериям. Порядок применения фильтров обусловлен стандартными правилами CSS.

Применение медиазапросов на основе размера области просмотра

С помощью медиазапросов можно создать отзывчивую среду, в которой к каждому размеру экрана будут применяться подходящие стили. Синтаксис медиазапросов допускает создание правил, которые применяются на основании характеристик устройства.

В отзывчивом веб-дизайне наиболее часто используются функции min-width, max-width, min-height и max-height (хотя возможны и другие запросы).

Атрибут Результат
min-width Правило применяется к браузеру, ширина которого больше значения, указанного в запросе.
max-width Правило применяется к браузеру, ширина которого меньше значения, указанного в запросе.
min-height Правило применяется к браузеру, высота которого больше значения, указанного в запросе.
max-height Правило применяется к браузеру, высота которого меньше значения, указанного в запросе.
orientation=portrait Правило применяется к браузеру, высота которого не меньше его ширины.
orientation=landscape Правило применяется к браузеру, ширина которого больше высоты.
  • При ширине браузера от 0 пикс. до 640 пикс. применяется max-640px.css.
  • При ширине браузера от 500 пикс. до 600 пикс. применяются стили из @media.
  • При ширине браузера от 640 пикс. и выше применяется min-640px.css.
  • Если в браузере ширина больше высоты, применяется landscape.css.
  • Если в браузере высота больше ширины, применяется portrait.css.

Примечание к min-device-width

Также возможно создание запросов на основании *-device-width, хотя делать это настоятельно не рекомендуется.

Разница небольшая, но очень важная: min-width исходит из размера окна браузера, а min-device-width — из размера экрана устройства. К сожалению, некоторые браузеры (включая устаревшую версию браузера для Android) не всегда правильно определяют ширину области просмотра и вместо нее могут сообщить размер экрана в пикселях устройства.

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

Использование относительных единиц

Основной принцип отзывчивого веб-дизайна (и главное отличие от макетов с фиксированной шириной) — подвижность и пропорциональность. Использование относительных размеров помогает упростить макет и предотвратить случайное создание компонентов, не вмещающихся в область просмотра.

Например, установка параметра width равным 100% для блока div верхнего уровня приведет к тому, что он будет заполнять всю ширину области просмотра и никогда не будет слишком мал или велик для нее. Блок div в любом случае будет соответствовать экрану, будь то iPhone (320 пикс.), Blackberry Z10 (342 пикс.) или Nexus 5 (360 пикс.).

Кроме того, использование относительных единиц позволяет браузерам отображать контент, исходя из пользовательского масштаба. Это значит, что горизонтальная панель прокрутки на странице не понадобится.

Not recommended — fixed width

Recommended — responsive width

Выбор контрольных точек

Будьте осторожны при определении контрольных точек на основе классов устройств. Если при установке этих точек вы будете ориентироваться на все доступные устройства, бренды или операционные системы, техническое обслуживание сайта станет практически невозможным. Лучше, если контент будет сам определять, как макет должен подстраиваться под контейнер.

  • Создавайте контрольные точки на основе контента, а не для отдельных устройств, продуктов или брендов.
  • Сначала разработайте дизайн для самого маленького мобильного устройства, а затем переходите к версиям для больших экранов.
  • Ограничьте длину строк 70-80 символами.

Выбор главных контрольных точек: от меньшего к большему

Сначала разработайте дизайн контента для маленьких экранов, а затем увеличивайте его, пока не возникнет необходимость в контрольной точке. Так вы оптимизируете контрольные точки на основе контента и используете их минимальное количество.

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

Затем увеличим размер окна браузера, пока между элементами не появится слишком много пустого пространства. Теперь прогноз погоды выглядит не так красиво. Вы можете выбрать любое значение, но 600 пикселей — это слишком много.

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

В конце проведите рефакторинг CSS. В этом примере мы поместили общие стили (шрифты, значки, цвета и базовое позиционирование) в weather.css. Затем мы включили макет для маленьких экранов в weather-small.css, а для больших — в weather-large.css.

Выбор второстепенных контрольных точек (если необходимо)

Отметив главными контрольными точками крупные изменения макета, внесите второстепенные корректировки. Например, между главными контрольными точками можно установить отступы для элемента или увеличить размер шрифта, чтобы он смотрелся в макете более естественно.

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

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

Оптимизация текста для чтения

Согласно распространенной теории, самой удобной для чтения является колонка с длиной строки около 70-80 знаков (8-10 слов). Поэтому для всех текстовых блоков, ширина которых превышает 10 слов, следует установить контрольную точку.

Рассмотрим подробнее приведенный выше пример записи в блоге. На маленьком экране отлично помещаются строки длиной в 10 слов шрифтом Roboto с размером 1em, но для экранов большего размера необходимо установить контрольную точку. В этом случае для окна просмотра браузера размером больше 575 пикселей оптимальная ширина контента равна 550 пикселям.

Никогда не скрывайте контент полностью

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

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

От нуля до героя фронтенда (Часть 1)

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

Этот гайд поможет вам сориентироваться в изучении фронтенд-разработки. В нем собраны учебные ресурсы, уже доказавшие свою эффективность, и подробные объяснения.

Руководство разбито на две части для более простого усвоения материала. Часть 1 посвящена разработке интерфейсов на HTML и CSS. Часть 2 будет о Javascript, фреймворках и паттернах дизайна.

Основы HTML и CSS

В разработке фронтенда все начинается с HTML (рус. — здесь и далее примечание переводчика с указанием языка статьи по ссылке) и CSS (рус.). HTML и CSS контролируют то, что вы видите на странице. HTML диктует содержимое в то время как CSS регулирует стили и раскладку.

Для начала прочитайте пособия по HTML (рус.) и CSS (рус.) от Mozilla Developer Network (MDN). MDN предоставляет пошаговые объяснения важных концепций HTML и CSS. К тому же каждая глава длинной всего в один экран и проиллюстрирована интерактивными демо на CodePen и JSFiddle.

После прочтения этих материалов загляните на курс Создай сайт (англ.) от CodeAcademy. Потребуется всего несколько часов для прохождения этого курса. Он даст хорошую основу для построения сайтов на HTML и CSS. Если вы хотите больше, то Построение веб-форм (англ.) — еще одно руководство от CodeAcademy, которое научит вас создавать и стилизовать веб-формы.

Чтобы попрактиковаться в CSS попробуйте CSS Diner (англ.). Это забавная игра с задачками по CSS. Другой важный аспект HTML и CSS — раскладка. LearnLayout (рус.) интерактивный учебник, показывающий как создавать раскладки на HTML и CSS.

Так же изучите как пользоваться Google Fonts (англ.) при помощи статьи Основы Google Font API (англ.) от CSSTricks или Руководство по Google Font API (рус.). Типографика — это фундаментальная основа интерфейса. Когда у вас появится время, я крайне рекомендую вам прочитать эту бесплатную онлайн-книгу Professional Web (англ.) от Donny Truong. Она научит вас всему, что вы должны знать о типографике во фронтенд-разработке.

Изучая все эти ресурсы, не беспокойтесь особо о том, чтобы все запомнить. В первую очередь сосредоточьтесь на понимании того, как HTML и CSS взаимосвязаны.

Практика основ HTML и CSS

Теперь, когда вы имеете представление об основах HTML и CSS, давайте повеселимся. В этом разделе есть два эксперимента для вашей практики создания сайтов и интерфейсов. Я использую термин “эксперимент” поскольку в ходе эксперимента вы осознаете на сколько сильно ваш успех зависит от ваших неудач.

Эксперимент 1

В нашем первом эксперименте мы будем использовать CodePen. CodePen это площадка для фронтенда (“песочница”), где вы можете писать HTML и CSS код без создания файлов на вашем компьютере. Там так же есть функция живого предпросмотра, которая обновляется сразу после сохранения кода.

Используя CodePen, вы убиваете двух зайцев сразу. С одной стороны вы практикуете HTML и CSS. C другой стороны вы создаете основу для портфолио с иллюстрациями вашего прогресса. Мы так же будем использовать Dribbble, который полон вдохновляющего дизайна.

Идите на Dribbble и найдите дизайн, код для которого вы сможете написать за пару часов. Я выбрал несколько примеров, с которых вы можете начать: 1, 2, 3, 4 и 5. Я выбирал дизайны, ориентированные в первую очередь на мобильную разработку, потому что они менее сложны, чем их аналоги для обычных экранов. Тем не менее вы вольны выбрать вариант для десктопов.

Когда вы определились с дизайном, идите и попробуйте сверстать его на CodePen. Если вы застряли, помните что StackOverflow (англ.) ваш друг. Другой полезной практикой будет пойти на такие сайты, как Medium, AirBnB и Dropbox и при помощи инструментов разработчика (англ.) посмотреть как реализована разметка и стили. Так же взгляните на некоторые примеры на CodePen. Я прикрепляю несколько хороших ссылок:

Не стоит расстраиваться если ваша копия будет отличатся от оригинала. Продолжайте практиковаться с разными дизайнами и со временем вы заметите существенные улучшения.

Если у вас нет за плечами опыта в дизайне, вероятнее всего, ваш дизайнерский глазомер не настроен. Фронтенд-разработчик с хорошим дизайнерским чутьем будет в состоянии отличить хороший дизайн и сверстать его идеально. Я написал статью несколько недель назад о том, как развить свое дизайнерское чутье (рус.).

Эксперимент 2

Надеюсь, первый эксперимент дал вам определенную уверенность в написании HTML и CSS. Для эксперимента 2 мы заглянем на ряд сайтов, затем напишем код нескольких компонентов.

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

  • Dropbox for Business: Попробуйте повторить их секцию с баннерами (так называемые hero image (англ.))
  • AirBnB: Попробуйте повторить их футер
  • PayPal: Попробуйте повторить их навигацию
  • Invision: Попробуйте повторить секцию регистрации (signup) в нижней части страницы
  • Stripe: Попробуйте повторить секцию оплаты

Еще раз повторю, что целью второго эксперимента является не воссоздание главной страницы. Даже не смотря на то, что это бы точно не помешало! Выберите пару ключевых компонентов, например навигационную панель или секцию с баннерами и сверстайте их. Я написал свои предложения рядом со ссылками на сайты, но вы можете выбрать другие части на свое усмотрение.

Вы можете использовать CodePen для своих экспериментов или выполните их на своем компьютере. Если вы планируете работать локально, то так же можете скачать этот пример проекта в качестве шаблона или создать файлы с нуля. Я советую вам использовать редакторы Atom или Sublime.

К тому же помните, что вы всегда можете посмотреть HTML или CSS любого сайта. Просто кликните правой кнопкой мыши на странице или на определенном элементе, выберите “Просмотреть код” и появится панель с HTML кодом в левой части и CSS кодом в правой. После окончания верстки или в момент, когда вы в тупике проинспектируйте свой код и посмотрите, как взаимодействуют ваши HTML и CSS.

Лучшие практики HTML и CSS

То, что вы узнали выше — основы HTML и CSS. Следующим шагом будет изучение лучших практик. Лучшие практики представляют из себя набор правил, которые улучшат качество вашего кода.

Семантичная разметка

Одним из лучших правил для HTML и CSS это написание семантичной разметки. Хорошая веб-семантика означает использование подходящих HTML тегов и “говорящих” названий классов в CSS, которые будут передавать структурный смысл.

Например, тег h1 говорит нам, что вложенный текст является важным заголовком. Другим примером является тег footer, который говорит нам что элемент должен располагаться внизу страницы. Для дальнейшего изучения прочтите Основы семантической верстки на HTML5 (рус.) и Для чего нужна семантика в именах классов (англ.) от CSSTricks.

Соглашение об именах в CSS

Следующая важная хорошая практика в CSS собственно соглашение об именах. Хорошее именование, как семантичная разметка, передает смысл и помогает сделать наш код предсказуемым, удобным для чтения и поддержки. Вы можете почитать о разных соглашениях в статье OOCSS, ACSS, BEM, SMACSS: что это? Что мне использовать? (англ.) или Правильный CSS: OOCSS, SMACSS, BEM и SASS (рус.).

В общем я предлагаю вам начать с простых соглашений об именах, которые будут вам интуитивно понятны. Со временем придет понимание, с каким лично вам удобнее всего работать. Чтобы посмотреть, как большие компании типа Medium используют в своей работе BEM можете почитать CSS у Medium чертовски хорош (англ.). В этой статье вы так же узнаете, что составление эффективного набора CSS правил это процесс итеративный.

Сброс CSS

Браузеры имеют небольшие различия при отрисовке стилей, начиная от отступов и до высоты строк. По этой причине всегда сбрасывайте CSS. MeyerWeb — самый популярный способ. Если вы хотите копнуть глубже, то можете почитать Создайте свой собственный файл Reset.css (англ.).

Кроссбраузерная поддержка

Кроссбраузерная поддержка означает что ваш код поддерживает большую часть современных брузеров. Некоторые свойства CSS^ например transition, требуют префиксов (англ.) для их верной работы в разных браузерах. Можете почитать о префиксах в статьях CSS Vendor Prefixes (англ.) или Вендорные префиксы (рус.). Главное что вы должны запомнить — тестируйте свои сайты во всех браузерах, включая Chrome, Firefox и Safari.

Препроцессоры и постпроцессоры CSS

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

Препроцессоры представляют из себя расширения для языка CSS, которые добавляют наворотов типа переменных, миксинов и наследования. Два самых главных препроцессора Sass и Less. На 2020 год Sass более распространен. Bootstrap, популярный CSS фреймворк, переключился с Less на Sass. К тому же когда большинство людей заводят речь о Sass, то они на самом деле говорят о SCSS (рус.).

Постпроцессоры CSS вносят изменения в код после того, как он был написан или после компиляции препроцессора. Например, некоторые постпроцессоры, тот же PostCSS, имеют плагины для автоматического добавления префиксов.

Когда вы впервые открываете для себя препроцессоры и постпроцессоры, появляется соблазн использовать их везде. Тем не менее начните с простого и добавляйте переменные, миксины только там, где это действительно необходимо. Статья, о которой я упоминал ранее, CSS у Medium чертовски хорош (англ.), так же рассказывает о том, какие возможны излишки при работе с препроцессорами.

Система сеток и отзывчивость

Сетки в CSS это структура, позволяющая вам “укладывать” элементы горизонтально и вертикально.

Такие фреймворки, как Bootstrap, Skeleton и Foundation предусматривают стили, управляющие строками и колонками в раскладке. В то время как фреймворки, безусловно, полезны, стоит понимать саму суть работы сеток. Прекрасные обзоры на эту тему: Понимание CSS сеток (англ.) и Don’t Overthink Grids (англ.).

Одна из главных возможностей, которую дают сетки, это обеспечение отзывчивости вашего сайта. Отзывчивость ( responsiveness) означает, что сайт изменяет свои размеры в зависимости от ширины окна браузера. Долгое время отзывчивость достигалась при помощи медиавыражений в CSS (рус.): правил, срабатывающих только при определенных размерах экрана.

Вы можете почитать больше на тему медиавыражений в статье Введение в медиавыражения (англ.). Так же, поскольку мы вступили в эру mobile-first (рус.), загляните в Введение в медиавыражения Mobile-First (англ.).

Отработка лучших практик HTML и CSS

Теперь вы вооружены самыми лучшими практиками. Давайте проверим их в бою! Целью следующих двух экспериментов является практика написания чистого кода и наблюдение за долгосрочным эффектом повышения читабельности и поддерживаемости.

Эксперимент 3

В рамках эксперимента 3 выберите один из прошлых экспериментов и проведите рефакторинг своего кода с использованием советов, которые вы узнали выше. Рефакторинг означает редактирование вашего кода так, чтобы он стал проще, в том числе в плане читаемости.

Умение проводить эффективный рефакторинг кода — очень важный навык для фронтенд-разработчика. Создание эффективного кода- постоянный процесс. Возьмите статью CSS архитектура: рефакторинг CSS (англ.) в качестве отправной точки для вашей работы над рефакторингом.

Ниже несколько вопросов, на которые вы должны себе ответить в процессе рефакторинга.

  • Не двусмысленны ли названия классов? Через полгода я все еще смогу понять, что означает название класса?
  • Семантичен ли мой HTML и CSS? Можно ли с первого взгляда определить структуру и взаимоотношения элементов?
  • Использую ли я одни и те же цвета в коде? Не будет ли логичнее вынести их в переменные Sass (англ.)?
  • Работает ли мой код в Safari так же хорошо, как в Chrome?
  • Нельзя ли заменить часть кода на систему сеток, например Skeleton?
  • Не слишком ли часто я использую !important? Как я могу это исправить?

Эксперимент 4

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

В качестве последнего эксперимента создайте собственный сайт-портфолио. Для фронтенд-разработчика портфолио—самый важный актив. Сайт-портфолио предназначен для демонстрации ваших работ. Что еще более важно, это постоянно обновляющийся отчет вашего прогресса в разработке. Поэтому создавайте портфолио даже если у вас 1–2 работы.

Если первый вариант вашего портфолио не идеален — это нормально! Портфолио пройдет через множество итераций (рус.). В первую очередь важно использовать при разработке все ваши навыки.

Будьте в курсе

До тех пор, пока HTML и CSS не выйдут из употребления, важно оставаться в курсе всех событий в области фронтенда.

Ниже приведен список сайтов, блогов и форумов, которые являются передовыми источниками информации.

Учитесь на примерах

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

Стайлгайды

Стайлгайды в вебе это наборы CSS компонентов и паттернов, которые могут быть использованы на разных сайтах. Ключевой вещью для обучения является понимание того, как повторно использовать компоненты на основе HTML и CSS и не нарушать принцип “Не повторяйся” (рус.).

Соглашения о коде

Соглашения о коде призваны сделать ваш код читабельным и легким в поддержке. Некоторые из этих ссылок, например CSS Guidelines (англ.), являются набором советов по улучшению написания HTML и CSS в то время, как другие ссылки, например Github internal CSS toolkit and guidelines (англ.) являются примерами эффективного кода.

Сворачиваемся

Надеюсь, к концу этой статьи вы познакомились с HTML и CSS и обзавелись парой проектов. Лучшими способами изучения фронтенда являются постоянные эксперименты и работа над проектами. Помните — каждый разработчик с чего-то начинал. И лучше начать сегодня, чем завтра.

Эта статья первая из двух запланированных. Во второй части мы поговорим об интерактиве с помощью JavaScript и библиотеках/фреймворках. Кроме того если вы хотите чтобы я подробно на чем-то остановился или у вас появились вопросы, то не стесняйтесь писать мне в Twitter.

P.S. Поделитесь этой статьей с друзьями, если она вам понравилась. Это много значит для меня.

Нашли ошибку? Воспользуйтесь функцией Private notes: выделяете текст с ошибкой, нажимаете на символ замка в появившемся дудле и оставляете свой комментарий. Спасибо!

Отзывчивость в CSS

512 просмотра

3 ответа

662 Репутация автора

Я создал следующую страницу здесь, я добавил одно фоновое изображение, эта страница не реагирует на всех устройствах.
Что я сделал не так? Я использовал bootstrap. Я хочу, чтобы изображение также было отзывчивым на всех устройствах. Я не хочу, чтобы полное изображение отображалось в мобильном представлении. Но когда я вижу в мобильном представлении, это должно быть хорошо видеть.
Помогите мне, пожалуйста.

Ответы (3)

плюса

11 Репутация автора

Вам нужно указать один класс для тела. Вы использовали класс img, который уже предоставляется Bootstrap, и теперь определите это, как показано ниже.

также используйте этот код CSS.

Я думаю, что это может работать для вашей веб-страницы.

плюса

1372 Репутация автора

Исправьте свой CSS:

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

плюса

662 Репутация автора

Ребята, я не добавляю эту строку в заголовок, поэтому я получил несколько ошибок

И я получил хороший фон для мобильного просмотра.

Отзывчивость к мобильному в CSS

Im пытается сделать мой нижний лист отзывчивым к мобильному и настольному. вы можете увидеть в ноутбуке нижний лист при нажатии новую тему работает все отлично:

Но затем позволяет увидеть его в мобильной версии (на регулярной Iphone 5):

Вы можете увидеть его за пределы страшно . Мой HTML Для этого зрения (уменьшенное):

Im в настоящее время Программирование этот сайт here, так что если вы идете туда, мы можем решить эту проблему очень быстро: https://ide.c9.io/amanuel2/ng-fourm

Спасибо за ваше время!

Создан 26 июн. 16 2020-06-26 20:22:11 amanuel2

ваши ссылки просят входа на обоих, так что я не могу увидеть весь код – mlegg 26 июн. 16 2020-06-26 21:16:07

Тогда Просто войдите? @mlegg это занимает как минута . – amanuel2 26 июн. 16 2020-06-26 21:17:23

извините, у меня нет учетной записи, можете ли вы опубликовать все html и css на jsfiddle.net или codepen.io – mlegg 26 июн. 16 2020-06-26 21:20:22

1 ответ

Чтобы настроить таргетинг на мобильные устройства, вам необходимо использовать медиа-запросы в своем CSS. Например:

Создан 26 июн. 16 2020-06-26 20:30:35 Coop

ok . но этот dosent поможет решить настоящую проблему. Я хочу исправить мою проблему, а не намек . и я был больше привлекателен для гибкости, я думаю? – amanuel2 26 июн. 16 2020-06-26 20:35:18

Вы сказали, что хотите, чтобы он «реагировал на мобильный и рабочий стол». Вы не можете добиться гибких конструкций в CSS без медиа-запросов, так что это не намек, это ядро ​​ответа, который вам нужен. Что касается остальных, вам нужно быть более конкретным в своем вопросе о проблемной области и том, что вы пробовали, а не просто размещать огромный блок кода и ожидать, что люди будут выполнять эту работу за вас. – Coop 26 июн. 16 2020-06-26 20:40:18

Lol, это больше, чем jjut media quiereies . – amanuel2 26 июн. 16 2020-06-26 20:50:01

Я уже пробовал медиа quiereies, и это доцент, чтобы получить работу. – amanuel2 26 июн. 16 2020-06-26 20:56:24

Илон Маск рекомендует:  Работа с регионами
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL