Гибкая или плавная CSS-верстка - PullRequest
Новая
       3

Гибкая или плавная CSS-верстка

1 голос
/ 28 августа 2011

Обычно для большинства макетов на основе DIV я кодирую страницу (внешний каркас) следующим образом: 

<body>
<div class="wrapper">
    <div class="minwidth">
        <div class="layout">
            <div class="container">
                <div class="content">
                                          //Some content....
                </div>
            </div>
        </div>
    </div>
</div>
</body>

Ниже приведен CSS, который я использую; 

html,body{padding:0;margin:0;background:url(../images/bodybg.gif) #ececed left top repeat-x;color:#3b3b3b;font:normal 85% verdana}
.wrapper{width:99.8%;min-width:959px;margin:0 auto}
* html .minwidth{padding-left:959px}
* html .minwidth,* html .layout,* html .container,* html .content{height:1px}
* html .container{margin-left:-959px;position:relative}
.content{padding:0;margin:0 16px}

Теперь я должен признать, что, поскольку я больше занимаюсь разработкой пользовательского интерфейса (а не разработкой макетов), я не совсем понимаю, «ПОЧЕМУ», некоторые из этих элементов div фактически используются. Я предполагаю, что некоторые из этих div'ов используются как разновидность HACK для отсутствия поддержки минимальной ширины в старых IE.

Итак, мои вопросы:

  1. Пожалуйста, дайте мне знать, если код макета выше является стандартным и требуется для кросс-браузерной совместимости (при условии определенной минимальной ширины требование также)
  2. Вы думаете, что так много делений требовалось только для минимальной ширины поддержка более старых версий IE и последние версии IE (например, IE8 / 9) имеют полную поддержка минимальной ширины?
  3. Теперь я хочу разработать текучую схему, т. Е. Такую, которая должна работать легко на нескольких платформах (настольных ПК / планшетов, таких как iPad и определенная степень мобильных устройств)
  4. Пожалуйста, предложите любую другую скелетную структуру, чтобы обеспечить жидкость макет, который будет корректироваться в соответствии с разрешением экрана (Рабочий стол / планшет, и т.д.)

1 Ответ

0 голосов
/ 28 августа 2011

1.

Ну, я никогда не видел такой способ достижения min-width в старых браузерах.

2

Нет, это определенно не обязательно.

Если вас интересует только min-width, это следует сделать для ie6.

http://www.cssplay.co.uk/boxes/width.html

Вот способ достижения min-width и max-width.

http://cameronmoll.com/archives/000892.html

Edit:

Таким образом, чтобы сделать этот рабочий кроссбраузер, включающий ie6, вы могли бы сделать, как в этом примере выше, за исключением только минимальной ширины ... для простейших html и css это будет путь.

Единственным недостатком является то, что если у посетителя нет JS .. то это ничего не делает. Если человек достаточно умен, чтобы отключить JS, и он все еще использует ie6, то я думаю, что это проблема пользователей ..

http://jsfiddle.net/sr7WJ/ - Крайне важно иметь некоторые дополнительные значения в первом значении ширины (то, которое с javascript). Я лично доверяю примерно на 30 больше, чем есть ... но они говорят, что еще 2 достаточно Возможно, вам придется взломать это для ie6 или использовать условные комментарии в некоторых случаях.

3. / 4.

http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts

http://www.maxdesign.com.au/articles/liquid/

...