Отзывчивый веб-дизайн 100% -ная обертка

Недавно я прочитал об этом целом отзывчивом предмете веб-дизайна и решил попробовать и реализовать его в проекте, над которым я работаю.Отзывчивый веб-дизайн 100% -ная обертка

Проблема заключается в том, что я использую ширину 1280 в качестве базовой точки.

Формула я использую

target ÷ context = desired width 
target = element desired width 
context = my 1280 base point

Всякий раз, когда браузер не изменяется, что перерывы компоновки, так как контекст больше не 1280px. Как я могу это сделать? (См. Код ниже)

Если я установил #wrap ширину до фиксированного 1280px; не будет ли это отменить отзывчивость эффект?

<!doctype html> 
<html> 
<head> 
<style type="text/css"> 

html {overflow-y: scroll; height:100%} 

body {font:12px Arial, Helvetica, sans-serif; color: #616161; overflow:hidden; margin: 0; padding: 0; height: 100%; background-color: #eee} 

#wrap { 
    background-color: #eee; 
    min-height: 100%; 
    height:auto !important; 
    height:100%; 
    overflow: hidden !important; /* FF scroll-bar */ 
    width: 100%; 
} 

#side-bar { 
    width: 17.890625%; 
    height:100vh; 
    float:left; 
    border-right: 1px solid #ccc; 
    padding: 10px; 
} 

#main-section { 
    float:left; 
    background-color: #fff; 
    width:80.46875%; 
    height:100vh; 
    overflow: scroll; 
} 


</style> 
<body> 

<div id="wrap"> 
<div id="side-bar"></div> 
<div id="main-section"></div> 
</div> 

</body> 
</html>

источник

2013-08-09 elad.chen

@zjd Это не способ узнать –

Ширина полосы пропускания и заполнения не учитывается при масштабировании.

Если добавить к вашей CSS:

* { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
}

Ваша обивка и границы ширина будет включена как часть x% и вы не должны иметь никаких проблем масштабирования.

Вы можете добавить это все элементы, как я сделал выше, или просто положить его на #side-bar. Мне нравится использовать его повсюду, это упрощает стилизацию (особенно для реагирования).

источник

2013-08-09 17:01:23 maxinacube

О, и да. Добавление фиксированной ширины приведет к поражению цели реагирования. Для реагирования старайтесь придерживаться процентов и 'max-width'. – maxinacube

Вы можете установить #wrap с max-width: 1280px;

#wrap { 
    max-width: 1280px; 
    width: 100%; 
}

источник

2013-08-09 17:51:51 jerrylow

Очень простое изменение моего существующего CSS. Благодаря! – NobleUplift

Отзывчивый веб-дизайн 100% -ная обертка

ответ

Смежные вопросы