Раздел: Создание сайта / HTML + CSS Когда я начинал интересоваться адаптивной вёрсткой, я не смог найти хорошей компьютер с трубчатым монитором и разрешением 1024 на 768 пикселей, так вот если. Здравствуйте! Подскажите, верстка под 17 дюймов - это какая должна.
Разное » (X)HTML/CSS » верстка под 17 дюймовый монитор .
Зум шрифта и верстка / Хабрахабр. До того как у меня появился монитор 2.
Вёрстка веб-страниц — создание структуры html-кода, размещающего
элементы. На момент 2010 года веб-ресурс может быть открыт на любом
мониторе от телевизора с предустановленным браузером до мобильного . Валидная верстка веб-сайта — написание HTML и CSS кода, Сайт должен быть протестирован на разных разрешениях монитора. В 2006 году большинство пользователей имело экран монитора 800*600. боковая колонка смещается согласно расположению в HTML и меняет. У каждого свои элементы, своя вёрстка, свои потребности.
Родное разрешение идеально подходило для восприятия любых текстов. Мониторы тех, кто подготавливал контент и их читателей — примерно совпадали. Поэтому, если у читателя не было проблем со зрением, то он почти всегда получал хорошо оптимизированый под свое разрешение размер шрифта. В последнее время большие мониторы существенно подешевели и повсеместно распространились широкоформатники, что привело к некоторым неудобствам с сайтами, оптимизированных на поддержку малых разрешений. Я использую разрешение 2.
У меня нет проблем со зрением, но когда я читаю длинную статью, я хочу делать с максимальным комфортом. У меня расстояние до монитора порядка 1- го метра. Откинувшись в кресло, расстояние увеличивается где- то до 1,5 м. Я пробовал менять DPI монитора, включал большой шрифт как дефолтовый для страниц и/или системы, но все это приводит к разным неудобствам.
В итоге, я остановился на выставлении зума для вэб- страниц, благо ФФ запоминает выставленный зум для домена. Вы тестируете верстку при разном зуме? По мере его использования, я столкнулся с тем, что мало кто из верстальщиков тестирует свои странички на увеличенном зуме. Верстальщики очень старательно оптимизируют сайт для «ископаемых» разрешений экрана, но совершенно не думают о том, как будет смотреться их верстка на больших экранах. Если верстка резиновая, то проблемы практически нет: можно выставить гигантский шрифт и он распределится по всему экрану.
Но, для страниц со статической шириной, владелец широкоформатника вынужден смирится с тем, что 5. Причем зум не облегчает ситуацию, а скорее усугубляет: шрифт становится больше, но при такой же ширине колонки его влезает на строку меньше. Текст становится крупнее, но напоминает чтение с какого- то длинного рулона. Особенно это актуально для информационных изданий, которые практикуют три колонки: две по краям для новостей, меню, баннеров и прочего мусора и одну центральную.
Казалось бы для таких сайтов самое главное текст и верстальщик должен думать в первую очередь о нем и удобстве восприятия. Но почему- то, верстальщик озабочен только проблемами тех, у кого разрешение экрана 8. Он впишется целиком в экран и размер шрифта будет максимально комфортен. Но о том, что на большом разрешении, сайт будет выглядеть как чек из супермаркета, без возможности исправить хоть что- то даже зумом — почему- то многие не задумывается. Некоторые издания делают такую верстку, но при этом она правильно реагирует на зум: вытягивается по ширине (то есть ведет себя почти как резиновая). Но в большинстве случаев, ширина страницы не меняется. По- моему, это очень актуально для сегодняшнего верстальщика.
Понятно, что всем не угодишь: малые разрешения тоже нужно поддерживать. Тем более, что есть мобильные устройства, а о существовании поддомена для смартфонов знают далеко не все.
Решить проблему можно наличием кнопки или выпадающего списка, с шаблонами для разных разрешений. Ну а автоматический детект разрешения посетителя с выбором соответствующего формление — это вообще мечта.
Блочная верстка. В последнее время верстка на дивах занимает лидирующее положение. При всех ее преимуществах, она более чувствительна к зуму, о чем также многие забывают. В этом плане такой контейнер как столбец таблицы ведет себя более предсказуемо: он просто растягивается в ширину и/или высоту. С дивами же можно ожидать чего угодно: наплыва текста друг на друга, съезд колонок значительно в сторону от заголовков, вылезание текста из рамок и т.
Выглядит это уже совершенно нечитабельно. Я не агитирую за табличную верстку и не разжигаю холивар, я просто хочу обратится к верстальщикам: тестируйте свою верстку в зуме! Закончили верстку? Нажмите пару раз «Ctrl +» и посмотрите не едет ли у вас что- то. Мало ли на каком зуме будут смотреть вашу страницу: может кто- то будет лежать на диване и листать ее пультом.
Ниже на скриншотах типичные проблемы зума в блочной верстке (картинки кликабельны)Съехавшая кнопка «Найти» ничто, по сравнению с колонкой «Последние статьи раздела»: в ней видны только отдельный буквы. До зума — ее ширина была равна ширине заголовка. И как видите по размерам картинки — шире 1. Таже проблема, колонка «В этот день» позволяет разобрать ровно по одной букве в каждой строке.
Колонка «Кино» практически выдержала зум, из нее пропало всего несколько букв. К вики — вообще никаких претензий. Во- первых, верстка резиновая. Во- вторых, шрифт без засечек (зумить можно меньше). Ничего не плывет, не налезает, все блоки на своих местах.
Единственный косяк — верхний блок с обращением основателя, текст которого при зуме стал гигантским и полностью залез на заголовок статьи. Гугл, великий и ужасный, гуру вэб- приложений и интерфейсов тоже не думает о зуме.
На скриншоте видно, что при небольшом зуме — текст уплывает вправо и его невозможно читать. Изменить ширину листа нельзя. Имеем пустые пространства и невозможность сделать размер шрифта более комфортным. Учитывая что это приложение для документов (то есть чтение, тут вообще самое главное) считаю это громадным минусом. А вот и любимый хабр : ) Правда это рекламная страница партнера. Вполне вероятно что и верстку делали те, кто разместил информацию.
Как видим часть текста наплывает, а текст в серых блоках — безвозвратно скрывается под нижней границей. Примеров на самом деле больше, просто не всегда вспоминаешь о том, что хотел написать статью о зуме, когда встречаешь такое безобразие. Если вы пользуетесь зумом на страницах, то наверняка встречали такие примеры. Если вам покажется что зум чрезмерно большой — вспомните о разнице в разрешении. Бороться с этим сейчас намного проще, благодаря плагинам и онлайновым решениям, форматирующим контент в удобном виде.
Однако, хотелось бы, чтобы все таки верстальщики обратили внимание на тех, у кого большие мониторы. Нам надоело читать «портянку» в центре экрана : ) Сделайте нам хоть кнопки для оптимизации под широкоформатник или, хотя бы, уберите косяки при зуме. UPD: В топике идет речь об увеличении размеров шрифта (в установках стоит «увеличивать только текст») а не о зуме всех элементов.