Страница 3 из 3«123
Форум про uCoz » Все для вебмастера » Начинающий Вебмастер » Адаптивная верстка для стандартных экранов
Адаптивная верстка для стандартных экранов
Kosten
Дата: Понедельник, 30.10.2017, 19:19 | Сообщение # 31
Администраторы
Сообщений:15798
Награды: 51


По кнопке, уже немного начал понимать, чтоб оставалась.
Страна: (RU)
Kosten
Дата: Вторник, 31.10.2017, 01:08 | Сообщение # 32
Администраторы
Сообщений:15798
Награды: 51


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

Как пример вид материала.

Прикрепления: 4450411.png(93Kb)
Страна: (RU)
-SAM-
Дата: Вторник, 31.10.2017, 02:39 | Сообщение # 33
Проверенные
Сообщений:288
Награды: 14


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

Сама суть записи стилей, что однозначно новичкам понято чтобы было, вот:

  • Min-Width - минимальная ширина устройства, при которой стиль будет срабатывать (от указанной ширины и выше);
  • Max-Width - соответственно максимальная ширина, до порога которой стиль действует.

Комбинация min и max в одной записи применяется лишь для устройств определенной (фиксированной) ширины, как в первом посте темы примеры привели.

Если уж делать там кнопку, то сначала ее в исходный код материала прописать, стиль display:none задать, а после медийный стиль навесить через max-width и сообщить кнопке display:block / table и т.п. (и !important, если сам стиль none не в общих стилях, а прям инлайн-стилем в коде вида материалов у кнопки - это уже нюансы).


Страна: (UA)
Kosten
Дата: Вторник, 31.10.2017, 05:25 | Сообщение # 34
Администраторы
Сообщений:15798
Награды: 51


-SAM-, этот вид как пример. Просто есть вид материала по дизайн, что нет у него кнопки и заходят через название или изображение, но вот с мобильных лучше через кнопку, и чтоб она автоматически появлялась на гаджетах, мобильных аппаратах, а на широком экране, все по умолчанию.
Страна: (RU)
Kosten
Дата: Суббота, 11.11.2017, 20:56 | Сообщение # 35
Администраторы
Сообщений:15798
Награды: 51


Хотите быстро и без особого труда сделать мобильную версию сайта? Тогда воспользуйтесь этим сниппетом.

Код
/* Смартфоны (портретный и ландшафтный режимы) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Смартфоны (ландшафтный режим) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Смартфоны (портретный режим) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (портретный и ландшафтный режимы) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (ландшафтный режим) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (портретный режим) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}

/* Пк и ноутбуков ----------- */
@media only screen and (min-width : 1224px) {
/* Styles */
}

/* Больших экранов ----------- */
@media only screen and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}


Можно прописать разные стили в отдельные файлы для каждого девайса, например.

Код
<head>
<link rel="stylesheet" href="css/smartphone.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)">
<link rel="stylesheet" href="css/smartphone-landscape.css" media="only screen and (min-width : 321px)">
<link rel="stylesheet" href="css/smartphone-portrait.css" media="only screen and (max-width : 320px)">
<link rel="stylesheet" href="css/ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)">
<link rel="stylesheet" href="css/ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)">
<link rel="stylesheet" href="css/ipad-portrait.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)">
<link rel="stylesheet" href="css/widescreen.css" media="only screen and (min-width : 1824px)">
<link rel="stylesheet" href="css/iphone4.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)">
</head>


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

Код
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">  
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
<meta name="HandheldFriendly" content="true">
Страна: (RU)
Форум про uCoz » Все для вебмастера » Начинающий Вебмастер » Адаптивная верстка для стандартных экранов
Страница 3 из 3«123
Поиск: