• Страница 1 из 3
  • 1
  • 2
  • 3
  • »
Форум » Территория вебмастера » Начинающему вебмастеру » Адаптивная верстка для стандартных экранов
Адаптивная верстка для стандартных экранов
workman
Дата: Вторник, 24.10.2017, 12:42 | Сообщение 1
Гл. Модератор
Сообщений:1705
Награды: 8


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

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

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

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

Что такое адаптивная точка?

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

Смартфон (портретная и альбомная ориентация)
Код
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
Стили тут
}

Смартфоны (альбомная ориентация)
Код
@media only screen
and (min-width : 321px) {
Стили тут
}

Смартфоны (портретная ориентация)
Код
@media only screen
and (max-width : 320px) {
Стили тут
}

iPad (портретная и альбомная ориентация)
Код
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
Стили тут
}

iPad (альбомная ориентация)
Код
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
Стили тут
}

iPad (портретная ориентация)
Код
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
Стили тут
}

Настольные компьютеры и ноутбуки
Код
@media only screen
and (min-width : 1224px) {
Стили тут
}

Большие экраны
Код
@media only screen
and (min-width : 1824px) {
Стили тут
}

iPhone 4
Код
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
Стили тут
}
Страна: (RU)
workman
Дата: Вторник, 24.10.2017, 15:26 | Сообщение 2
Гл. Модератор
Сообщений:1705
Награды: 8


Отключаем ненужные скрипты при мобильном просмотре сайта таким образом
Код
<script>
if(window.screen.width > 800) {
    document.write('<script src="путь_к_скрипту.js"><\/script>');
}
</script>
Страна: (RU)
Kosten
Дата: Вторник, 24.10.2017, 16:01 | Сообщение 3
Администраторы
Сообщений:17022
Награды: 55


workman, а как их отключать?
Страна: (RU)
Kosten
Дата: Вторник, 24.10.2017, 20:53 | Сообщение 4
Администраторы
Сообщений:17022
Награды: 55


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

1. Можно один вид материалов или блока сделать на одном @media, где все классы туда прописать?

2. Можно без @media обойтись и все поставить на проценты, это ширину и высоту?

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

Код
@media screen and (min-width: 240px) and (max-width: 340px) {  
  .ifnot-mob {display: none!important;}
}


То, что хотите скрыть.

Код
<div class="ifnot-mob">здесь код который нужно скрыть</div>


Можно сразу задать?

Код
Идет класс на кнопку или другой элемент {display: none;}


Если не ошибаюсь, то так должно, и должен чистый класс прописываться или к нему дополнение идет, что обязательно ставить, то не сработает.
Страна: (RU)
workman
Дата: Вторник, 24.10.2017, 21:46 | Сообщение 5
Гл. Модератор
Сообщений:1705
Награды: 8


Kosten, Ну например отключить системный скрипт при просмотре с мобильного приложения будет выглядеть так
Код
<script>
if(window.screen.width > 800) {
    document.write('<script src="/.s/src/moder_panel/moder_scripts.js"><\/script>');
}
</script>
Страна: (RU)
Kosten
Дата: Вторник, 24.10.2017, 22:07 | Сообщение 6
Администраторы
Сообщений:17022
Награды: 55


workman, зачем скрипт ставить, когда можно none обойтись.
Страна: (RU)
workman
Дата: Вторник, 24.10.2017, 22:09 | Сообщение 7
Гл. Модератор
Сообщений:1705
Награды: 8


Kosten, А как ты думаешь отключить именно JS ? ))) Только скриптом))

Блоки показываются и скрываются именно так
Код
.on-Block{display:none}
.off-Block{display:inline}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.on-Block{display:inline}
.off-Block{display:none}
}

Код
<div class="on-Block off-Block">Тут содержимое</div>
Страна: (RU)
Kosten
Дата: Вторник, 24.10.2017, 22:37 | Сообщение 8
Администраторы
Сообщений:17022
Награды: 55


Цитата workman ()
Блоки показываются и скрываются именно так

Вот это и хотел узнать, хотя там 3 вопроса. 07a
Страна: (RU)
workman
Дата: Вторник, 24.10.2017, 23:04 | Сообщение 9
Гл. Модератор
Сообщений:1705
Награды: 8


Цитата Kosten ()
хотя там 3 вопроса.

Я ответил сразу на них одним)) Здесь медиа указаны именно для работы с мобилками. Или я не понял вопроса? Сформулируй
Страна: (RU)
Kosten
Дата: Вторник, 24.10.2017, 23:24 | Сообщение 10
Администраторы
Сообщений:17022
Награды: 55


Попробую сейчас вид материала адаптивным сделать. 11a
Страна: (RU)
workman
Дата: Вторник, 24.10.2017, 23:25 | Сообщение 11
Гл. Модератор
Сообщений:1705
Награды: 8


Цитата Kosten ()
Попробую сейчас вид материала адаптивным сделать

Попробуй... Если что я на подхвате ))
Страна: (RU)
Kosten
Дата: Вторник, 24.10.2017, 23:34 | Сообщение 12
Администраторы
Сообщений:17022
Награды: 55


workman, нужно отступ с правой стороны сделать?

Когда на узком экране, то впритык идет, на левой все нормально.

http://pluton.clan.su/
Страна: (RU)
Kosten
Дата: Вторник, 24.10.2017, 23:44 | Сообщение 13
Администраторы
Сообщений:17022
Награды: 55


Вот такая тема.

Прикрепления: 8426249.jpg(74.9 Kb)
Страна: (RU)
workman
Дата: Среда, 25.10.2017, 00:11 | Сообщение 14
Гл. Модератор
Сообщений:1705
Награды: 8


Kosten,
Код
.block_wid {
    width: auto;
    float: none;
    margin: 0;
}


Прикрепления: 4250502.png(108.4 Kb)


Сообщение отредактировал
workman - Среда, 25.10.2017, 00:21
Страна: (RU)
Kosten
Дата: Среда, 25.10.2017, 00:36 | Сообщение 15
Администраторы
Сообщений:17022
Награды: 55


workman, что то не понял, нужно поменять?
Страна: (RU)
Форум » Территория вебмастера » Начинающему вебмастеру » Адаптивная верстка для стандартных экранов
  • Страница 1 из 3
  • 1
  • 2
  • 3
  • »
Поиск: