Начальная

Windows Commander

Far
WinNavigator
Frigate
Norton Commander
WinNC
Dos Navigator
Servant Salamander
Turbo Browser

Winamp, Skins, Plugins
Необходимые Утилиты
Текстовые редакторы
Юмор

File managers and best utilites

Умная адаптация ширины блочных элементов на чистом CSS 2.0. Минимальная ширина браузера


min-width | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0 8.0+ 1.0+ 4.0+ 2.0+ 1.0+ 2.1+ 2.0+

Краткая информация

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

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

Значение ширины элемента будет вычисляться в зависимости от установленных значений свойств width, max-width и min-width. В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных стилевых свойств.

Табл. 1. Ширина элемента Значения свойств Ширина
min-width < width < max-width width
min-width > width > max-width min-width
min-width > width < max-width min-width
min-width < width     width
min-width > width     min-width
min-width >     max-width min-width
min-width <     max-width max-width

Данные из таблицы следует понимать следующим образом. Если значение ширины (width) меньше значения min-width, то ширина элемента принимается равной min-width.

Синтаксис

min-width: значение | проценты | inherit

Значения

В качестве значений принимаются пикселы (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются. inherit наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>min-width</title> <style> #container { min-width: 420px; /* Минимальная ширина контейнера */ } #col1 { background-color: #fc0; /* Цвет фона колонки */ padding: 5px; /* Поля вокруг текста */ float: left; /* Обтекание по правому краю */ width: 150px; /* Ширина левой колонки */ } #col2 { background-color: #c0c0c0; /* Цвет фона колонки */ padding: 5px; /* Поля вокруг текста */ width: 250px; /* Ширина правой колонки */ float: left; /* Обтекание по правому краю */ } </style> </head> <body> <div> <div>Колонка 1</div> <div>Колонка 2</div> </div> </body> </html>

Результат данного примера показан на рис. 1.

Результат использования min-width в браузере

Рис. 1. Результат использования min-width в браузере

Объектная модель

[window.]document.getElementById("elementID").style.minWidth

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

htmlbook.ru

Адаптивная вёрстка: фиксируем минимальную ширину веб-сайта

Как запретить сайту сжиматься меньше разрешенной ширины

Наверняка все кто сталкивался с разработкой веб-сайта в адаптивной вёрстке, при тестировании на совсем экстремально низкой ширине браузера сталкивались с тем что сайт разваливается.Вот и меня не обошла эта проблема стороной, даже учитывая что за основу своего веб-сайта (блога) я выбрал адаптивный шаблон wordpress: twenty fourteen.

Создал несколько записей: всё, казалось, шло отлично, но потом решил немного подредактировать CSS, начал тестировать при разной ширине окна браузера и столкнулся с тем, что при уменьшении сайта меньше 340px вёрстка начинает плыть. Перерыл весь CSS, прошел путь кастомизации шаблона wordpress: twenty fourteen в обратном порядке, дошел до абсолютного голого шаблона и выяснилось, что сам по себе базовый шаблон, плывет на низких разрешениях.

Приведу несколько скриншотов официального шаблона wordpress twenty fourteen

Ширина 337px

Ширина 337px

Шаблон ведет себя корректно и при ширине окна браузера в 258px.

Ширина 258px

Ширина 258px

Но при 241px шаблон начинает расползаться. И соответственно, перестаёт работать меню, поскольку его перекрывает съехавшее окно поиска.

Ширина 241px

Ширина 241px

Обратите внимание, что если заголовок веб-сайта Twenty Fourteen заменить более длинной надписью, то шаблон начнёт расползаться еще раньше чем 258px, в моём случае я столкнулся с тем, что иконка поиска съезжает уже при ширине окна в 340px.

Проблема решается очень просто, экспериментально установив минимальное разрешение по ширине при котором веб-сайт не плывет, а в случае шаблона wordpress twenty fourteen это примерно 260px (добавил 2px для круглого счёта и чтобы между заголовком и иконкой поиска оставалось хотя бы какое-нибудь расстояние), вставляем следующий фрагмент в файл wp-content\themes\twentyfourteen\style.css

@media screen and (max-width: 260px) { .site{ width: 260px; } }

Мы зафиксируем ширину экрана и запретим дальнейшее сжатие. Результат будет выглядеть вот так.

Ширина 241px

Ширина 241px

Для тех кто не знаком с устройством CSS, дам краткое пояснение

@media screen and (max-width: 260px) { описание стиля }

строка обозначает что при разрешении окна браузера (@media screen) менее чем 260px (max-width: 260px) будет использоваться описание стиля.

В описании стиля задаём фиксированный размер для div класса site (главный div шаблона twenty fourteen) в 260px.

.site{ width: 260px; }

При попытке открыть сайт в окне браузера шириной менее 260px на экране автоматически будут появляться полосы прокрутки но вёрстка сайта плыть не будет, поскольку div не будет сжиматься менее 260px.

petukhovsky.com

html - Как задать минимальную ширину сайта?

Создал страницу для тестирования отображения этой страницы на мобильных устройствах. Указал в head name width=800, а wrapper min-width: 800px; и width: 100%;.

Проверяю на android chrome - браузер не чувствует минимальной ширины wrapper и по умолчанию часть страницы за пределами видимости (пример 1), когда требуется, чтобы браузер понимал, какой минимальной ширины страницу ему нужно показать (пример 2).

Как правильно задать минимальную ширину страницы так, чтобы мобильный браузер изначально ее показал, как на примере 2?

Пример 1:

Пример 2:

html, body { padding: 0; margin: 0; width: 100%; } .wrapper { box-sizing: border-box; min-width: 800px; width: 100%; padding: 20px; background: antiquewhite; } <!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=800, initial-scale=1"> <title>Title</title> <link href="/css/common.css" rel="stylesheet"> </head> <body> <div> Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. </div> </body> </html>

ru.stackoverflow.com

Умная адаптация ширины блочных элементов на чистом CSS 2.0 / Хабр

Верстая очередной проект (или ещё только проектируя макетную сетку) многие сталкивались с дилеммой — использовать фиксированную ширину макета или «резиновую» сетку, адаптируемую под размер окна браузера.

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

Фиксированная ширина макетной сетки Вёрстку загоняют в горизонтальный габарит 960—980 пикселей (чтобы на большинстве устройств в большинстве разрешений всё входило), что при больших горизонтальных размерах окна выглядит как-то зябко — тонкая вертикальная полоса полезного содержимого страницы и огромные бесполезные поля неиспользуемого пространства по бокам.«Резиновая» макетная сетка по ширине окна Опять же при больших горизонтальных размерах окна есть другая проблема: строки текста становятся очень длинными, и читать их становится совсем не так комфортно, как хотелось бы. Ещё одна распространённая проблема этого решения — боковые отступы при больших горизонтальных размерах окна уже не так удачно визуально согласуются с горизонтальными размерами элементов, что также не добавляет комфорта при взгляде на свёрстанный макет.

Хочу предложить нехитрый вариант решения — ограничить минимальный горизонтальный размер фиксированным значением в пикселях, а максимальный сделать относительным в процентном соотношении к ширине окна. Это очень банально решается простыми средствами ещё 2 версии спецификации CSS.

Update: Хочу оговориться, что речь не идёт о классическом эффекте резины и об адаптации под абсолютно все разрешения, скорее лишь про некий разумный диапазон разрешений, под который проектируется макет. В примерах ниже — это классический десктопный диапазон разрешений с горизонтальным габаритом разрешения от 1024 пикселей.

Ещё раз акцентирую внимание: в посте не идёт речь про решение для всех видов устройств и все диапазоны разрешений. В рамках одного макета эта задача не решаема в принципе, для её решения так или иначе потребуется несколько макетов. Мухи отдельно, котлеты отдельно.

Создаём контейнер макета:<html> <head> ... </head> <body> <div> ... </div> </body> </html> Оформляем его незатейливым кодом стиля:div.page-container { min-width: 960px; max-width: 75%; margin: 0 auto; padding: 0; } Однако этого решения кому-то может показаться мало в силу того что при очень больших горизонтальных размерах окна опять проявляются проблемы с длиной строк. Это решается настолько же простым дополнительным приёмом: создание дополнительного внешнего контейнера внутри уже описанного и ограничение его максимальной ширины фиксированным значением (мне субъективно кажется, что лучше всего подходят значния в диапазоне 1400—1600 пикселей). Опять же используем лишь средства CSS 2.0. Такое решение вместо предложенного в первом комментарии простого добавления ширины в процентах для исходного контейнера будет работать ещё и в IE, который вплоть до 9 версии не понимает одновременного указания значений.

Дополняем HTML:

<html> <head> ... </head> <body> <div> <div> ... </div> </div> </body> </html> И немного меняем CSS:div.page-container { max-width: 75%; min-width: 960px; margin: 0 auto; padding: 0; } div.page-container-inner { min-width: 960px; max-width: 1600px; margin: 0 auto; padding: 0; } Как видите — решение предельно просто и достаточно универсально, может применяться для любых блочных элементов.

habr.com

Стандартная ширина сайта в пикселях

Быстрая навигация по этой странице:

Существует ли общепринятая стандартная ширина сайта? Какой она должна быть? Есть ли какие-то особенности для разных проектов? Я эти вопросы задавал сам себе множество раз, теперь попробую дать на них ответ, исходя из накопившегося опыта и массы прочитанной в Интернете информации.

стандартная ширина сайта

О важности вопроса

Если Вы задавали или задаете себе такой же вопрос, то это значит, что вы находитесь на правильном пути, поскольку в действительности ширина страницы сайта имеет ключевое значение в его дизайне.

Дело в том, что если если выбранная вами ширина будет больше, чем разрешение экрана у посетителя, то сайт в полном объеме не поместится в браузере, появится горизонтальная полоса прокрутки. В результате этого пользователь не увидит часть информации или ему будет некомфортно работать с вашим проектом. Итог будет один — уменьшение поведенческих факторов.

Если вы, напротив, зададите слишком маленькую ширину, особенно если будет слишком маленькой контентная часть, то, опять-таки, ваш сайт вновь будет смотреться несуразно и некомфортно. Попробуйте проверить сайт в разных разрешениях и сами в этом убедитесь.

Итак, какой же должна быть ширина сайта в пикселях?

Рассчитываем оптимальный вариант

Для того, чтобы правильно ответить на этот вопрос, нужно обратиться к статистике.

Для моего проекта на момент написания статьи сервис Liveinternet выдавал такую статистику (показаны строки, имеющие долю в статистике более 5 процентов):

  • 1366×768 — 23.7%
  • 1280×1024 — 15.1%
  • 1024×768 — 14.7%
  • 1280×800 — 9.5%
  • 1920×1080 — 8.4%
  • 640×480 — 6.2%
  • 1600×1200 — 5.9%

Как видно из статистики, подавляющее большинство пользователей использует мониторы с разрешением шириной от 1280 пикселей и выше. Тем не менее, обратите внимание на строку, выделенную жирным шрифтом: 14,7 % имеет разрешение 1024 пикселей. Это в среднем каждый шестой/седьмой пользователь — достаточно большой процент, который имеет смысл учитывать.

Исходя из этого, что ширина вашего сайта не должна превышать 1024 пикселей, иначе каждому шестому посетителю будет неудобно пользоваться вашим проектом.

Однако 1024 пикселя — это разрешение монитора, а фактически площадь страницы в браузере меньше, так как часть экрана съедает полоса прокрутки (скролл) — это около 24 пикселей.

Следовательно, наша страничка должна открываться не более, чем на 1000 пикселей. Часто дизайнеры или заказчики берут еще 20 пикселей в запас и делают сайт на 980 px.

Таким образом, наиболее оптимальной шириной является 980-1000 px.

Почему часто используется 960?

Если Вы обратите внимание на шаблоны для WordPress (как, впрочем, и для многих других CMS), то вы заметите, что многие из них ориентированы на 960 пикселей.

Зачем же отклоняться от оптимального варианта в меньшую сторону? Здесь следует отметить, что 960 — это математически очень «удобное число», так как, в отличие от 980, оно делится на каждое из этих чисел: 6, 8, 12, 16, 24 (и, соответственно, на множество других).

Это удобно для создания дизайна по так называемой «сетке» (grid system) — когда при создании макета он мысленно делится на 6/8/12 и т.д. частей и все блоки макета выстраиваются по этим линиям — получается симметрично и красиво (подробнее про это написано на 960.gs и других ресурсах).

Если же вы делаете или заказываете дизайн с нуля и просто хотите, чтобы, например, контентная часть занимала 600 пикселей, а справа был сайдбар — тогда вам необязательно ориентироваться на grid system и 960 пикселей.

Осторожность с резиновым макетом

В каком-то смысле решением рассматриваемой проблемы является резиновый макет — ширина страницы растягивается под ширину экрана, потому заранее учтены все варианты дисплеев.

Однако, по моему субъективному мнению, неограниченно резиновый макет — это зло, так как на дисплее с разрешением более 2000 пикселей весь ваш текст вытянется в несколько длинных строк, которые будет сложно читать.

Представьте, что вы читайте книгу, в которой одна строка имеет длину, предположим, в семьдесят сантиметров или в один метр. Удобно ли вам будет ее читать? Полагаю, что нет, ведь не зря сам по себе книжный формат в среднем не предполагает более 60-80 символов на одной строке. Потому я такую технологию создания сайта не рекомендовал бы.

Потому, если вы делаете или заказываете резиновый макет, позаботьтесь о посетителе — поставьте ограничение около 1200-1300 px как максимальную ширину вашей страницы.

www.runcms.org

Сделать ширину сайта в зависимости от разрешения монитора. @ Media — Примеры

В 2006 году большинство пользователей имело экран монитора 800*600. Но время неумолимо и в какой-то момент "нормальным" стал 1024*768. У веб-ресурсов, ориентированных на меньшее разрешение, появилось пустое пространство по бокам. Всё большую популярность стали приобретать "резиновые" сайты, которые создаются путём использования

  1. @Media,
  2. относительных величин.
Благодаря им теперь не нужно искать оптимальную ширину сайта.

@Media CSS

Для того, чтобы адаптировать дизайн web-проекта под разные устройства (мобильные телефоны, планшетники, принтеры и т.п.) применяется @Media. Из всего многообразия types и Queries, как правило, внедряют print и width. Рассмотрим последний. Он влияет на отображение сайта в окне браузера разной ширины. Поэтому для того, чтобы увидеть его в действии, достаточно уменьшить размеры окна браузера Уменьшить окно браузера.

Попробуйте это сделать прямо сейчас. И вы увидите как боковая панель данного блога распадается (поиск перемещается вниз, содержание переходит в тело статьи), в меню сокращаются списки, убирается надпись "Дата обновления" и т.д.

Макет с изначальными значениями блоков указан здесь. Добавим правила перед тегом </style>

@media (max-width: 930px) { .content-wrapper {padding: 0;} } @media (max-width: 930px) and (min-width: 470px) { aside {position: static; width: 100%; background: #ccc;} } @media (max-width: 469px) { body {font: .9em/1em "Helvetica Neue",Arial,Helvetica,sans-serif;} aside {display: none;} } Вместо px лучше использовать em. Для чего значение px нужно разделить на значение font-size в px. Например, 1600/16=100, а именно media='(min-width: 100em)'.

CSS стили можно как непосредственно добавить в код страницы, так и воспользоваться внешним файлом, например:

<link rel='stylesheet' href='URL_по_умолчанию.css' /> <link rel='stylesheet' media='(min-width: 1600px)' href='URL_большой.css' /> <link rel='stylesheet' media='(max-width: 1599px) and (min-width: 800px)' href='URL_средний.css' /> <link rel='stylesheet' media='(max-width: 799px)' href='URL_маленький_экран.css' />

Размещение экрана как "пейзаж" (ширина больше высоты) и "портрет" (ширина меньше высоты)

@media all and (orientation:landscape) { /* стили для пейзажа */ } @media all and (orientation:portrait) { /* стили для портрета */ } или <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

shpargalkablog.ru

Считаем ширину экранов у посетителей сайта / Хабр

Вступление
Недавно обсуждал с девушкой-дизайнером, под какие же размеры экрана стóит рисовать сайты. Аргументы наши были, мягко говоря, необоснованными: — У меня сайт на домашнем компьютере слишком широкий, надо сделать под широкий экран. — Надо делать под маленькие экраны. Куча народа лезет в Интернет с мобильных устройств. Больших мониторов нет почти ни у кого. — Да куча народу с такими мониторами! У всех моих знакомых мониторы большие. — Да у тебя знакомые — дизайнеры да фотографы. А у народа таких мониторов нет!

Понятно, что нужны были более веские аргументы — пора обратиться к статистике.

Подсчёт

Существует некоторое количество сайтов, предоставляющих доступ к собранным данным о своих посетителях. Один из таких сайтов — бывший SpyLog, а ныне — Openstat, выдающий и отчёт о разрешающей способности экранов. Данные там, на первый взгляд, не очень полезны: знание того, что самое популярное разрешение — 1366×768 — встречается у 19 процентов посетителей, мне мало поможет. Но мы можем получить эти данные в виде отдельного файла, который можем обработать. Доступны 4 формата — PDF, XLS и два текстовых: CSV и Tab separated, названный здесь tsv, который мы и возьмём.

Бóльшая часть файла — строки вида

1366x768 4097016,19 18,43 % 263923118 1147661296Из этого нам интересна ширина (первое число в левом поле) и количество просмотров (правое поле). Предпоследнее поле — число визитов — если его выразить в относительных величинах, от числа просмотров отличается незначительно. Для каждой возможной ширины посчитаем сумму вхождений этой ширины, отбросив данные о высоте (для веб-дизайнера она не так важна). Процесс подсчёта можно совместить с получением файла с обрабатываемыми данными:wget 'https://www.openstat.ru/rest/v0.3/ct:openstat:trends/display/columns/20120820-20120920?column=0%0Dvisitors_sum_average&column=0%0Dvisitors_sum_average_verticalpercent&column=0%0Dsessions_sum&column=0%0Dpageviews_sum&primary_column=0&view_id=1810&format=tsv' -O - \ | perl -nlaF'\t' -MList::Util=max \ -e '$F[0]=~s/x.*//||next;$sum{$F[0]}+=$F[4];END{for$k(0..max(keys%sum)){print"$k\t$sum{$k}"}}'

Получим такой список пар ширины и суммарного количества посетителей:

0 1 445931 2 3 4 5 6 7 8 9 10 29183 11 ...

Понятно, что учитывать все возможные значения ширины смысла нет — надо оценивать диапазоны значений. Посчитаем сумму количества посетителей, имеющих определённую ширину экрана, с количеством посетителей, обладающих экранами меньшей ширины. Можно сделать это в каком-либо офисном пакете (в моём случае — LibreOffice), в нём же можно сразу построить график. Получившаяся таблица с графиком — ge.tt/9iHIH8O (110 килобайт).

Слегка приукрасим график — добавим метки популярных значений:

Некоторые выводы
  • По состоянию на сентябрь 2012 года наиболее популярная (29 %) ширина — 1280 точек, кроме того, чуть более половины посетителей имеют мониторы с шириной, не превышающей 1280 точек. С другой стороны, количество людей с большими мониторами, шире 1280 точек, тоже весьма велико и приближается к половине.
  • Другие широко распространённые значения — 1366 (19 %), 1024 (13 %), 1920 (10 %).
  • Более 80 % посетителей сайтов обладают экранами шириной до 1600 точек. Экраны шире 1920 точек ещё весьма редки — их доля составляет примерно четверть процента.
  • Ширина «почти 800 точек», которая была популярна у веб-дизайнеров лет 10–15 назад, сейчас встречается примерно в пяти процентах случаев, да и то, бóльшая их часть — это мобильные устройства.
  • Исходя из того, что доля браузера Opera Mini некоторыми счётчиками (например liveinternet.ru) оценивается более чем в 12 процентов (openstat оценивает её гораздо скромнее — 3,75 %), можно предположить, что доля мобильных устройств и, как следствие, маленьких экранов, всё-таки выше, чем на этом графике. Похоже, устройства с Оперой Мини просто не попадают в статистику — в ней несколько лет назад не было JavaScript.

habr.com


 

..:::Новинки:::..

Windows Commander 5.11 Свежая версия.

Новая версия
IrfanView 3.75 (рус)

Обновление текстового редактора TextEd, уже 1.75a

System mechanic 3.7f
Новая версия

Обновление плагинов для WC, смотрим :-)

Весь Winamp
Посетите новый сайт.

WinRaR 3.00
Релиз уже здесь

PowerDesk 4.0 free
Просто - напросто сильный upgrade проводника.

..:::Счетчики:::..