Адаптивная верстка шаблона

@Lynatik001 · Регистрация: 28.09.2012

Студворк — интернет-сервис помощи студентам

Хай народ. что сейчас юзают для адаптивной верстки(я не про bootstrap, flex box,grid). А про задание размеров текста. - блоков.
Если верстать по макету.

Был один пример что я оочень долго парился. макет шаблона был на (сайте фигма) сделан. И вот, я раньше не верстал по макетам, я брал размеры картинки в пикселях от туда и давал ей width в vw(приблизительно такой же) - вышло неплохо.

Видел где то народ в пикселях верстал, а потом как то эти пиксели делил. - типа поставил где то такой то размер пикселя. и весь текст на столько то вырос или уменьшился на странице.

у меня для лендига с 2 страницами. 1.6к строк. я афигел, когда менял кучу размеров разного текста(для телефона а потом еще и для планшета)

подскажете может способы которые бы намного бы ускорили и намного проще было (с данными подходами) верстать, и потом адаптировать под телефоны и планшеты(с минимум усилий, а то пол кода в style.css занимает медиа запрос с стилями для изменения размера текста, или еще чего)

@novichek_1905 · 05.12.2019, 18:18

Сообщение от Lynatik001

намного бы ускорили и намного проще было (с данными подходами) верстать

Нужен широкий второй монитор. в нём три окна браузера, с включенной отладкой под мобильный. Соотвественно телефон, планшет, пк. И лайврелоад. Код вы писать будете. максимум что может ускорить, это использование препроцессоров и миксинов. Если дизайн сложный, то кода будет много соотвественно.

@Lynatik001 · 05.12.2019, 20:06 **[ТС]**

Сообщение от novichek_1905

Нужен широкий второй монитор. в нём три окна браузера, с включенной отладкой под мобильный. Соотвественно телефон, планшет, пк. И лайврелоад. Код вы писать будете. максимум что может ускорить, это использование препроцессоров и миксинов. Если дизайн сложный, то кода будет много соотвественно.

Я говорю о базовых вещах. типа что описал выше. где css например намного меньше прийдется по идее писать.

А еще хотел создать тему но она по идее называтся будет так же. меня интересует медиа запросы. для того что бы можно было называть сайт адаптивным хватит ли 3 запроса?

CSS
1
2
3
4
обычные стили для пк.
@media (max-width: 768px)  {тут для планшета}
 
@media (max-width: 360px){тут для телефона}

как по мне я сделал не правильно. ибо со своего редмика нот 7 показывает мне расширение планшета. - да и другие телефоны в дебаге смотрел, тоже не выводит дизайн для планшетов
Да уже лучше спросить тогда по размерам и парядку указания и "max-width" и тд.

Добавлено через 1 час 16 минут
+ например мне щас при редактировании очередного стиля. по поиску фразы не всегда понятно под какой медиазапрос находит класс. у меня он например перевызван и в планшете и в телефоне, и в десктопе. и приходится время тоже тратить что бы листать в вверх и смотреть обявление медиа запроса. есть уже решения которые уже давно используются? ну например розделить на 3 файла и подгружать в style css их?

@gogolik · 06.12.2019, 09:08

Сообщение от Lynatik001

для того что бы можно было называть сайт адаптивным хватит ли 3 запроса?

Нет. У меня в самой простой сетке их 6.
Ну и если не хочется писать много запросов - 360 для телефона мало, ставьте 639. Для планшетов 1023.

@Lynatik001 · 06.12.2019, 14:40 **[ТС]**

Сообщение от gogolik

Нет. У меня в самой простой сетке их 6.
Ну и если не хочется писать много запросов - 360 для телефона мало, ставьте 639. Для планшетов 1023.

спасибо заметил.

@media (max-width: 1023px) {тут для планшета}

@media (max-width: 639px){тут для телефона}
ммм....
а свой пример скинете? и для чего столько медиазапросов. если текст и блоки зависят от vw или там %, или там rem.
тогда по идее много не надо менять?)

@gogolik · 06.12.2019, 15:00

Lynatik001, <639, <1023, 640-1023, 640-1599, 1024-1599, 1600+. И это только ширина, на некоторых проектах можно упороться и за высоту, ориентацию экрана, плотность пикселей и т.д.
Одними процентами и vw не обойдёшься, чтобы создать идеальную адаптивность. Так или иначе, придётся некоторые моменты подгонять на определённых разрешениях.

@Lynatik001 · 06.12.2019, 15:19 **[ТС]**

Сообщение от gogolik

Lynatik001, <639, <1023, 640-1023, 640-1599, 1024-1599, 1600+. И это только ширина, на некоторых проектах можно упороться и за высоту, ориентацию экрана, плотность пикселей и т.д.
Одними процентами и vw не обойдёшься, чтобы создать идеальную адаптивность. Так или иначе, придётся некоторые моменты подгонять на определённых разрешениях.

что да то да. но я бы не упаривался так. когда за любой лендос или сайт. платят по 500р-3000р там например. При этом например я хз как конкурировать с теми, что пишут что сделают сайт за 1 день и за копейки)). так как репы нету, а на каждый заказ на фрилансе, сразу по 10 чел отписываются)

@novichek_1905 · 06.12.2019, 18:40

Lynatik001, собирайте на bootstrap. Будет вам и адаптив и скорость разработки.

@gogolik · 06.12.2019, 23:19

Lynatik001, ну, оно понятно. Но у меня нет таких проектов просто-напросто))) а когда были - уже была удобная для меня сетка (не бутстрап, но и не своя), что в разы ускоряло разработку.

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@Lynatik001 48 / 40 / 15 Регистрация: 28.09.2012 Сообщений: 818

	Адаптивная верстка шаблона 04.12.2019, 23:10. Показов 1195. Ответов 8 Метки нет (Все метки) Хай народ. что сейчас юзают для адаптивной верстки(я не про bootstrap, flex box,grid). А про задание размеров текста. - блоков. Если верстать по макету. Был один пример что я оочень долго парился. макет шаблона был на (сайте фигма) сделан. И вот, я раньше не верстал по макетам, я брал размеры картинки в пикселях от туда и давал ей width в vw(приблизительно такой же) - вышло неплохо. Видел где то народ в пикселях верстал, а потом как то эти пиксели делил. - типа поставил где то такой то размер пикселя. и весь текст на столько то вырос или уменьшился на странице. у меня для лендига с 2 страницами. 1.6к строк. я афигел, когда менял кучу размеров разного текста(для телефона а потом еще и для планшета) подскажете может способы которые бы намного бы ускорили и намного проще было (с данными подходами) верстать, и потом адаптировать под телефоны и планшеты(с минимум усилий, а то пол кода в style.css занимает медиа запрос с стилями для изменения размера текста, или еще чего) 0

@gogolik Супер-модератор 3959 / 2075 / 832 Регистрация: 13.03.2010 Сообщений: 6,841
	06.12.2019, 15:00
	Lynatik001, <639, <1023, 640-1023, 640-1599, 1024-1599, 1600+. И это только ширина, на некоторых проектах можно упороться и за высоту, ориентацию экрана, плотность пикселей и т.д. Одними процентами и vw не обойдёшься, чтобы создать идеальную адаптивность. Так или иначе, придётся некоторые моменты подгонять на определённых разрешениях. 1

@novichek_1905 469 / 334 / 144 Регистрация: 16.02.2018 Сообщений: 930
	06.12.2019, 18:40
	Lynatik001, собирайте на bootstrap. Будет вам и адаптив и скорость разработки. 0

@gogolik Супер-модератор 3959 / 2075 / 832 Регистрация: 13.03.2010 Сообщений: 6,841
	06.12.2019, 23:19
	Lynatik001, ну, оно понятно. Но у меня нет таких проектов просто-напросто))) а когда были - уже была удобная для меня сетка (не бутстрап, но и не своя), что в разы ускоряло разработку. 0