Лучшее решение / фреймворк для адаптивного дизайна для IE7 - PullRequest
Новая
       31

Лучшее решение / фреймворк для адаптивного дизайна для IE7

14 голосов
/ 16 сентября 2011

Для тех, кто еще не знает о адаптивном дизайне, я предлагаю эту ссылку

Пока он не понимает медиа-запросы, такие как: 

@media screen and (max-width: 1280px)   {
    h1 { font-size: 120px; padding: 10px; color:#999999 !important; }
    h2{font-size:35px;}
}


@media screen and (max-width: 1024px)   {
    h1 { font-size: 90px; padding: 1px; color:#999 !important; }
    h2{font-size:25px;}

}

@media screen and (max-width: 740px)    {
    h1 { font-size: 70px; padding: 1px; color:#999 !important; }
    h2{font-size:16px;}
    .left-col { width: 100%; }
    .sidebar { width: 100%; }
}

@media screen and (max-width: 480px) {

}

@media screen and (max-width: 478px)    {
    h1 { font-size: 50px; padding: 1px; color:#999; }
    h2 { font-size: 12px; padding: 1px; }
    body { font-size: 13px; }
}

Я собирался использовать adapt.js , с которым вы можете сделать: 

<script>
// Edit to suit your needs.
var ADAPT_CONFIG = {
  // Where is your CSS?
  path: 'assets/css/',

  // false = Only run once, when page first loads.
  // true = Change on window resize and page tilt.
  dynamic: true,

  // First range entry is the minimum.
  // Last range entry is the maximum.
  // Separate ranges by "to" keyword.
  range: [
    '0px    to 760px  = mobile.min.css',
    '760px  to 980px  = 720.min.css',
    '980px  to 1280px = 960.min.css',
    '1280px to 1600px = 1200.min.css',
    '1600px to 1940px = 1560.min.css',
    '1940px to 2540px = 1920.min.css',
    '2540px           = 2520.min.css'
  ]
};
</script>
<script src="assets/js/adapt.min.js"></script>

Он предназначен для использования с 960 сеткой Но вы все равно можете использовать все, что вам нравится в этих .css

Но проблема в том, что вам нужно включить JavaScript. Я надеялся, что кто-нибудь из вас знает более гибкое (отзывчивое!) Решение, любое?

Ответы [ 3 ]

14 голосов
/ 11 октября 2011

Просто смотрю на это.Я собирался использовать adapt.js, но обнаружил несколько JS, которые обеспечивают функциональность медиазапроса в старых браузерах (включая IE7).

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

Вот два лучших варианта поиска медиазапросов в JS, которые я нашел:

Ответ

https://github.com/scottjehl/Respond

При сжатии размер ответа составляет около 3 КБ, и он поддерживает базовые медиа-запросы, необходимые для простого адаптивного проектирования (min / max-width)

css3-mediaqueries-js

http://code.google.com/p/css3-mediaqueries-js/

Чуть больше при уменьшенном <16kb.Поддерживает более широкий спектр медиа-запросов (не тестировался, но на него есть ссылки на сайте ответа) </p>

3 голосов
/ 10 февраля 2014

Я не знаю, как сделать сайт отзывчивым в IE6-8 без использования Javascript.Однако можно просто предоставить настольную версию вашего сайта этим браузерам и сделать ее отзывчивой во всех других браузерах.Я считаю, что это лучший подход, так как IE6-8 (почти?) В любом случае используются исключительно на настольных компьютерах.

Cascade Framework - это единственная CSS-инфраструктура, которую я знаю, с сеточной системой, которая реализуетэта техника.

См. также эту демонстрацию .

0 голосов
/ 11 августа 2014

Мне не понравилась идея некоторых альтернатив, позволяющих старым браузерам работать с медиа-запросами.Загрузка файла CSS через AJAX и его анализ не кажутся мне слишком эффективными.

Еще один вариант создания адаптивных сайтов для IE7 или даже IE5 / 6 - использовать JavaScript для применения классов на основе ширины экрана, аналогичнона медиа-запросы.Это работает со всеми браузерами, если включен JavaScript.У вас может быть разрешение по умолчанию, которое подается, если JavaScript отключен.

Это описано здесь .

Некоторые примеры JavaScript для этого: 

<script type="text/javascript">
    function hasClass(el, cls) {
        return el.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
    }
    function addClass(el, cls) {
        if (!this.hasClass(el, cls)) el.className += " " + cls;
    }
    function removeClass(el, cls) {
        if (hasClass(el, cls)) {
            var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
            el.className = el.className.replace(reg, ' ');
        }
    }

    var addEvent = function (elem, type, eventHandle) {
        if (elem == null || elem == undefined) return;
        if (elem.addEventListener) {
            elem.addEventListener(type, eventHandle, false);
        } else if (elem.attachEvent) {
            elem.attachEvent("on" + type, eventHandle);
        } else {
            elem["on" + type] = eventHandle;
        }
    };

    function responsive() {
        var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

        for (var i = 0; i < breakpoints.length; i++) {
            if (breakpoints[i][0] == "max-width") {
                if (w <= breakpoints[i][1]) {
                    addClass(document.getElementById(id), breakpoints[i][2]);
                }
                else {
                    removeClass(document.getElementById(id), breakpoints[i][2]);
                }
            }
            else if (breakpoints[i][0] == "min-width") {
                if (w >= breakpoints[i][1]) {
                    addClass(document.getElementById(id), breakpoints[i][2]);
                }
                else {
                    removeClass(document.getElementById(id), breakpoints[i][2]);
                }
            }
        }
    }

    var resizeTimeoutId;

    function resized() {
        window.clearTimeout(resizeTimeoutId);
        resizeTimeoutId = window.setTimeout('responsive();', 10);
    }

    var id = "body";
    var breakpoints = [["max-width", 630, "max630"], ["min-width", 1890, "min1890"]];

    addEvent(window, "resize", resized);

    responsive();
</script>
...