• Новые сообщения
  • Участники
  • Правила форума
  • Поиск
  • RSS
  • Страница 3 из 3
  • «
  • 1
  • 2
  • 3
Форум » Web-Раздел » Начинающему вебмастеру » Адаптивная верстка для стандартных экранов (Как сделать адаптивный стиль дизайн сайта под все разрешения)
Адаптивная верстка для стандартных экранов
Kosten
 		Понедельник, 30 Октября 2017 | Сообщение 31
Оффлайн
Администраторы
Сообщений:44356
Награды: 70
« 554 »
По кнопке, уже немного начал понимать, чтоб оставалась.
Страна: (RU)
Kosten
 		Вторник, 31 Октября 2017 | Сообщение 32
Оффлайн
Администраторы
Сообщений:44356
Награды: 70
« 554 »
Как можно вписать на мобильной версий кнопку далее, что изначально по умолчанию не установлена и только на гаджетах будет появляться.

Как пример вид материала.
Прикрепления: 4450411.png (93.0 Kb)
Страна: (RU)
-SAM-
 		Вторник, 31 Октября 2017 | Сообщение 33
Оффлайн
Друзья сайта
Сообщений:882
Награды: 40
« 595 »
Kosten, в данном виде материалов смотреться не будет, поскольку там не нужно этой кнопке вовсе. В предыдущем виде материалов, что разбирали - подрезка описания была по высоте блока, что описание шло, но визуально скрывалось, делалась кнопка читать далее... в этом - просто клик на заглавие, чтобы читать не далее, а действительно полный материал... как и посредством клика на постер в материала - ведет в материал, а не увеличивается картинка.

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

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

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

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


Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи в ответах на "Вопросы про uCoz".
Страна: (UA)
Kosten
 		Вторник, 31 Октября 2017 | Сообщение 34
Оффлайн
Администраторы
Сообщений:44356
Награды: 70
« 554 »
-SAM-, этот вид как пример. Просто есть вид материала по дизайн, что нет у него кнопки и заходят через название или изображение, но вот с мобильных лучше через кнопку, и чтоб она автоматически появлялась на гаджетах, мобильных аппаратах, а на широком экране, все по умолчанию.
Страна: (RU)
Kosten
 		Суббота, 11 Ноября 2017 | Сообщение 35
Оффлайн
Администраторы
Сообщений:44356
Награды: 70
« 554 »
Хотите быстро и без особого труда сделать мобильную версию сайта? Тогда воспользуйтесь этим сниппетом.

Код
/* Смартфоны (портретный и ландшафтный режимы) ----------- */
@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)
Kosten
 		Пятница, 17 Августа 2018 | Сообщение 36
Оффлайн
Администраторы
Сообщений:44356
Награды: 70
« 554 »
Чтоб понятно было, под какие носителе нужно выставлять media при адаптаций сайта.

Код
@media(min-width:0px) and (max-width:320px) {
    /* совсем маленькие экраны андроидов */
}

@media(min-width:321px) and (max-width:480px) {
    /* популярные разрешения смартфонов уже более позднего поколения андроид */
}

@media(min-width:481px) and (max-width:768px) {
    /* телефоны в перевернутом состоянии и некоторые планшеты */
}

@media(min-width:769px) and (max-width:992px) {
    /* планшеты */
}

@media(min-width:993px) and (max-width:1200px) {
    /* экраны некоторых ноутбуков и некоторых планшетов */
}
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Адаптивная верстка для стандартных экранов (Как сделать адаптивный стиль дизайн сайта под все разрешения)
  • Страница 3 из 3
  • «
  • 1
  • 2
  • 3
Поиск: