Адаптивная верстка

@stan07 · Регистрация: 01.09.2011

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

Здравствуйте Уважаемые форумчане!
Прошу оценить адаптивную верстку.

@курбан даллас · 28.01.2016, 19:33

Главная страница как то нечетко ,остальное нормально,я так думаю

@stan07 · 28.01.2016, 19:39 **[ТС]**

курбан даллас,
Какая главная это лендинг ) Может вы имели введу шапку\1 блок?

@курбан даллас · 28.01.2016, 20:55

Как "главная" я имею ввиду страницу попадаешь сначала ,там эти пятна оранжевые не совсем понятные

@stan07 · 28.01.2016, 21:04 **[ТС]**

курбан даллас,
Так в ТЗ было (это, типа, параллакс эффект, мышкой по экрану поводите)

@Htext · 29.01.2016, 20:55

Я практически всегда избегаю подобные сайты. Адаптивная-то может, и работает. Но вот все остальное... как бы это сказать. Не хочется там долго задерживаться. Без обид.

@siyanie · 30.01.2016, 14:47

Мне всегда нравился http://thewitcher.com/witcher3 и панель переключения с права

@maxvel0007 · 30.01.2016, 15:43

Псевдо-адаптив. Учиться и ещё раз учиться, очень много чего не должно быть в такой вёрстке, начиная от менюшки, заканчивая просмотром роликов.

@stan07 · 31.01.2016, 12:01 **[ТС]**

Htext,
maxvel0007,
спасибо за ответы, а что конкретно не так?

@Денис91 · 31.01.2016, 14:17

Блин, ну эти пятна "вырви-глаз". Рыгануть хочется)

@maxvel0007 · 31.01.2016, 19:07

1. видео посмотреть в на полный экран не возможно.
2. Форма не ровная: Подать заявку!
3. на малых экранах менюшка закрывает картинку.
4. Текст не по центр, если вообще было центрирование его, но он не с лева и не с права: Аттракцион виртуальной реальности
5. Готовые варианты смотрятся красиво только на большом мониторе, на маленьких это ужас.
6. и тд и тп

@stan07 · 31.01.2016, 20:11 **[ТС]**

maxvel0007,
cпасибо, учту!

@Syrka · 01.02.2016, 12:58

Для смартфонов как-то так , я думаю прописать нужно

CSS
1
2
3
4
5
6
7
8
9
@media all and (max-width:650px) {
.block5 .right, .block5 .left{
  display: block;
  float: none;
  margin: 0 auto;
  text-align: center;
  width: 95%;
}
}

Тогда все по центру, и без горизонтального скрола будет.

@Cdelphi78 · 01.02.2016, 13:04

Сам лендинг, неплох, пусть и дизайн такой, а вот я не увидел адаптивности на мобильниках, или это так задумано.

@Syrka · 01.02.2016, 13:14

Да, с адаптивностью для мобильников нужно поработать.
Изображениям ширину в 100% поставить

@stan07 · 01.02.2016, 13:29 **[ТС]**

Cdelphi78,
Syrka,
А "для мобильников" это какая ширина ?
У меня мин.ширина 320px, горизонтального скрола нет, читабельно, что еще надо для адаптивной верстки не понимаю ?

@Cdelphi78 · 01.02.2016, 13:46

stan07, вот это место например, на айфоне 4, очень мелко, и еще кое где шрифт можно учеличить.

@Syrka · 01.02.2016, 14:00

А уменя на nokia lumia 520 и прокрутка горизонтальная и с изображениями полный раздрай.
Я на гаджете смотрю , а не на имитаторе, там не всегда точно.
А на имитаторе в хроме тоже прокрутка

@Cdelphi78 · 01.02.2016, 14:14

Syrka, Щас тоже гляну на гаджете, ну вроде как хром пока не подводил)

Добавлено через 45 секунд
И у вас не томесто, где три блока которые выше на скрине

Добавлено через 9 минут
Syrka, вот сейчас нормально вроде все)

@Syrka · 01.02.2016, 14:24

Короче поняла

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

@media all and (max-width:650px) { .block5 .right, .block5 .left{ display: block; float: none; margin: 0 auto; text-align: center; width: 95%; } }

писать не нужно.
нужно для

CSS
1
.block5 .left img{width:100%;}

задать.Тогда, все вроде на место встает.
А то в мобильнике, все как-то не стабильно.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@stan07 2 / 2 / 0 Регистрация: 01.09.2011 Сообщений: 156

	Адаптивная верстка 28.01.2016, 17:45. Показов 1933. Ответов 49 Метки нет (Все метки) Здравствуйте Уважаемые форумчане! Прошу оценить адаптивную верстку. 0

@курбан даллас 6 / 6 / 0 Регистрация: 10.12.2013 Сообщений: 115
	28.01.2016, 19:33
	Главная страница как то нечетко ,остальное нормально,я так думаю 0

@stan07 2 / 2 / 0 Регистрация: 01.09.2011 Сообщений: 156
	28.01.2016, 19:39 [ТС]
	курбан даллас, Какая главная это лендинг ) Может вы имели введу шапку\1 блок? 0

@курбан даллас 6 / 6 / 0 Регистрация: 10.12.2013 Сообщений: 115
	28.01.2016, 20:55
	Как "главная" я имею ввиду страницу попадаешь сначала ,там эти пятна оранжевые не совсем понятные 0

@stan07 2 / 2 / 0 Регистрация: 01.09.2011 Сообщений: 156
	28.01.2016, 21:04 [ТС]
	курбан даллас, Так в ТЗ было (это, типа, параллакс эффект, мышкой по экрану поводите) 0

@Htext 365 / 124 / 22 Регистрация: 08.01.2015 Сообщений: 1,418 Записей в блоге: 2
	29.01.2016, 20:55
	Я практически всегда избегаю подобные сайты. Адаптивная-то может, и работает. Но вот все остальное... как бы это сказать. Не хочется там долго задерживаться. Без обид. 0

@siyanie 13 / 13 / 7 Регистрация: 21.11.2015 Сообщений: 85
	30.01.2016, 14:47
	Мне всегда нравился http://thewitcher.com/witcher3 и панель переключения с права 0

@maxvel0007 грОмотей 239 / 175 / 17 Регистрация: 01.04.2011 Сообщений: 1,435
	30.01.2016, 15:43
	Псевдо-адаптив. Учиться и ещё раз учиться, очень много чего не должно быть в такой вёрстке, начиная от менюшки, заканчивая просмотром роликов. 0

@stan07 2 / 2 / 0 Регистрация: 01.09.2011 Сообщений: 156
	31.01.2016, 12:01 [ТС]
	Htext, maxvel0007, спасибо за ответы, а что конкретно не так? 0

@Денис91 0 / 0 / 0 Регистрация: 17.01.2016 Сообщений: 18
	31.01.2016, 14:17
	Блин, ну эти пятна "вырви-глаз". Рыгануть хочется) 0

@maxvel0007 грОмотей 239 / 175 / 17 Регистрация: 01.04.2011 Сообщений: 1,435
	31.01.2016, 19:07
	1. видео посмотреть в на полный экран не возможно. 2. Форма не ровная: Подать заявку! 3. на малых экранах менюшка закрывает картинку. 4. Текст не по центр, если вообще было центрирование его, но он не с лева и не с права: Аттракцион виртуальной реальности 5. Готовые варианты смотрятся красиво только на большом мониторе, на маленьких это ужас. 6. и тд и тп 0

@stan07 2 / 2 / 0 Регистрация: 01.09.2011 Сообщений: 156
	31.01.2016, 20:11 [ТС]
	maxvel0007, cпасибо, учту! 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,444
	01.02.2016, 13:04
	Сам лендинг, неплох, пусть и дизайн такой, а вот я не увидел адаптивности на мобильниках, или это так задумано. 0

@Syrka 9 / 9 / 5 Регистрация: 21.01.2016 Сообщений: 62
	01.02.2016, 13:14
	Да, с адаптивностью для мобильников нужно поработать. Изображениям ширину в 100% поставить 0

@stan07 2 / 2 / 0 Регистрация: 01.09.2011 Сообщений: 156
	01.02.2016, 13:29 [ТС]
	Cdelphi78, Syrka, А "для мобильников" это какая ширина ? У меня мин.ширина 320px, горизонтального скрола нет, читабельно, что еще надо для адаптивной верстки не понимаю ? 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,444
	01.02.2016, 13:46
	stan07, вот это место например, на айфоне 4, очень мелко, и еще кое где шрифт можно учеличить. Миниатюры 0

@Syrka 9 / 9 / 5 Регистрация: 21.01.2016 Сообщений: 62
	01.02.2016, 14:00
	А уменя на nokia lumia 520 и прокрутка горизонтальная и с изображениями полный раздрай. Я на гаджете смотрю , а не на имитаторе, там не всегда точно. А на имитаторе в хроме тоже прокрутка Миниатюры 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,444
	01.02.2016, 14:14
	Syrka, Щас тоже гляну на гаджете, ну вроде как хром пока не подводил) Добавлено через 45 секунд И у вас не томесто, где три блока которые выше на скрине Добавлено через 9 минут Syrka, вот сейчас нормально вроде все) 0