Страница 1 из 3123»
Форум про uCoz » Все для вебмастера » Начинающий Вебмастер » Адаптивная верстка для стандартных экранов
Адаптивная верстка для стандартных экранов
workman
Дата: Вторник, 24.10.2017, 12:42 | Сообщение # 1
Гл. Модератор
Сообщений:1696
Награды: 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
Гл. Модератор
Сообщений:1696
Награды: 8


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


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


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

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
Гл. Модератор
Сообщений:1696
Награды: 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
Администраторы
Сообщений:15797
Награды: 51


workman, зачем скрипт ставить, когда можно none обойтись.
Страна: (RU)
workman
Дата: Вторник, 24.10.2017, 22:09 | Сообщение # 7
Гл. Модератор
Сообщений:1696
Награды: 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
Администраторы
Сообщений:15797
Награды: 51


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

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


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

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


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


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

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


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

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

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


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

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


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


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


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


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