Старый 12.11.2016, 17:25   #51
Дикий
 
Аватар для D.iK.iJ
 
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,523
Вес репутации: 288
D.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущее
Lightbulb

Чуть не поседел на днях.
Не работает td {display: block;} и все тут (в Edge, IE 11, Сафари и Фаерфоксе).

А это ведь чуть ли не самый важный прием, работающий для теплых ламповых табличных сайтов!

Решения
1) Добавить td ячейкам width: 100%, так как иногда в таблицах указывается собственная ширина и высота колонок.

2) Прописать стили для остальных элементов таблицы: table, tbody, tr. Не полностью уверен в причинах влияния table и tbody, так как встречалось редко, но вот tr (строки таблицы) довольно часто мешают. Особенно при display: inline-block;

3) td {float: left; width: 100%;} - оказался рабочим вариантом сегодня. Именно float: left позволил ячейкам таблицы нормально переноситься друг под друга.

4) Экзотический вариант с table {position: relative;} td {position: absolute;} - слишком много мороки.
Единственный подходящий случай - если нужно поменять порядок текста и картинки местами. Но и там position: absolute применяется только к одному элементу, а второму блоку просто добавляется отступ.
D.iK.iJ вне форума   Ответить с цитированием
Старый 13.01.2017, 16:18   #52
Дикий
 
Аватар для D.iK.iJ
 
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,523
Вес репутации: 288
D.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущее
По умолчанию

Кстати, 5 вариант для не работающего td {display: block;} - поменять доктайп на <!DOCTYPE html>



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

Единственное, справиться без PHP не получилось.

1) ?mobile - закрыть от индексации в robots! Без него на мобильных - адский кеш, с которым не справиться.
2) Лучше не убирать адаптивные стили, а убирать только <meta name=viewport content="width=device-width, initial-scale=1">
Но можно и то и то.
3) Кнопка показывается на адаптивной версии. Или на полной, если есть куки. Связано с работой meta name=viewport. Иначе не перейти обратно будет.
4) Можно добавить ширину просмотра для полной версии. Например: <meta name="viewport" content="width=1300, initial-scale=1">

В шапку сайта (оставил место под эксперименты):
Цитата:
<? if (isset($_COOKIE['mob']) and $_COOKIE['mob']=="no") { ?>
<? } else { ?>
<meta name=viewport content="width=device-width, initial-scale=1">
<? } ?>
Кнопка для футера, перед </body>. Стили можно вынести в отдельный файл. А вот скрипт - нет. только если добавлять срабатывание только после загрузки.
Цитата:
<style>
#mob {margin: 0 auto !important; font-size: 1rem; width: 100%; height: 51px; text-decoration: none; line-height: 51px; background-color: #3292be; border-color: #007095; color: #fff; transition: background-color 300ms ease-out; text-align: center;}
#mob:hover, #mob:focus {background-color: #007095;}
</style>

<? if (isset($_COOKIE['mob']) and $_COOKIE['mob']=="no") { ?>
<a style="display: none; width: width: 100%;" href="?mobile" id="mob" onclick="SetCookie('mob=yes', 0);">Перейти на мобильную версию</a>
<? }else{ ?>
<a style="display: none; width: 100%;" href="?mobile=no" id="mob" onclick="SetCookie('mob=no', 30);">Перейти на полную версию</a>
<? } ?>

<script>
//Ставим Куки
function SetCookie(id, days){
var ws=new Date();
ws.setDate((days-0+ws.getDate()));
document.cookie=id+"; path=/; expires="+ws.toGMTString();
}
if (document.cookie.indexOf("mob=no") != -1 || document.getElementsByTagName("body")[0].offsetWidth<=775) {
document.getElementById("mob").style.display='bloc k';
}
</script>
D.iK.iJ вне форума   Ответить с цитированием
Старый 13.01.2017, 21:32   #53
дУхтор
 
Аватар для dasinok
 
Регистрация: 03.02.2009
Адрес: неРезиновая
Сообщений: 2,521
Вес репутации: 307
dasinok - прекрасное будущееdasinok - прекрасное будущееdasinok - прекрасное будущееdasinok - прекрасное будущееdasinok - прекрасное будущееdasinok - прекрасное будущееdasinok - прекрасное будущееdasinok - прекрасное будущееdasinok - прекрасное будущееdasinok - прекрасное будущееdasinok - прекрасное будущее
По умолчанию

D.iK.iJ, спасибо за инфу, что выложил. Ох уже эта адаптивная и мобильная... тянул тянул, но все же надо делать, как ни крути. Сижу курю.
__________________
Однако...
dasinok вне форума   Ответить с цитированием
Старый 25.01.2017, 00:13   #54
Дикий
 
Аватар для D.iK.iJ
 
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,523
Вес репутации: 288
D.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущее
Lightbulb

Цитата:
Сообщение от dasinok Посмотреть сообщение
D.iK.iJ, спасибо за инфу, что выложил. Ох уже эта адаптивная и мобильная... тянул тянул, но все же надо делать, как ни крути. Сижу курю.
Будут вопросы - могу подсказать.

Все немного меняется. Я сейчас начинаю с подключения стилей
Цитата:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/adaptive.css" type="text/css">
Тут можно добавить media="screen and (max-width: 777px)" прямо в вызов стилей.


И самого adaptive.css:

Цитата:
@media screen and (max-width: 775px) {
img {max-width: 100% !important; height: auto !important;}
iframe, textarea, input, button, submit, select, video, object, embed {max-width: 99% !important;}
table, span, div, ins {max-width: 100% !important;}


}
@media screen and (max-width: 500px) {
//body, tbody {-moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}
}
@media screen and (max-width: 310px) {
//td {word-break: break-all;}
//th {word-break: break-all;}
}
Для примера добавил (но закомментировал) переносы слов при 500px и ниже (для некоторых браузеров) и разрыв слов по буквам в таблицах.
Использую редко, но вдруг понадобится.
D.iK.iJ вне форума   Ответить с цитированием
Старый 03.02.2017, 20:24   #55
Дикий
 
Аватар для D.iK.iJ
 
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,523
Вес репутации: 288
D.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущее
Smile

Небольшой "юбилей" - 100 сайтов в портфолио по адаптивному дизайну!

Ненавижу лендинги, но купил: адаптивная-верстка.рф

Огромное спасибо всем заказчикам! Особенно - за терпение.
Без вас бы этого не было.
D.iK.iJ вне форума   Ответить с цитированием
Старый 03.02.2017, 22:12   #56
дУхтор
 
Аватар для dasinok
 
Регистрация: 03.02.2009
Адрес: неРезиновая
Сообщений: 2,521
Вес репутации: 307
dasinok - прекрасное будущееdasinok - прекрасное будущееdasinok - прекрасное будущееdasinok - прекрасное будущееdasinok - прекрасное будущееdasinok - прекрасное будущееdasinok - прекрасное будущееdasinok - прекрасное будущееdasinok - прекрасное будущееdasinok - прекрасное будущееdasinok - прекрасное будущее
По умолчанию

Круть )))
__________________
Однако...
dasinok вне форума   Ответить с цитированием
Старый 20.03.2017, 15:54   #57
Дикий
 
Аватар для D.iK.iJ
 
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,523
Вес репутации: 288
D.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущее
Lightbulb

Я бываю крайне туп. Например, вообще забыл про просто спасительное для адаптивной верстки box-sizing: border-box;
Цитата:
Согласно спецификации CSS ширина блока складывается из ширины контента (width), значений отступов (margin), полей (padding) и границ (border). Аналогично обстоит и с высотой блока. Свойство box-sizing позволяет изменить этот алгоритм, чтобы свойства width и height задавали размеры не контента, а размеры блока.
В общем, если у блока есть внутренние отступы (padding) и рамка, все рамно можно ставить width: 100%, еслииспользовать box-sizing: border-box; - просто идеально для картинок (?кто вообще ставит им padding?) и форм, которым прописать width: auto без извращений не получится.


Думаю, шаблон для начала работы можно чуть обновить:
Цитата:
@media screen and (max-width: 775px) {
img {max-width: 100% !important; height: auto !important; box-sizing: border-box;}
iframe, textarea, input, button, submit, select, video, object, embed {max-width: 100% !important; box-sizing: border-box;}
table, span, div, ins {max-width: 100% !important;}

}
@media screen and (max-width: 500px) {
td, th{word-wrap: break-word; -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}
}
D.iK.iJ вне форума   Ответить с цитированием
Старый 28.04.2017, 19:26   #58
Дикий
 
Аватар для D.iK.iJ
 
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,523
Вес репутации: 288
D.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущее
Lightbulb

Я тут нашел скрипт выдвижения меню свайпом (листанием вбок) на мобильном.
Абсолютно бесплатно могу добавить всем, кому делал сайты с выдвигающимся меню. Или кто использует мой скрипт адаптивного меню.

Ну или можете добавить сами. Внутри уже есть вызов функций buter(); zakr(); при листании на 200 влево или вправо (xAbs > 200 || yAbs > 200).

Цитата:
//Свайп
var initialPoint;
var finalPoint;
document.addEventListener('touchstart', function(event) {
initialPoint=event.changedTouches[0];
}, false);
document.addEventListener('touchend', function(event) {
finalPoint=event.changedTouches[0];
var xAbs = Math.abs(initialPoint.pageX - finalPoint.pageX);
var yAbs = Math.abs(initialPoint.pageY - finalPoint.pageY);
if (xAbs > 200 || yAbs > 200) {
if (xAbs > yAbs) {
if (finalPoint.pageX < initialPoint.pageX){
/*СВАЙП ВЛЕВО*/ zakr();
}
else{
/*СВАЙП ВПРАВО*/ buter();
}}
else {
if (finalPoint.pageY < initialPoint.pageY){
/*СВАЙП ВВЕРХ*/
}
else{
/*СВАЙП ВНИЗ*/
}}}}, false);
D.iK.iJ вне форума   Ответить с цитированием
Старый 01.05.2017, 21:34   #59
Мастер
 
Регистрация: 17.07.2012
Адрес: Москва
Сообщений: 783
Вес репутации: 126
qkowlew - прекрасное будущееqkowlew - прекрасное будущееqkowlew - прекрасное будущееqkowlew - прекрасное будущееqkowlew - прекрасное будущееqkowlew - прекрасное будущееqkowlew - прекрасное будущееqkowlew - прекрасное будущееqkowlew - прекрасное будущееqkowlew - прекрасное будущееqkowlew - прекрасное будущее
По умолчанию

Если у вас на сайте используется карта Яндекса через яваскриптовое API api-maps.yandex.ru/2.1 примерно вот в таком стиле:


то сделать её невылазящей за пределы контейнера, в который она помещена, имеет смысл добавлением в стили вот такой строки:
Код:
.ymaps-2-1-50-map { width: 100% !important; max-width: 100%; overflow: hidden; }
Это на сегодняшний день. Понятно, что по мере изменений в API это может сдвинуться.
qkowlew вне форума   Ответить с цитированием
Старый 02.05.2017, 10:35   #60
Дикий
 
Аватар для D.iK.iJ
 
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,523
Вес репутации: 288
D.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущее
Thumbs up

Цитата:
Сообщение от qkowlew Посмотреть сообщение
Код:
.ymaps-2-1-50-map { width: 100% !important; max-width: 100%; overflow: hidden; }
Да, кстати. С этой картой бывает весело. А если карт много, бывает проще зайти от блока родителя.
Например, так:
Цитата:
div > ymaps {width: 100% !important;}
И при этом лучше никогда не писать просто ymaps {width: 100% !important; max-width: 100% !important;} - перекорежит кнопки в самой карте.
D.iK.iJ вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Оптимизация сайта koctik Общие вопросы оптимизации 5 13.07.2013 15:23
SEO оптимизация сайта birja Общие вопросы оптимизации 2 13.04.2012 10:54
Задачка... 3 строчки на JS. Хелп! MonAmur Разработка и сопровождение сайтов 3 08.10.2009 14:50
Оптимизация сайта sunplant Общие вопросы оптимизации 9 25.11.2008 09:15
оптимизация сайта :( pha Яндекс 1 10.12.2007 15:54


Часовой пояс GMT +3, время: 18:56.