Правильная реализация вёрстки

@dima55501 · Регистрация: 14.07.2013

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

Добрый день. Сейчас занимаюсь изучением html/css. В общем то после изучения нескольких книг и видеоуроков общие впечатления сложились, сейчас хочу попробовать сделать что то с нуля. Но есть несколько тонкостей, которые так и не были освещены. Например я хочу, чтобы в будущем если зайти на сайт с смартфона/планшета, то масштаб автоматически подгонялся под нужный размер. Я правильно понимаю, что мне следует избегать константных значений размеров? Ну например поставить размер блока не 150px, а 30%. Также есть другой вопрос. Правильно ли сразу после <body> вставлять <div id="wrapper"> и задавать ему абсолютное позиционирование и ширину/высоту = 100%, чтобы сайт растягивался на весь экран? Заранее спасибо.

Velesthau · 14.06.2015, 15:18

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

Например я хочу, чтобы в будущем если зайти на сайт с смартфона/планшета, то масштаб автоматически подгонялся под нужный размер. Я правильно понимаю, что мне следует избегать константных значений размеров? Ну например поставить размер блока не 150px, а 30%.

Не обязательно. Еще часто используется @media: http://htmlbook.ru/css/value/media

Добавлено через 14 минут

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

Правильно ли сразу после <body> вставлять <div id="wrapper"> и задавать ему абсолютное позиционирование и ширину/высоту = 100%, чтобы сайт растягивался на весь экран?

Если ты с 100% для body сделаешь, то, полагаю, сайт так же будет на браузерное окно. Для чего именно див?

@dima55501 · 14.06.2015, 15:45 **[ТС]**

Velesthau, на многих сайтах я видел разметку, что идет один большой див и уже внутри него делается все остальное.

Velesthau · 14.06.2015, 16:08

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

на многих сайтах я видел разметку, что идет один большой див и уже внутри него делается все остальное.

Верстка везде бывает разная. И див не обязательно на всю страницу. Как контент предполагается располагать, такая и будет верстка. Если контент отцентрирован, то ширина уже может быть не 100%, а если сверху еще что-нибудь есть, то может быть в отдельном диве с отдельныи атрибутами.

@dima55501 · 14.06.2015, 20:56 **[ТС]**

Velesthau, ясно, спасибо за помощь.

Новые блоги и статьи Все статьи Все блоги /
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, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .

@dima55501 31 / 35 / 11 Регистрация: 14.07.2013 Сообщений: 146

	Правильная реализация вёрстки 14.06.2015, 14:51. Показов 1660. Ответов 4 Метки нет (Все метки) Добрый день. Сейчас занимаюсь изучением html/css. В общем то после изучения нескольких книг и видеоуроков общие впечатления сложились, сейчас хочу попробовать сделать что то с нуля. Но есть несколько тонкостей, которые так и не были освещены. Например я хочу, чтобы в будущем если зайти на сайт с смартфона/планшета, то масштаб автоматически подгонялся под нужный размер. Я правильно понимаю, что мне следует избегать константных значений размеров? Ну например поставить размер блока не 150px, а 30%. Также есть другой вопрос. Правильно ли сразу после <body> вставлять <div id="wrapper"> и задавать ему абсолютное позиционирование и ширину/высоту = 100%, чтобы сайт растягивался на весь экран? Заранее спасибо. 0

@dima55501 31 / 35 / 11 Регистрация: 14.07.2013 Сообщений: 146
	14.06.2015, 15:45 [ТС]
	Velesthau, на многих сайтах я видел разметку, что идет один большой див и уже внутри него делается все остальное. 0

@dima55501 31 / 35 / 11 Регистрация: 14.07.2013 Сообщений: 146
	14.06.2015, 20:56 [ТС]
	Velesthau, ясно, спасибо за помощь. 0

Правильная реализация вёрстки

Решение