|
Адаптивная верстка для стандартных экранов
|
|
| workman | Вторник, 24 Октября 2017 | Сообщение 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 | Сообщение 2 |
|
| Отключаем ненужные скрипты при мобильном просмотре сайта таким образом
Код <script>
if(window.screen.width > 800) {
document.write('<script src="путь_к_скрипту.js"><\/script>');
}
</script> | | Страна: (RU) |
| |
| Kosten | Вторник, 24 Октября 2017 | Сообщение 3 |
| workman, а как их отключать?
| | Страна: (RU) |
| |
| Kosten | Вторник, 24 Октября 2017 | Сообщение 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 | Сообщение 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 | Сообщение 6 |
|
| workman, зачем скрипт ставить, когда можно none обойтись.
| | Страна: (RU) |
| |
| workman | Вторник, 24 Октября 2017 | Сообщение 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 | Сообщение 8 |
|
| Цитата workman (  ) Блоки показываются и скрываются именно так
Вот это и хотел узнать, хотя там 3 вопроса. 
| | Страна: (RU) |
| |
| workman | Вторник, 24 Октября 2017 | Сообщение 9 |
|
| Цитата Kosten ( ) хотя там 3 вопроса.
Я ответил сразу на них одним)) Здесь медиа указаны именно для работы с мобилками. Или я не понял вопроса? Сформулируй
| | Страна: (RU) |
| |
| Kosten | Вторник, 24 Октября 2017 | Сообщение 10 |
|
| Попробую сейчас вид материала адаптивным сделать. 
| | Страна: (RU) |
| |
| workman | Вторник, 24 Октября 2017 | Сообщение 11 |
|
| Цитата Kosten ( ) Попробую сейчас вид материала адаптивным сделать
Попробуй... Если что я на подхвате ))
| | Страна: (RU) |
| |
| Kosten | Вторник, 24 Октября 2017 | Сообщение 12 |
|
| workman, нужно отступ с правой стороны сделать?
Когда на узком экране, то впритык идет, на левой все нормально.
http://pluton.clan.su/
| | Страна: (RU) |
| |
| Kosten | Вторник, 24 Октября 2017 | Сообщение 13 |
|
| Вот такая тема.
| | Страна: (RU) |
| |
| workman | Среда, 25 Октября 2017 | Сообщение 14 |
|
| Kosten,
Код .block_wid {
width: auto;
float: none;
margin: 0;
}
Сообщение отредактировал
workman - Среда, 25 Октября 2017, 00:21 | | Страна: (RU) |
| |
| Kosten | Среда, 25 Октября 2017 | Сообщение 15 |
|
| workman, что то не понял, нужно поменять?
| | Страна: (RU) |
| |
