2015-07-30 4 views
0

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

Normal web site

Zoom-out website

Когда я сделать адаптивный дизайн-я просто сделать элементы размером экрана, а когда вы уменьшить масштаб элементы будут приспосабливаясь к экрану. Как мне это сделать? Обвинение: я действительно хочу знать, как это сделать, без фреймворков и как я могу определить размер изображений (с помощью vh/vw, em, rem,% и т. Д.).

+1

Знаете ли вы о 'media queries'? –

+0

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

+0

Ваш вопрос очень широк. Подумайте о том, чтобы сузить его, или, возможно, попытаться создать сайт самостоятельно, и размещать вопросы вместе с вашим кодом, когда у вас есть проблемы. Если вы хотите получить ответы высокого качества, подумайте о том, чтобы прочитать советы [справочного центра] (http://stackoverflow.com/help/how-to-ask), чтобы задать хорошие вопросы. –

ответ

1

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

#container_div {max width: 1280px; margin:auto} 

так margin: auto будет центрировать div (при условии, что он был в какой-то обертке). В теории это должно работать, но я полагаю, что будут другие возможности.

0

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

Если вы хотите установить содержимое своей страницы в середине страницы.

<body> 
<div class="container"> 
    // your page content ..... 
<div> 
</body> 

, если вы хотите установить содержание страницы в полной странице.

<body> 
<div class="container-fluid"> 
    // your page content ..... 
<div> 
</body> 

Теперь этот контейнер класс будет управлять на всех.