Пропустить

Отзывчивый WordPress Дизайн с правилом @media CSS3

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 600.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

В этой статье я покажу вам, как вы можете разместить свой сайт на странице, используя правило @media из CSS3.

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

Но раньше, если вы никогда не устанавливали WordPress, откройте для себя Как установить WordPress блог шаги 7 et Как найти, установить и активировать WordPress тему на своем блоге

Тогда давайте вернемся к тому, почему мы здесь.

Адаптивный и мобильный-совместимым

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

Откройте также эти Плагины 8 WordPress для настройки внешнего вида вашего сайта

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

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

Смотрите также наш Плагины 10 WordPress для создания формы бронирования на вашем сайте

Теперь вы знаете разницу между отзывчивым и совместимым мобильным. Теперь мы увидим правило @media CSS3, который позволяет обновлять ваш веб-сайт для адаптивных или создавать темы WordPress с адаптивным контентом.

Правило @media из CSS3

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

@ media type-of-media (expression) {selector-css-test {property1: value1; свойство2: значение2; }}

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

Откройте для себя Как применить интерфейс и пользовательский опыт к WordPress

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

Вот для вашего сведения список: Хром , сафари, Firefox, IE, Опера et край.

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

Определите целевые экраны

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

Читайте также нашу статью о Как постепенно загружать комментарии Facebook и Disqus

Как мы видели в его структуре, чтобы определить тип экрана, вы должны переслать @media целевой тип экрана. Вот список различных типов экранов:

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

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

@media только экран

Установить стили для размеров экрана

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

@media только и максимальная ширина: 640px) {selector-css-example {/ * Ваш CSS обычно здесь * /}}

В этом примере я использую макс-ширина со значением 640px, Это позволяет установить максимальную ширину экрана, соответствующую размеру IPhone или небольшого смартфона Android. С такой структурой вы можете контролировать внешний вид вашего сайта на разных терминалах. Вот список свойств, связанных с измерениями, которые вы можете использовать в выражение :

Узнайте также наш Плагины 8 SEO WordPress для оптимизации SEO вашего сайта

mв-ширине et макс-ширина : минимальная и максимальная ширина, необходимые для отображения стилей в правиле, соответственно @media, Еще один пиксель и стили не отображаются.

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

Вот список размеров экрана некоторых терминалов:

IPhone: 640px
- iPad: 1024px
- Таблетки: 1366px
- Android-смартфон: 640px, 720px, 854px, 960px
- Очень большой Android: 1024px, 1066px
- Windows phone: 480
- Windows Phone большой: 768px
- старый и маленький: 320px
- Ультрабук / Ноутбуки: 1366px
- Настольные компьютеры и телевизоры: 1920px

Есть много других свойств, которые вы можете использовать в выражение, Например, если вы нацелены на рабочие столы или экраны телевизоров, которые могут отображать изображения в формате 16: 9, вы можете использовать такую ​​структуру:

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

@media и (min-width: 1920px) и (отношение размера устройства: 16 / 9) {selector-css-example {/ * Ваш CSS обычно здесь * /}}

Для получения более полных списков и примеров обратитесь к w3schools et Mozilla Developpers.

Протестируйте адаптивную функциональность вашего сайта

Когда вы изменяете или создаете свою тему WordPress или, в конце концов, если вам нравятся сюрпризы, вы должны проверить результат, чтобы убедиться, что он, наконец, отзывчив. Помните, что Google отслеживает сайты, которые не реагируют на запросы.

Смотрите также эти 10 WordPress плагины для создания вкладок в вашем блоге

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

Непосредственно в браузере вашего компьютера вы можете использовать Окно Resizer браузер Chrome Extension, ResponsiveResize, ResizeMe ou Firesizer, Ниже приведено изображение BlogPasCher в представлении адаптивного дизайна, которое по умолчанию поставляется с Firefox.

css3-медиа-светлячок реагирующий дизайн-вид

Есть также сайты, посвященные этой задаче:

Responsivepx

css3-медиа-responsivepx

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

IPad Peek

https://blogpascher.com/wp-admin/post.php?post=60969&action=editcss3-медиа-IPAD-быстрый взгляд

Этот сайт интересен для тестирования вашего сайта на последних терминалах Apple, iPad и IPhone. Просто введите свой URL. Обратите внимание, что он подвержен той же проблеме с кадром, что и responseivepx.

Мобильный телефон эмулятор

css3-медиа-мобильный-телефон-эмулятор

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

Google Mobile Дружественные Test

css3-медиа-Google-мобиль дружественного тест

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

Это один из самых важных тестов, если не самым важным. Просто введите свой адрес в строке и нажмите Анализировать начать тест. После теста инструмент отображает отчет и заметку. Если тест положительный, то тем лучше, вы не будете оштрафованы Google.

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

Рекомендуемые ресурсы

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

Заключение

Вот и все! вы знаете все, что нужно знать о том, как сделать ваш сайт или тему WordPress отзывчивыми, используя правило @media из CSS3. Если мы пропустили тему WordPress, которая вам дорога или которую вы предпочитаете, оставьте ссылку в разделе Комментарии ниже.

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

Мы также приглашаем вас поделиться в ваших разных социальных сетях.

...

Эта статья содержит комментарии 0

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
4 акции
доля4
чирикать
Регистрация