Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 139
Да без обид!как раз новичок и как раз с этим парюсь)Спасибо огромное
я на своем огромном 23-дюймовнике сжимаю браузер до 1280х900. Так удобнее
для смартфона (и других портативных устройств) лучше отдельную версию делать.
Для смартфона нужно делать отдельную версию, которая будет не только адаптирована под размер экрана, но будет еще и "весить" меньше.
Но самое главное — версии сайтов для мобильных устройств должны быть адаптированы в части пользовательского интерфейса и самого контента.
Так что ограничивать адаптацию лишь версткой или даже отдельным CSS — неправильно.
Но самое главное — версии сайтов для мобильных устройств должны быть адаптированы в части пользовательского интерфейса и самого контента.
Так что ограничивать адаптацию лишь версткой или даже отдельным CSS — неправильно.
Спасибо, мне тоже будет полезным.
Давно интересовался как ЭТО можно сделать...
Спасибо автору огромное...
Спасибо автору огромное...
Спасибо, действительно полезная фишка. Я версткой занимаюсь лишь от случая к случаю, когда находит блажь переделать дизайн для сайта, и коллекционирую подобные хинты.
В конце заголовка точка(.) по правилам не ставится.
Вполне можно и без js обойтись, в css все отлично работает.
только не в ие6 и ниже
в ие6 работает
Что конкретно работает в ие6???
min-width?
Как я понял, камент выше как раз об этом и говорит.
min-width?
Как я понял, камент выше как раз об этом и говорит.
выше говорится об экспрешенах в цсс (по крайней мере я так понял)
ааамм... согласен.
Вы правы.
Вы правы.
Экспрешены вешают ие6, сам проверял. Спасает подключение отдельного яваскрипта.
странно... я тестил вроде не вис. Может это из-за специфики вычислений в экспрешенах?
если поставить, например, пустой комментарий перед доктайпом - не вешают. Или вот парой комментов ниже ещё одно, более симпатичное, решение с добавлением пиксела.
Вообще, expression для IE - это тот же самый JavaScript.
Мой опыт показывает, что грамотная вёрстка предполагает на страницы использовать всего навсего один блок для expression. Но сложность возникает, если нужно определить не только минимальную ширину, но и максимальную.
Так вот, если для одного блока определить два expression'а (min-width и max-width), то именно тогда начинаются тормоза и "конфликт". Для себя я нашёл решение: нужно использовать два блока. Один блок для expression(min-width), другой - для expression(max-width).
Мой опыт показывает, что грамотная вёрстка предполагает на страницы использовать всего навсего один блок для expression. Но сложность возникает, если нужно определить не только минимальную ширину, но и максимальную.
Так вот, если для одного блока определить два expression'а (min-width и max-width), то именно тогда начинаются тормоза и "конфликт". Для себя я нашёл решение: нужно использовать два блока. Один блок для expression(min-width), другой - для expression(max-width).
Когда-то сталкивался с проблемой min-width.
С решением с js в ие6 были проблемы. При ресайзе он просто вис.
Как у вас? Нет такой проблемы?
С решением с js в ие6 были проблемы. При ресайзе он просто вис.
Как у вас? Нет такой проблемы?
Неплохо.
А если просто невидимую картинку впихнуть шириной 760 пикселей?
В принципе тоже min-width.
А если просто невидимую картинку впихнуть шириной 760 пикселей?
В принципе тоже min-width.
а как быть с максимальной?...
Это решение сродни однопиксельным прозрачным картинкам в качестве распорок. Давно уже устаревший метод.
А что сейчас используют вместо них?
Потом однажды кто-то додумался, что делать однопиксельный гиф в 43 байта - вообще не нужно, и достаточно написать <img width=100 height=1> , т.е. не указывать src вообще - и эффект будет тот же. И причем это работает во всех броузерах, в т.ч. и в старых версиях, типа там IE4 и подобное. Почему так не делали раньше - загадка.
Но распорки в любом случае зло, с прозрачными картинками или без.
Но распорки в любом случае зло, с прозрачными картинками или без.
Грамотная блочная верстка со стилями и JS-добавками в случаях min-max решает все эти и не только проблеммы.
По стандартам это не работает. Ширина будет, такой как она указана, а все внутренние элементы, которые по ширине больше будут выступать.
Такие танцы с бубном JavaScript только для IE6? Понимает ли IE7 min-width и max-width?
А чем Вам Сафари не угодил?!
Вы странный
мне - тем что у меня падает постоянно
ты б линк на работающий пример показал.
А expression слишком нагружает браузер...
Это в смысле ие нагружается? У меня вроде бы не сильно. В любом случае интересно, это чисто визуальные наблюдения, или есть какое-нибуть обоснование?
Меня давно интересовали экспрешены, интересно было бы узнать мнение сообщества о днанной технологии.
1500 это слишком широко. разумное ограничение под разрешение 1280 по ширине
1500 - это максимальный размер..
под 1280 сайт впритык будет.
вообще автору спасибо!
под 1280 сайт впритык будет.
вообще автору спасибо!
впритык к чему?
Я использую максимальную ширину 1200px, так еще сохраняется удобная для чтения длина строки
Зависит от монитора и разрешения. У меня на работе 2560 пикселей ширина строки и подобные сайты выглядят весьма убого...
Я про удобочитаемость говорил, а не про эстетические аспекты. У вас наверное вообще топики в 2 строки выводятся ) Удобно ли вам читать текст, длина строки которого 2000 px, а количество строк > 10, написанный 11 кеглем?
А на счет естетики, нужно ориентироватся на целевую аудиторию. Статистика показывает, что таких как вы очень мало )
А на счет естетики, нужно ориентироватся на целевую аудиторию. Статистика показывает, что таких как вы очень мало )
У меня 150dpi стоит (бред, конечно, реально экран имеет 100dpi, но так уж задаётся размер шрифтов в GNOME), так что никаких описанных вами ужасов нету. А колонка получается зауженной, читать не очень удобно...
я ошибся, других, таких как вы, больше нет )
Зайдите в офис любой нормальной конторы - найдутся "таких как я" десятки, если не сотни (у нас в офисе человек 20 точно есть). А уж если включить сюда тех, кто имеет обычный 24-дюймовый монитор с разрешением 1920x1200 и режим "120dpi", так тех вообще тысячи...
Мой домашний (по совместительству рабочий)ноут имеет разрешение по ширине 1680px (при диагонали15")!
В виду того, что у многих рядовых пользователей появляются дома мониторы 19" и больше... а сайты перевёрстываются зачастую не чаще чем раз в два-три года, думаю стоит уделять побольше внимания пользователям с "большими"... мониторами!
В виду того, что у многих рядовых пользователей появляются дома мониторы 19" и больше... а сайты перевёрстываются зачастую не чаще чем раз в два-три года, думаю стоит уделять побольше внимания пользователям с "большими"... мониторами!
Имхо, разумнее ширину указывать в ex, а не px, если вас волнует ширина строки, а не изображения.
Вы имеете ввиду относительные единицы измерения? Не знаю, можно ли их использовать в max-width
Относительные единицы разумно использовать при работе с шрифтами, когда они выставляются относительно какого то "эталона", которым может быть стандартный размер шрифта броузера либо вручную заданный размер.
А относительно чего вы ширину контента собираетесь выставлять?
А относительно чего вы ширину контента собираетесь выставлять?
Укажем минимальную ширину контента в пикселях (например, не менее
В результате контент не съежится до неприличия при скромном разрешении, но и на большом экране останется удобочитаемым, причем пользователь может спокойно выбирать удобный ему размер шрифта, не опасаясь, что в каждой строке останется пара слов.
По-моему, именно так сделано и на вышеупомянутом ThinkVitamin.
750px), а максимальную — в относительных единицах (например, не более 150ex, что примерно равно 150 символам в строке).В результате контент не съежится до неприличия при скромном разрешении, но и на большом экране останется удобочитаемым, причем пользователь может спокойно выбирать удобный ему размер шрифта, не опасаясь, что в каждой строке останется пара слов.
По-моему, именно так сделано и на вышеупомянутом ThinkVitamin.
Тоже вариант, но ex, если не ошибаюсь как то связан с x-height - высотой глифов, а не с шириной букв.
Вот недавно у меня была проблема эта.
Экспрешены не помогли — как уже тут писалось, при ресайзе IE вешался.
Так что надо подключать отдельный яваскрипт для IE. А остальные браузеры с CSS нормально работают.
Я считаю такой вариант решения наиболее оптимальным для резиновых сайтов.
А вот для нерезиновых необходимости нет)
Экспрешены не помогли — как уже тут писалось, при ресайзе IE вешался.
Так что надо подключать отдельный яваскрипт для IE. А остальные браузеры с CSS нормально работают.
Я считаю такой вариант решения наиболее оптимальным для резиновых сайтов.
А вот для нерезиновых необходимости нет)
Больше нравится вариант с expression
* html #root
{
width:expression(
(document.compatMode && document.compatMode == 'CSS1Compat')
?
(
document.documentElement.clientWidth < 770
?
"770px"
:
(
document.documentElement.clientWidth > 990
?
"990px"
:
"auto"
)
)
:
(
document.body.clientWidth < 770
?
"770px"
:
(
document.body.clientWidth > 990
?
"990px"
:
"auto"
)
)
);
}
я такие вещи при помощи условных комментариев подключаю в отдельный цсс, а не хаком
йопт, дак гдеж здесь хак? А уж про условные комментарии (или condcom), это вообще следует считать как правило хорошего тона. Уж лепить expression в основной файл css я б не стал, да и читетели http://habrahabr.ru/blog/webdev думаю тоже.
А собственно зачем такой большой expression?
У меня и вот с таким не зависает IE
min-width: 700px;
width: expression((documentElement.offsetWidth || document.body.offsetWidth) < 700 ? '700px' : 'auto');
max-width: 1500px;
width: expression((documentElement.offsetWidth || document.body.offsetWidth) > 1500 ? '1500px' : 'auto');
У меня и вот с таким не зависает IE
min-width: 700px;
width: expression((documentElement.offsetWidth || document.body.offsetWidth) < 700 ? '700px' : 'auto');
max-width: 1500px;
width: expression((documentElement.offsetWidth || document.body.offsetWidth) > 1500 ? '1500px' : 'auto');
а вы пробовали это пременить к одному и тому-же элементу?
Да пробовал. В большинстве случаев не ограничиваю максимальную ширину, но иногда приходится - все работает.
Применяется это же не к body, а к некому div который содержит в себе все остальное.
Применяется это же не к body, а к некому div который содержит в себе все остальное.
Извиняюсь, не правильно написал, для одного элемента работать будет вот это:
width: expression((documentElement.offsetWidth || document.body.offsetWidth) < 700 ? '700px' : 'auto' && (documentElement.offsetWidth || document.body.offsetWidth) > 1500 ? '1500px' : 'auto');
width: expression((documentElement.offsetWidth || document.body.offsetWidth) < 700 ? '700px' : 'auto' && (documentElement.offsetWidth || document.body.offsetWidth) > 1500 ? '1500px' : 'auto');
1. Я тут, увлёкшись клёвыми статьями о резиновом дизайне, делаю резиновый дизайн для сайта Датавед о свободном программном обеспечении. Что хочется:
а) три колонки L, M, R с заданной минимально разрешённой шириной,
б) когда все три влезают по ширине на экран, средняя расширяется до определённого размера,
в) при уменьшении экрана сначала пропадает правая колонка — попадает под левую,
г) затем обе управляющие колонки уходят вниз и расширяются по ширине средней колонки.
Есть ещё вариант, когда левая и правая колонки уходят влево и вправо, а не вниз — и появляется полоса прокрутки. Что мне совершенно не нравится — это как сейчас, когда при уменьшении средней колонки текст и картинки не начинают залезать на управляющие колонки. Нет ли примеров и идей, как такое сделать?
2. Попутно возник ещё следующий вопрос — может Вы и с подобным сталкивались? Как правильно настроить блог, чтобы картинки показывались маленькими при просмотре ленты постов, и рисовались в нормальном размере при открытии поста целиком. Мы используем Блоггер — интересно, как поправить стили и темплейт для этого случая.
3. Жалко, что ссылка на мотивацию статьи более не работает. Зачем вообще делать резиновый дизайн, если дизайнеры говорят, что изменение пропорций на процент всё портит?
а) три колонки L, M, R с заданной минимально разрешённой шириной,
б) когда все три влезают по ширине на экран, средняя расширяется до определённого размера,
в) при уменьшении экрана сначала пропадает правая колонка — попадает под левую,
г) затем обе управляющие колонки уходят вниз и расширяются по ширине средней колонки.
Есть ещё вариант, когда левая и правая колонки уходят влево и вправо, а не вниз — и появляется полоса прокрутки. Что мне совершенно не нравится — это как сейчас, когда при уменьшении средней колонки текст и картинки не начинают залезать на управляющие колонки. Нет ли примеров и идей, как такое сделать?
2. Попутно возник ещё следующий вопрос — может Вы и с подобным сталкивались? Как правильно настроить блог, чтобы картинки показывались маленькими при просмотре ленты постов, и рисовались в нормальном размере при открытии поста целиком. Мы используем Блоггер — интересно, как поправить стили и темплейт для этого случая.
3. Жалко, что ссылка на мотивацию статьи более не работает. Зачем вообще делать резиновый дизайн, если дизайнеры говорят, что изменение пропорций на процент всё портит?
а кто знает, как IE6 заставить поддерживать min-width и max-width
Напиши им письмо )
Эта… Вы топик-то читали?
min-width очень часто и просто сымитировать каким нибудь фиксированным элементом внутри тянущегося блока. Если это таблица, например:
Ну естественно, на каждом конкретном примере нужно смотреть как и что сделать
<table width="100%">
<tr>
<td><hr style="width: 600px" /></td>
</tr>
</table>
Ну естественно, на каждом конкретном примере нужно смотреть как и что сделать
Ммм.. А просто:
* html #site { width: 760px; }
чем не устраивает?
* html #site { width: 760px; }
чем не устраивает?
Все бы так по уму делали. У меня несколько нетандартное разрешение (сбоку висит панелька gkrellm'а) и огромное количество сайтов просто едет или показывает скроллбар. Слава опере, часто это лечится Fit to width.
весьма давно использую скрипт, который так и называется - minmax.js
Кто ищет - тот найдет :) Почти все проблемы верстки решаются "велосипедами".
Кто ищет - тот найдет :) Почти все проблемы верстки решаются "велосипедами".
Вот еще бы работающий layout :)
minmax.js - рулит
Загрузить minmax.js
Правда, разбирался в коде - там он ТАКОГО воротит...
После него даже страшно в DOM лезть.
Загрузить minmax.js
Правда, разбирался в коде - там он ТАКОГО воротит...
После него даже страшно в DOM лезть.
Интересно, у скольких человек стоит ИЕ6 при разрешении большем 1280? :)
кусок моего стандартного css:
я считаю что 1000 и 1400 самые оптимальные цифры для максимального и минимального значения... в этих пределах дизайн не уродуется.
.outer { position: relative; max-width: 1400px; min-width: 1000px; width: expression((document.documentElement.clientWidth || document.body.clientWidth) < 1000 ? '1000px' : (document.documentElement.clientWidth || document.body.clientWidth) > 1400 ? '1400px' : '100%' ); }я считаю что 1000 и 1400 самые оптимальные цифры для максимального и минимального значения... в этих пределах дизайн не уродуется.
Вообще-то где-то я похожее недавно видел и не на Q-ZMA. :)
Большое спасибо, давно искал:)
Нельзя ли подобные решения для div выложить?
А нельзя ли более развёрнуто о преимуществах этого способа перед expessions? "expression слишком нагружает браузер" - крайне мутно, хочется поподробнее (они его в данном случае могут повесить, да, но это решаемо).
Либо ссылку какую хорошую на эту тему.
Хочется как-то однозначно определить для себя плюсы-минусы и там уже решать, чем пользоваться.
Либо ссылку какую хорошую на эту тему.
Хочется как-то однозначно определить для себя плюсы-минусы и там уже решать, чем пользоваться.
ох батя, силен! =)
я бы не рискнул вешать обработчики на онресайз, потому как при сложном дизайне (много таблиц етц) перерисовка будет случаться очень очень часто. правильнее вещать интервал и отслеживать изменения ширины / высоты окна.
Кажется, в скрипте допущена ошибка.
Определение переменных (var minwidth, var maxwidth) надо засунуть в тело функции, иначе у меня скрипт отказывается работать.
Определение переменных (var minwidth, var maxwidth) надо засунуть в тело функции, иначе у меня скрипт отказывается работать.
Автору - спасибо. И чтобы там все-таки не говорили про экспрешены, я считаю в корне неверно мешать логику оформления страницы и индивидуальные для IE хаки, в одном файле. На маленьких проектах это еще можно допустить, но когда кол-во стилей доходит до 5-8, получается основательная каша.
А у меня в Safari не работает! :(
Все сужается до размера контента и все.
Все сужается до размера контента и все.
У меня почему-то все-таки пример автора не хочет работать в IE6.
Во всех других брайзерах работает, в IE6 сжимается и растягивается без всяких правил.
Пример с экспрешенами (как советует kostos) работает отлично везде.
Может быть потому, что у меня в системе установлен IE7, а IE6 доустановлен позже с помощью multiple-ie. Интересно было бы все-таки узнать, как применение expessions в одном единственном месте будут нагружать браузер. В чем + и -?
Во всех других брайзерах работает, в IE6 сжимается и растягивается без всяких правил.
Пример с экспрешенами (как советует kostos) работает отлично везде.
Может быть потому, что у меня в системе установлен IE7, а IE6 доустановлен позже с помощью multiple-ie. Интересно было бы все-таки узнать, как применение expessions в одном единственном месте будут нагружать браузер. В чем + и -?
ого себе! 100 баллов накапало...
Поздравляю!
Поздравляю!
Вы действительно считаете, что этот ход нагружает браузер меньше, чем использование экспрешена? ;)
У меня в FF, IE, Opera работает отлично. Пасиб =)
Самый простое решение проблем с минимальной шириной - распорка для всех версий IE.
На это есть две веские причины:
- Правильные пацаны верстают в em, и делают страницы полностью зуммируемыми. увеличил шрифт - и минимальная ширина уже должна быть не 750px, а 900, к примеру.
- у даже у IE7 есть баг, связанный с ресайзом при использовании min-width, если отступы у body заданы в процентах. При ресайзе ширина контентной области уменьшается, а ширина блоков в контентной области уменьшается через раз. в итоге сетка разрушается.
Поэтому все же лучше банально окружить документ таблицей в условном комментарии, и распереть ее div'ом с шириной, заданной в em. Какой браузер - такое и решение =)
На это есть две веские причины:
- Правильные пацаны верстают в em, и делают страницы полностью зуммируемыми. увеличил шрифт - и минимальная ширина уже должна быть не 750px, а 900, к примеру.
- у даже у IE7 есть баг, связанный с ресайзом при использовании min-width, если отступы у body заданы в процентах. При ресайзе ширина контентной области уменьшается, а ширина блоков в контентной области уменьшается через раз. в итоге сетка разрушается.
Поэтому все же лучше банально окружить документ таблицей в условном комментарии, и распереть ее div'ом с шириной, заданной в em. Какой браузер - такое и решение =)
Спасибо автору!
Поставил, во всех браузерах работало, кроме ИЕ. Почитал коменты, сделал исправления, - все равно не работало. А потом попробовал вместо document.documentElement.clientWidth вставить document.body.clientWidth - и все заработало!
Поставил, во всех браузерах работало, кроме ИЕ. Почитал коменты, сделал исправления, - все равно не работало. А потом попробовал вместо document.documentElement.clientWidth вставить document.body.clientWidth - и все заработало!
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Про резиновую верстку