Адаптивный дизайн

[dream city]

Есть ли способ сделать дизайн дневника адаптивным под мобильные устройства?

@темы: diaryCSS, основные блоки, Дизайн

Comments

[Кареглазый Демон]

Конечно, и не один... Можно задать враппер 1000 пикселей и меньше и все элементы внутри него встанут как нужно. Можно вообще его не трогать и все будет передвигаться само, как в бесплатнике. Зависит от задумки. У меня допустим за последние пару лет точно все оформления резиновые originaldesign.diary.ru/

[dream city]

Просто Демон, на мобильном устройстве дневник по ссылке содержит слишком много полей по краям, когда такой дневник на телефоне открываешь, страницу хочется увеличить, чтобы текст занимал всю ширину экрана:

в то же время, ваш дневник, наоборот, удобно выглядит на декстопе: текст записи не растягивается на весь экран (длинные строки было бы неудобно читать):

Таким образом для адаптивности мы хотим совершенное разного соотношения ширины текста к ширине экрана. у вас оно одинаковое.
Я знаю, что в целом можно использовать:

@media all and (not handheld) #page-c {width: 75%;}
@media all and (handheld) #page-c {width: 100%;}

(условно, конкрентно по вашей ссылке не применимо, потому это сообщество и хочется еще переместить имя автора и аватарку НАД текстом записи, а это я тут на пальцах не напишу)
+ мне хочется сделать шрифт на телефоне крупнее, а на компе меньше. опять же, я могла бы привязываться к ширине устройства, типу и другим доступным условиям @media, но все что идет после @media игнорируется, и я не могу найти другого решения.

[Tenno Seremel]

Вроде бы подобные блоки на дневниках работают:

@media all and (max-width: 640px) { .x { padding: 8px; } }

Прописываем любые разрешения и правила и смотрим что будет. Ну или дождаться нового дизайна.

dream city,

Deprecated media types: CSS2.1 and Media Queries 3 defined several additional media types (tty, tv, projection, handheld, braille, embossed, and aural), but they were deprecated in Media Queries 4 and shouldn't be used. The aural type has been replaced by speech, which is similar.

Насколько я понимаю, оно не взлетело. Остались только all, print, screen и speech.

EDIT: хотя не факт, что без meta viewport в коде это всё заработает на мобилках как надо

[dream city]

Tenno Seremel, не знала что handheld депрекейтед, спасибо! max-width я тоже пробовала - не работает. В настройках сохраняется, видно в сорсе:

(в целом код дибильный, я скопировала какой-то древний дизайн и переписывала нужные элементы, так и не добралась до наведения поряка
но инспектор этой настройки не видит:

хотя в принципе такая констурукция используется в journal даже видна в инспекторе:

upd: почитала про viewport: отсутствие его никак не влияет на работу @media, так что выходит - проблема не в нем

[dream city]

dream city, тукая с*ка, вот тупая с*ка! короче, я ЗАБЫЛА ВТОРЫЕ СКОБОЧКИ после условия. все заработало! осталось теперь рассчитать идеальные отступы и все будет круто. просто, чтобы это осталось здесь в истории, надо делать так:
Делаем ограничение на максимальную ширину блока с текстом, которое НЕ ПОВЛИЯЕТ на экраны меньше 982px (на мобилах дневник отркывается, как будто бы ширина страницы - 980px:

 @media (min-width: 982px) {
   #page-c { max-width: 700px !important; }
 }

Увеличить шрифт на мобилах:

 @media (max-width: 981px)
{
   #page-t {font-size: 4em !important;}
 }

Есть решение, которое позволить сделать то же самое (блок записи не растягивается на весь экран на десктопах), но без жесткого 700px (смысл в использовании процентов), но мне пока влом

[Tenno Seremel]

dream city, AFAIR, инспектор не показывает если не применяет.

На самом деле влияет. Без указания во viewport width=device-width мобильные браузеры используют виртуальное разрешение, насколько я помню. Другое дело насколько это важно в данном конкретном случае.

> я ЗАБЫЛА ВТОРЫЕ СКОБОЧКИ

Бывает

[dream city]

Tenno Seremel,

мобильные браузеры используют виртуальное разрешение

да, поэтому для дневников айфон выглядит как устройство с шириной экрана 980px. вот почему я привязалась именно к этой цифре в моем коде. из-за этого на компьютерах с шириной экрана 980px мой дневник будет выглдяеть так же, как на мобильных устройствах( без отступов по краям) и очень большим шрифтом. шрифт я увеличила, тоже из-за того, что у меня тут страница в 980px запихнута в экран телефона. в общем пришлось пренебречь компами с разрешением 980px, но я плохо себе представляю такие устройства в 2019 году