Чи погано з точки зору сумісності використовувати числа пікселів у CSS замість відсотків? Як щодо нижчих дозволів? Чи добре працювати з ними в межах 1-100?
Відповіді:
Це складне запитання, оскільки відповідь здебільшого залежить від вашої ситуації.
Пікселі не такі вже й погані, я в основному їх теж використовую. (Іноді навіть для розмірів шрифтів.)
Зазвичай я фіксую зовнішній елемент елемента макета за заданим розміром (пікселі з макетами фіксованої ширини та відсотки з макетами рідини), а на внутрішніх елементах зазвичай встановлюю відсотки, коли це можливо.
Є деякі елементи, які просто неможливо стилізувати з відсотками або ems, особливо більш вигадливі речі від графічних дизайнерів, які не розуміють таких принципів.
Наприклад: якщо на вашому сайті є стовпець із простим стилем, ви можете легко встановити його ширину у відсотках, але якщо у нього є фонове зображення з певною шириною, яке не розроблено з урахуванням масштабування, воно виглядає лише добре з фіксованою шириною. У таких випадках вам доведеться переконатися, що решта сторінки правильно займає решту ширини.
Зверніть увагу, що ви можете використовувати пікселі з відсотками разом.
Наприклад, це фрагмент однієї з моїх останніх веб-програм:
min-width: 800px;
width: 80%;
max-width: 1500px;
Вибір також залежить від того, якого дизайну чи плану ви хотіли б досягти.
Для макета з фіксованою шириною значення пікселів чудові. Якщо дизайнер подарує вам зображення Photoshop, яке містить справді вигадливі речі, які були б надзвичайно складними, навіть подумати про те, як би він змінився, вам неодмінно слід зробити це.
Якщо ваш макет повинен бути динамічним , ви повинні використовувати відсотки, щоб переконатись, що він розширюється із зміною роздільної здатності, і ви можете використовувати наведений вище фрагмент коду, щоб він виглядав кращим у сценаріях, коли в іншому випадку він виглядав би божевільним.
Деякі макети (наприклад, уявіть, якби StackOverflow займав весь простір) виглядали б досить потворно на ширині напр. 1920 пікселів - ширина рядків була б настільки шалено високою, що читати її було б вкрай незручно.
Це те, що max-widthдля. Навіть у деяких динамічних макетах вам доведеться обмежити максимальну ширину вашого сайту, щоб максимізувати зручність та зручність читання.
А також враховуйте менші екрани.
Це правда, що ніхто більше не використовує робочий стіл 800 × 600, але багато людей переглядають Інтернет за допомогою мобільних пристроїв, які мають ще меншу роздільну здатність.
Ось для чого min-width: щоб ваш динамічно розширений макет виглядав менш переповненим при менших результатах.
Сподіваюся, це допоможе.
РЕДАГУВАТИ:
У " Розбиваючій книзі" є кілька дуже приємних думок щодо цієї теми.
РЕДАКТУВАТИ 2:
Я не хочу, щоб моя публікація звучала так, ніби я хочу, щоб ти нав'язував відвідувачам розмір на основі пікселів.
(Мабуть, деякі люди в коментарях мене не так зрозуміли).
Щоб це прояснити:
Я вважаю, що ідеальним макетом є той, який добре підлаштовується під будь-яку можливу роздільну здатність або налаштування.
Однак ми не завжди можемо зробити все ідеально. Час / ресурси та цільова аудиторія є ключовими для визначення того, чи вимагає ваш сайт розширену функціональність чи ні.
Я пропоную вам використовувати правильну річ для даної роботи.
Якщо ви розробляєте веб-сайт, який матиме значний відсоток відвідувачів, які потребують більш досконалих налаштувань, можливо, він того вартий.
(Звичайно, іноді ми просто робимо це для себе, щоб мати відчуття робити все правильно, але це не завжди є фінансово обґрунтованим рішенням).
Тим не менше, вам слід провести належне дослідження щодо того, який це буде сайт, хто буде відвідувачами та подібні речі, перш ніж приймати рішення про макети, і чи варто витрачати час, щоб зробити їх плавними або більш динамічними.
Усі вимірювання мають свої цілі:
Використовуйте пікселі для речей на основі пікселів , таких як межі. Напевно, вам не потрібна межа, яка в кінцевому підсумку має ширину 1,3422 пікселя.
Використовуйте орієнтовані на текст заходи (em, ex) для текстових речей , таких як області вмісту, мітки та поля введення. Це простий спосіб переконатися, що у вас є місце для тексту певної довжини та ширини.
Використовуйте відсотки для віконних речей , таких як стовпці.
Звичайно, є винятки. Наприклад, вам може знадобитися вказати мінімальну ширину стовпця в пікселях. Але дотримуйтесь вищезазначеного, і ваші сторінки будуть добре масштабуватися. ЗАВЖДИ збільшуйте та зменшуйте свої сторінки, щоб побачити, як вони працюють з різними розмірами шрифту та формами браузера - не дивуйтеся згодом.
Думаю, спочатку потрібно зрозуміти проблеми, які існують при роботі з пікселями в CSS:
emінші відносні розміри, ви будете поважати рішення користувачів, які змінили це. Це особливо важливо на текстових веб-сайтах, особливо якщо є більше старих користувачів. З іншого боку, якщо дизайн сайту важливий, я вважаю, що це можливо і виправдано використовувати pxдля визначення розмірів шрифтів, не порушуючи придатність до користування.Врешті-решт, вам потрібно прийняти рішення самостійно, і це залежить від конкретних обставин, але я думаю, що вказувати розмір шрифту в пікселях - це нормально .
До речі, при роботі з emвказати розмір шрифту , це гарна ідея , щоб встановити bodyв font-size: 62.5%. Це означає, що базовий розмір шрифту становить 10 пікселів, отже, 1em - 10 пікселів, 1.6em - 16 пікселів тощо, що полегшує мислення в пікселях під час проектування за допомогою ems . Я все ще вважаю розчаруванням працювати так, особливо коли значення ems каскадні. Є кілька дуже зручних сайтів, таких як PXtoEM.com, які допомагають у цьому.
Екран має піксельний макет , тому пікселі - це інтуїтивний вибір для багатьох речей. Основна проблема тут полягає в тому, що різні користувачі мають різний розмір екрану . Як зазначали інші, використання min-widthі max-widthв пікселях, а також widthу відсотках є корисним способом поваги до розміру екрана, одночасно запобігаючи необгрунтованому стисканню або розтягуванню вашого сайту на дуже маленьких і дуже великих вікнах.
Однак я, як правило, уникаю такого підходу на користь запитів CSS у медіа . Потім ви можете використовувати шматки фіксованої ширини та розширювати макет (серед іншого) із збільшенням розміру екрана. Однак CSS-медіа-запити, як і всі круті веб-технології, страждають через відсутність підтримки браузера. Найголовніше, що IE8 і раніше не підтримують їх, хоча існують виправлення JavaScript. З іншого боку, iPhone та інші портативні пристрої їх підтримують, і я настійно рекомендую їх, якщо ви хочете, щоб ваш сайт виглядав гарно на цих пристроях.
Я думаю, що сітки з фіксованою шириною добре . Сіткові системи із фіксованою шириною, такі як 960 Grid System , досить популярні самі по собі, і існує так багато інших сайтів, які мають фіксовану ширину, що я сумніваюся, що ви б почули багато скарг, якщо б зробили це. Проблема з портативними пристроями, які не мають великих екранів, але тут слід використовувати медіа-запити CSS, щоб можна було вказати все в пікселях, а ваш сайт виглядатиме красиво на робочому столі та на iPhone.
Зрештою, все залежить від того, ким є ваші користувачі, що вам потрібно підтримати та як ви хочете, щоб ваш сайт виглядав, але немає нічого суттєвого неправильного у використанні пікселів у CSS .
Це залежить від того, що ви укладаєте. Наприклад, для стовпців ширина, ймовірно, повинна залежати від розміру тексту, щоб гарантувати, що він буде виглядати оптимально на декількох роздільних здатностях / екранах. Якщо ви хочете розділити свою сторінку на дві частини, слід використовувати відсотки. Але якщо ви хочете, щоб межа між цими двома частинами становила 1 піксель, незалежно від роздільної здатності, використовуйте пікселі.
В основному це залежить від того, хто наймає вас і, отже, від аудиторії вашої роботи. В інституційних цілях (де вміст повинен переважати над формою, як урядовий проект), вам краще працювати з .em або%, їх важче контролювати, але вони будуть дійсно зручними з точки зору доступності.
Якщо говорити про корпоративні веб-сайти (де форма угоди), піксель стане більш точним інструментом для реалізації очікувань вашого клієнта щодо його бренду. Рідкий інтерфейс (%, .em) - це завжди хороша штука, коли це розумно зроблено, але не забувайте перевіряти свій дизайн в екстремальних умовах і переконайтесь, що він буде стабільним.
Якщо ви працюєте з пікселями, ви будете мати абсолютний контроль над остаточним виглядом вашого сайту, але вам доведеться припустити, що деякі користувачі не можуть ефективно працювати з ним.
Найкращий варіант: замість того, щоб розробляти веб-сайт, сумісний для всіх платформ (що призведе до дизайну із багатьма дефіцитами), пропонуйте своїм клієнтам спеціальні версії сайту, адаптовані до будь-якого попиту, що є кращою практикою та кращим бізнесом для дизайнера. ..
Я б сказав, уникайте цього, якщо це можливо, за винятком певних випадків.
Наприклад, для тонкої межі добре просто вказати 1px.
Також для атрибутів max-і min-стилю це нормально. Але тоді зробіть атрибут non-max / min відсотком, якщо це можливо.
max-та min-властивості.
Це справді гарне запитання, яке я вже ставив багато разів. Не будучи жорстким веб-дизайнером (я більше займаюся розробкою), я зазвичай запитував дизайнерів, з якими працюю, про їхні думки, і ось що я перегнав:
Використання відсотків проти пікселів для розмірів елементів тощо - це насправді питання особистого смаку чи вимог у кожному конкретному випадку. Якщо вам це потрібно для масштабування, або воно буде добре масштабувати, використовуйте відсотки. Якщо ні, використовуйте пікселі. Люди тут використовували приклади основних стовпців на сторінці, які, можливо, потребують мінливості, але межі цілком можуть потребувати точності вимірювання пікселів.
Очевидно, що розмір зображень в значній мірі пов'язаний з їх роздільною здатністю та піксельними одиницями, тому я завжди використовую їх у цьому випадку.
Однак використання розміру тексту в порівнянні з пікселем або навіть розміром точок для тексту - це зовсім інший чайник з рибою. Більшість хлопців, з якими я працюю, мають базовий стиль скидання для розмірів шрифтів, який зменшує розмір 1em приблизно до 12 пікселів. Потім вони використовують ems скрізь (або якомога ближче до будь-якого іншого місця) для розміру елементів тексту, елементів керування формою тощо. Це те, як я працюю і зараз, оскільки, здається, це добре працює в різних браузерах, ОС та DPI на настільних та ноутбуках. Однак я не можу поручитися за мобільні пристрої.
Доступність - це головне - якщо вам потрібно зробити щось придатним для людей з обмеженими можливостями або працювати на різноманітних пристроях, навіть речі, які ви можете вважати старими, тоді масштабування буде необхідною вимогою. Вбудуйте його у свою модель для проектування сайту з самого початку, і ви можете зрозуміти, що абсолютний розмір пікселів у цьому випадку навіть не потрібен.
Наприклад, арт-важкий дизайн, ймовірно, буде розроблений в єдиному масштабі, але новому освітньому веб-сайту для користувачів з обмеженими можливостями доведеться працювати в різних ситуаціях.
Тільки пам’ятайте, W3C вклав у свої технічні характеристики різноманітні методи визначення розмірів та масштабування з причини - гнучкості. Робіть те, що найбільше підходить, і добре працює для вашої аудиторії (як раніше говорив Мустард).
Я не фахівець з css / html, але домовленість, яку я використовую, полягає у використанні пікселів для зовнішніх контейнерів та відсотків для внутрішніх об'єктів.
Ще одне емпіричне правило, яке я маю з усіма, хто переглядає мій макет, - це правило трьох пікселів . Рідко, що все буде розташовуватися точно в кожному браузері. Ми домовились, що зусилля перевищують переваги переміщення чогось на три пікселі або менше.
Робіть правильно за замовчуванням. Якщо користувач відвідує ваш сайт із вимкненим javascript і без певних файлів cookie, ви повинні подати йому веб-сторінку, яка є максимально функціональною та доступною.
Ваш замовчуванням таблиця стилів не повинні припускати нічого у вікні браузера, і до сих пір роблять функціональну сторінку, однак огидне, аж до дозволу 320x320 і до необмежених розмірів. Якщо фотографічна вірність настільки важлива, що ви не можете довіряти масштабуванню браузера, а іноді це і так, тоді вам слід використовувати вимірювання пікселів (принаймні мінімальні) для елементів, що інкапсулюють зображення фіксованого розміру, щоб переконатися, що ви не отримаєте важливі речі прикриваються. Вказівка мінімальної ширини разом із відсотками повинна дати вам необхідний контроль, одночасно надаючи своїм користувачам доступність, яка їм потрібна. Навіть якщо доступність зараз не є проблемою, це буде пізніше, якщо сайт буде успішним.
Коли ви робите більше дізнатися про вікно браузера, то це нормально використовувати фіксовані ширини в альтернативних таблицях стилів, якщо важливість збереження проектним обґрунтовує додану роботи.
Якщо ви націлюєтесь на фіксований розмір, то пікселі добре. Але якщо ви хочете, щоб ваш макет виглядав добре на різних роздільних здатностях / розмірах екрана, то вам слід дотримуватися більш відносних показників, таких як відсотки. Більшість людей орієнтуються на останнє.
Це нормально, якщо це те, що потрібно, щоб догодити своєму клієнту. Здебільшого ви не можете збалансувати кількість простору в різних розмірах екрана лише з відсотками. CSS3 медіа-запити тут допомагають, але прийняття все ще є проблематичним.
У більшості випадків я віддаю перевагу пікселю. Наприклад - ширина вмісту за замовчуванням ares: 960px. У "1024" це буде нормально, з невеликими вільними місцями по обидва боки екрану. Помістіть туди якийсь градієнт або фон. У "1280", "1440" чи "1680", або що завгодно - буде більший і більший розрив, але це буде виглядати красиво. Так, за 800 - цей сайт буде негарним. Але кого це цікавить? Усі основні гравці втратили підтримку для 800. Занадто мало людей з такою роздільною здатністю.
Є багато різних сайтів, де %% буде набагато кращим рішенням.
Будівельними блоками екрану є пікселі. Ви не можете помилитися з фіксованими розмірами пікселів. Як згадували інші афіші, ви також можете використовувати відсотки або "ем" для масштабованої заміни.