19:55 

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

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

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

Комментарии
2019-02-15 в 22:02 

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

2019-02-15 в 23:14 

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

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


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


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

2019-02-16 в 03:37 

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



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

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 в коде это всё заработает на мобилках как надо :alles:

2019-02-16 в 11:41 

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

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

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


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

2019-02-16 в 12:45 

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


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



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

2019-02-16 в 12:58 

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

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

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

Бывает :laugh:

2019-02-16 в 15:39 

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

Комментирование для вас недоступно.
Для того, чтобы получить возможность комментировать, авторизуйтесь:
 
РегистрацияЗабыли пароль?

@CSS — стилизация дневников

главная