|
Адаптивная верстка для стандартных экранов
|
|
| Kosten | Понедельник, 30 Октября 2017, 19:19 | Сообщение 31 |
| По кнопке, уже немного начал понимать, чтоб оставалась.
| | [ RU ] |
| |
| Kosten | Вторник, 31 Октября 2017, 01:08 | Сообщение 32 |
|
| Как можно вписать на мобильной версий кнопку далее, что изначально по умолчанию не установлена и только на гаджетах будет появляться.
Как пример вид материала.
| | [ RU ] |
| |
| -SAM- | Вторник, 31 Октября 2017, 02:39 | Сообщение 33 |
| Kosten, в данном виде материалов смотреться не будет, поскольку там не нужно этой кнопке вовсе. В предыдущем виде материалов, что разбирали - подрезка описания была по высоте блока, что описание шло, но визуально скрывалось, делалась кнопка читать далее... в этом - просто клик на заглавие, чтобы читать не далее, а действительно полный материал... как и посредством клика на постер в материала - ведет в материал, а не увеличивается картинка.
Сама суть записи стилей, что однозначно новичкам понято чтобы было, вот:
- Min-Width - минимальная ширина устройства, при которой стиль будет срабатывать (от указанной ширины и выше);
- Max-Width - соответственно максимальная ширина, до порога которой стиль действует.
Комбинация min и max в одной записи применяется лишь для устройств определенной (фиксированной) ширины, как в первом посте темы примеры привели.
Если уж делать там кнопку, то сначала ее в исходный код материала прописать, стиль display:none задать, а после медийный стиль навесить через max-width и сообщить кнопке display:block / table и т.п. (и !important, если сам стиль none не в общих стилях, а прям инлайн-стилем в коде вида материалов у кнопки - это уже нюансы).
Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи в ответах на "Вопросы про uCoz".
| | [ UA ] |
| |
| Kosten | Вторник, 31 Октября 2017, 05:25 | Сообщение 34 |
|
| -SAM-, этот вид как пример. Просто есть вид материала по дизайн, что нет у него кнопки и заходят через название или изображение, но вот с мобильных лучше через кнопку, и чтоб она автоматически появлялась на гаджетах, мобильных аппаратах, а на широком экране, все по умолчанию.
| | [ RU ] |
| |
| Kosten | Суббота, 11 Ноября 2017, 20:56 | Сообщение 35 |
|
| Хотите быстро и без особого труда сделать мобильную версию сайта? Тогда воспользуйтесь этим сниппетом.
Код /* Смартфоны (портретный и ландшафтный режимы) ----------- */
@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, 20:27 | Сообщение 36 |
|
| Чтоб понятно было, под какие носителе нужно выставлять 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 ] |
| |
