Адаптивная верстка для стандартных экранов
|
|
workman | Вторник, 24 Октября 2017, 12:42 | Сообщение 1 |
| Для тех кто занимается адаптацией своих или чужих ресурсов, вот выкладываю подсказку для адаптивной верстки. Разработка адаптивного веб-сайта не означает, что вам нужно выполнять несколько отдельных проектов и переключаться между ними, чтобы показать, как ваш сайт будет вести себя в разных разрешениях экрана.
Благодаря мобильным устройствам, планшетам и аналогичным устройствам, которые набирают силу быстрее, чем большинство из нас может идти в ногу со временем, перед заинтересованными сторонами организации необходимо решать вопросы, охватывающие взаимодействие пользователей и принятие их веб-сайтов на основе последних миниатюрных гаджетов.
Адаптивные веб-сайты отвечают размеру ширине браузера и выводит корректно страницы. Это не зависит от браузера, сайт настраивает свой конструктор и возможно функций для пользователя, таким образом, который оптимизирован для экрана.
Мы пришли к определенному моменту в разработке веб-сайтов, где, если вы не создаете или не создаете сайты, дружественные к мобильности и отзывчивости, вы делаете что-то неправильно. Отзывчивый дизайн больше не является дополнительным, так как все больше и больше пользователей продолжают получать доступ к Интернету через свои мобильные устройства. Если вы только начинаете с разработки мобильных устройств или даже если вы создаете мобильные веб-приложения в течение многих лет, вы можете найти этот фрагмент типичных точек разлома различных мобильных устройств, которые могут быть полезны для использования в ваших медиа-запросах.
Что такое адаптивная точка?
Адаптивная точка останова - это определенная ширина браузера, которая позволяет отображать разные макеты, когда браузер находится в объявленной ширине.
Смартфон (портретная и альбомная ориентация)
Код @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 Октября 2017, 15:26 | Сообщение 2 |
| Отключаем ненужные скрипты при мобильном просмотре сайта таким образом
Код <script> if(window.screen.width > 800) { document.write('<script src="путь_к_скрипту.js"><\/script>'); } </script>
| Страна: (RU) |
| |
Kosten | Вторник, 24 Октября 2017, 16:01 | Сообщение 3 |
| workman, а как их отключать?
| Страна: (RU) |
| |
Kosten | Вторник, 24 Октября 2017, 20:53 | Сообщение 4 |
| Формально понимаю как адаптивным делать, как пример вид материала. Но пока сам только один раз все прописывал, и все выставлял по браузеру. Это сжимал его, если начинает кнопка съезжать, как пример, то ставлю меньше значение, и здесь несколько вопросов.
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 Октября 2017, 21:46 | Сообщение 5 |
| Kosten, Ну например отключить системный скрипт при просмотре с мобильного приложения будет выглядеть так
Код <script> if(window.screen.width > 800) { document.write('<script src="/.s/src/moder_panel/moder_scripts.js"><\/script>'); } </script>
| Страна: (RU) |
| |
Kosten | Вторник, 24 Октября 2017, 22:07 | Сообщение 6 |
| workman, зачем скрипт ставить, когда можно none обойтись.
| Страна: (RU) |
| |
workman | Вторник, 24 Октября 2017, 22:09 | Сообщение 7 |
| 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 Октября 2017, 22:37 | Сообщение 8 |
| Цитата workman ( ) Блоки показываются и скрываются именно так Вот это и хотел узнать, хотя там 3 вопроса.
| Страна: (RU) |
| |
workman | Вторник, 24 Октября 2017, 23:04 | Сообщение 9 |
| Цитата Kosten ( ) хотя там 3 вопроса. Я ответил сразу на них одним)) Здесь медиа указаны именно для работы с мобилками. Или я не понял вопроса? Сформулируй
| Страна: (RU) |
| |
Kosten | Вторник, 24 Октября 2017, 23:24 | Сообщение 10 |
| Попробую сейчас вид материала адаптивным сделать.
| Страна: (RU) |
| |
workman | Вторник, 24 Октября 2017, 23:25 | Сообщение 11 |
| Цитата Kosten ( ) Попробую сейчас вид материала адаптивным сделать Попробуй... Если что я на подхвате ))
| Страна: (RU) |
| |
Kosten | Вторник, 24 Октября 2017, 23:34 | Сообщение 12 |
| workman, нужно отступ с правой стороны сделать?
Когда на узком экране, то впритык идет, на левой все нормально.
http://pluton.clan.su/
| Страна: (RU) |
| |
Kosten | Вторник, 24 Октября 2017, 23:44 | Сообщение 13 |
| Вот такая тема.
| Страна: (RU) |
| |
workman | Среда, 25 Октября 2017, 00:11 | Сообщение 14 |
| Kosten,
Код .block_wid { width: auto; float: none; margin: 0; }
Сообщение отредактировал workman - Среда, 25 Октября 2017, 00:21 | Страна: (RU) |
| |
Kosten | Среда, 25 Октября 2017, 00:36 | Сообщение 15 |
| workman, что то не понял, нужно поменять?
| Страна: (RU) |
| |