В другой статье в моей статье «Эластичная + фиксированная компоновка ширины» я представил план макета с Elastic Plus с минимальной фиксированной шириной, и теперь я введу еще один план макета - упругой макет жидкости.
Это решение на самом деле является гибким применением этого макета. Самым большим преимуществом эластичной макета является то, что он может полностью использовать пространство экрана. Независимо от того, насколько велика разрешение клиента, оно может автоматически адаптироваться к изменениям ширины.
Изображение 1
Посмотрите на картинку выше. Это иностранный веб -сайт. Это макет с фиксированной шириной. Наш макет основан на этой картине. Конечно, я не дам всестороннее введение в то, как сделать эту полную страницу, я объясню это только ключевым моментам.
На самом деле, это относительно просто сделать эластичный макет, но хотя этот макет прост, понимание деталей является сущностью этого макета. Хотя эластичный макет имеет такие хорошие преимущества, он имеет относительно роковые недостатки:
Следовательно, эта статья может иметь относительно меньше объяснений макета, и она больше связана с решением двух вышеупомянутых проблем. Я полагаю, что до тех пор, пока две вышеупомянутые проблемы решаются, этот макет будет относительно проще.
Как правило, упругие макеты используют проценты для установки ширины контейнера. Это автоматически адаптируется к ширине экрана. Однако значение ширины не может быть полностью свободно масштабировано пользователем. Мы должны ограничить его минимальную ширину в этой процентной ширине. Когда пользователь сжимает окно до определенного значения, окно не будет снова масштабировано.
Друзья, которые знакомы с CSS, знают, что есть четыре атрибута, подобные этим:
Эти четыре атрибута просто могут решить эту проблему. Вы счастливы? Но не будьте заняты. Хотя они могут решить эту проблему, есть серьезная проблема. Браузер IE6, который наиболее используется пользователями, не поддерживает эти атрибуты. Это очень плохая вещь. Мы не можем отказаться от браузера с большинством пользователей!
В Интернете есть четыре популярных метода, чтобы решить проблему, которую IE6 поддерживает эти четыре атрибута:
Первые три имеют недостатки, пожалуйста, выберите наиболее подходящий метод. Я предпочитаю последний. Это достигается великим иностранцем. Вы можете увидеть соответствующие примеры здесь: http://www.doxdesk.com/software/js/minmax.html
С помощью этого файла JS вам нужно только позвонить в этот файл JS в заголовке.
PS: Для удобства в демонстрационной модели я называю это JS как внутреннюю ссылку. В фактическом приложении вы создадите этот файл JS в внешний файл JS и вызовите его следующим образом:
<script type = text/javascript src = minmax.js> </script>
Мы просто применяем мин-ширину к двум контейнерам #Wrapper и #Footer в листе стилей и устанавливаем их ширину на 100% соответственно. ХОРОШО. Теперь мы решили проблему минимальной ширины.