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

Question

[Gl1tch]

Делаю одноколоночный сайт, только контент. Как сделать вертикальные отступы от края экрана адаптивными? Например, чтобы на экране компьютера ширина контента была 50%, на планшете 70-80%, на телефоне 100%.

Comments

[Froggyweb]

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

[Сергей Кутузов]

Естессственнно

Answer 1

[Сергей Кутузов]

Вообще-то вопрос немного не понятный. То вертикальные отступы, то ширина контента. Вам что нужно? отступы сверху и снизу, или справа и слева?
Отступы и ширина в адаптивной вёрстке задаются так:
Для компа (цифры в значениях здесь на вскидку для примера)

.content{
         width:50%; - ширина
         margin: 10% 25% 10% 25%; - отступы: верх, справа, низ, слева;
}

Для экранов шириной до 815px (планшет)

@media screen and (max-width: 815px){
         content{
               width:80%; - ширина
                margin: 10% 10% 10% 10%; - отступы: верх, справа, низ, слева;
}
}

Для экранов шириной до 420px (телефон)

@media screen and (max-width: 420px){
         content{
               width:100%; - ширина
                margin: 10% 2% 10% 2%; - отступы: верх, справа, низ, слева;
}
}

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

Answer 2

[Antonio Solo]

описать для разных размеров экрана разные стили.
посмотри как в бутстрапе сделано.

ну или возьми сразу бутстрап и не мучайся