Как правильно верстать резиновый сайт?

@ajttajtt · Регистрация: 12.04.2014

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

Кто знает, подскажите, как правильно верстать сайт таким образом чтобы при уменьшенном экране сайт срезался с обеих сторон одинаково?

@-MaZaHaKa- · 13.09.2014, 19:25

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

CSS
1
2
3
4
5
@media screen and (max-width: 1000px) and (min-width: 800px) {
    body {
 
    }
}

Так положено делать только на очень крутых сайтах))

Stopy · 13.09.2014, 22:47

-MaZaHaKa-, правильно пишет, только он подразумевает несколько разных отображений вашего сайта. если вам нужно чтобы на экранах размером меньше чем 1000px вся верстка была на 100% экрана, то делаете медиа-запрос в css

CSS
1
2
3
4
5
6
7
@media screen and (max-width: 1000px){
      //всем блокам размер в %
      header{
       width: 100%;
       height: 100%;
      }
}

@ajttajtt · 14.09.2014, 13:42 **[ТС]**

Спасибо. А почему максимальная ширина 1000 px, у меня монитор например 1600 px, мне 1600 писать?

Stopy · 14.09.2014, 14:19

ajttajtt, чтобы не появлялось горизонтальной прокрутки если экран посетителя меньше 1000px. можно и 1600 написать, но очень у многих он меньше 1600.

@ajttajtt · 14.09.2014, 14:36 **[ТС]**

Но мне немного другое надо, я сделал как вы сказали, и у меня менюшка стала как гармошка складываться. А как сделать чтобы меню не складывалось а обрезалось справа и слева одинаково?

Добавлено через 14 минут
Я читал, что для этого вроде нужно сделать блок-коробку и задать её margin: 0 auto. И все остальные блоки внутри этого. Но у меня не получается, когда я блокам ставлю позиционирование relative, у меня срезается сайт только справой стороны.

@-MaZaHaKa- · 14.09.2014, 15:29

ajttajtt, было бы хорошо если бы ты сюда код выложил, со слов тяжело понять где у тебя ошибка.

Я обычно делаю так:

HTML5
1
2
3
4
5
<body>
    <div class="wrapper">
        тут вложенные блоки
    </div>
</body>

CSS
1
2
3
4
5
6
div.wrapper {
    margin: 20px auto;
    width: 960px;
    display: table;
    background-color: #880000;
}

Вот хороший пример современного резинового (адаптивного) шаблона (меняй ширину браузера и увидишь изменения):
http://andersnoren.se/themes/garfunkel/

На этом сайте (через поиск) можно найти уйму статей про адаптивный дизайн
http://habrahabr.ru/search

@ajttajtt · 15.09.2014, 14:15 **[ТС]**

Сообщение от -MaZaHaKa-

@media screen and (max-width: 1000px) and (min-width: 800px)

А как расшифровать эту запись?

@-MaZaHaKa- · 15.09.2014, 21:45

ajttajtt, это от 800 до 1000 px

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@ajttajtt 1 / 1 / 2 Регистрация: 12.04.2014 Сообщений: 252

	Как правильно верстать резиновый сайт? 13.09.2014, 18:46. Показов 2805. Ответов 8 Метки нет (Все метки) Кто знает, подскажите, как правильно верстать сайт таким образом чтобы при уменьшенном экране сайт срезался с обеих сторон одинаково? 0

@ajttajtt 1 / 1 / 2 Регистрация: 12.04.2014 Сообщений: 252
	14.09.2014, 13:42 [ТС]
	Спасибо. А почему максимальная ширина 1000 px, у меня монитор например 1600 px, мне 1600 писать? 0

Stopy 0 / 0 / 0 Регистрация: 13.09.2014 Сообщений: 26
	14.09.2014, 14:19
	ajttajtt, чтобы не появлялось горизонтальной прокрутки если экран посетителя меньше 1000px. можно и 1600 написать, но очень у многих он меньше 1600. 0

@ajttajtt 1 / 1 / 2 Регистрация: 12.04.2014 Сообщений: 252
	14.09.2014, 14:36 [ТС]
	Но мне немного другое надо, я сделал как вы сказали, и у меня менюшка стала как гармошка складываться. А как сделать чтобы меню не складывалось а обрезалось справа и слева одинаково? Добавлено через 14 минут Я читал, что для этого вроде нужно сделать блок-коробку и задать её margin: 0 auto. И все остальные блоки внутри этого. Но у меня не получается, когда я блокам ставлю позиционирование relative, у меня срезается сайт только справой стороны. 0

@-MaZaHaKa- 21 / 21 / 16 Регистрация: 30.09.2013 Сообщений: 262
	15.09.2014, 21:45
	ajttajtt, это от 800 до 1000 px 0