Czy źle jest pracować z pikselami w CSS? [Zamknięte]

Czy używanie liczb pikseli w CSS zamiast wartości procentowych jest złe? A co z niższymi rozdzielczościami? Czy można z nimi pracować w zakresie 1-100?

To trudne pytanie, ponieważ odpowiedź zależy głównie od Twojej sytuacji.

Piksele nie są takie złe, przeważnie ich też używam. (Czasami nawet dla rozmiarów czcionek).
Zwykle naprawiam zewnętrzny element blokowy układu o określony rozmiar (piksele z układami o stałej szerokości i procenty z układami płynnymi), a na elementach wewnętrznych zwykle ustawiam wartości procentowe, gdy tylko jest to możliwe.

Są elementy, których po prostu nie da się stylizować za pomocą procentów lub ems, szczególnie te bardziej wyszukane, pochodzące od grafików, którzy nie rozumieją takich zasad.

Na przykład: jeśli masz w swojej witrynie kolumnę o prostym stylu, możesz łatwo ustawić jej szerokość na wartość procentową, ale jeśli ma obraz tła o określonej szerokości, który nie jest zaprojektowany z myślą o skalowaniu, wygląda tylko dobrze o stałej szerokości. W takich przypadkach należy upewnić się, że reszta strony prawidłowo zajmuje pozostałą szerokość.

Pamiętaj, że możesz używać pikseli razem z wartościami procentowymi.
Na przykład jest to fragment jednej z moich najnowszych aplikacji internetowych:

min-width: 800px;
width: 80%;
max-width: 1500px;

Wybór zależy również od tego, jaki projekt lub układ chcesz osiągnąć.

W przypadku układu o stałej szerokości wartości pikseli są prawidłowe. Jeśli projektant da ci obraz Photoshopa, który zawiera naprawdę fantazyjne rzeczy, które byłyby niezwykle skomplikowane, aby nawet pomyśleć o zmianie rozmiaru, zdecydowanie powinieneś to zrobić.

Jeśli twój układ musi być dynamiczny , powinieneś użyć wartości procentowych, aby upewnić się, że rozszerza się wraz ze zmianą rozdzielczości, i możesz użyć powyższego fragmentu kodu, aby wyglądał lepiej w scenariuszach, w których inaczej wyglądałby szalenie.

Niektóre układy (np. Wyobraź sobie, że StackOverflow zajmie całą przestrzeń) wyglądałyby dość brzydko na szerokości np. 1920 pikseli - szerokości linii byłyby tak szalenie wysokie, że odczytanie ich byłoby wyjątkowo niewygodne.
Po to max-widthjest. Nawet w niektórych dynamicznych układach będziesz musiał ograniczyć maksymalną szerokość witryny, aby zmaksymalizować użyteczność i czytelność.

Weź również pod uwagę mniejsze ekrany.
Co prawda nikt już nie korzysta z pulpitu 800 × 600, ale wiele osób przegląda sieć za pomocą urządzeń mobilnych o jeszcze mniejszej rozdzielczości.
Po to min-width: aby Twój dynamicznie rozszerzany układ wyglądał na mniej zatłoczony na mniejszych rozdzielczościach.

Mam nadzieję, że to pomoże.

EDYTOWAĆ:

The Smashing Book zawiera bardzo miłe przemyślenia na ten temat.

EDYCJA 2:

Nie chcę, aby mój post brzmiał tak, jak chcę, abyś wymuszał na odwiedzających rozmiar oparty na pikselach.
(Najwyraźniej niektórzy w komentarzach źle mnie zrozumieli).

Aby to wyjaśnić:

Uważam, że idealny układ to taki, który dobrze dopasowuje się do każdej możliwej rozdzielczości lub ustawienia.
Jednak nie zawsze możemy zrobić wszystko idealnie. Czas / zasoby i docelowi odbiorcy są kluczem do określenia, czy witryna wymaga tej zaawansowanej funkcjonalności, czy nie.

Sugeruję, abyś użył właściwej rzeczy do danej pracy.

Jeśli tworzysz witrynę, która będzie miała znaczny procent użytkowników wymagających bardziej zaawansowanych zmian w witrynie, może to być tego warte.
(Oczywiście czasami robimy to dla siebie, aby mieć poczucie, że robimy coś we właściwy sposób, ale nie zawsze jest to decyzja rozsądna finansowo).

Mimo to, przed podjęciem decyzji o układach należy przeprowadzić odpowiednie badania, jakiego rodzaju będzie to witryna, kim będą odwiedzający i tego typu rzeczy, i czy warto poświęcić czas, aby uczynić je płynnymi lub bardziej dynamicznymi.

Wszystkie pomiary mają swoje cele:

• Użyj pikseli do rzeczy opartych na pikselach , takich jak obramowania. Prawdopodobnie nie chcesz obramowania, które kończy się na szerokości 1,3422 pikseli.

• Używaj miar zorientowanych na tekst (em, ex) do rzeczy opartych na tekście , takich jak obszary treści, etykiety i pola wprowadzania. To łatwy sposób na zapewnienie miejsca na tekst o określonej długości i szerokości.

• Użyj procentów dla rzeczy opartych na oknach , takich jak kolumny.

Oczywiście są wyjątki. Na przykład możesz chcieć określić minimalną szerokość kolumny w pikselach. Ale postępuj zgodnie z powyższym, a Twoje strony będą dobrze skalować. ZAWSZE powiększaj i pomniejszaj strony, aby zobaczyć, jak działają z różnymi rozmiarami czcionek i kształtami przeglądarki - nie zdziw się później.

Rozmiary czcionek

Myślę, że najpierw musisz zrozumieć problemy związane z pracą z pikselami w CSS:

• Zoom w starszych przeglądarkach jest uszkodzony. Na przykład IE6 i IE7 nie zmieniają rozmiaru tekstu podczas powiększania . Wysokość linii też może być dziwaczna. Te problemy nie występują w nowoczesnych przeglądarkach, ale są powodem, dla którego wiele osób unika używania pikseli do określania rozmiarów czcionek.
• Wszyscy zobaczą tekst tego samego rozmiaru, jeśli określisz rozmiar czcionki w pikselach. Przeglądarki mają domyślny rozmiar akapitów 16px, więc jeśli używasz tylko emi innych względnych rozmiarów, uszanujesz decyzję użytkowników, którzy to zmienią. Jest to szczególnie ważne w witrynach z dużą ilością tekstu, zwłaszcza jeśli jest więcej starszych użytkowników. Z drugiej strony, jeśli projekt witryny jest ważny, myślę, że jest możliwe i uzasadnione użycie pxdo określenia rozmiarów czcionek bez naruszania użyteczności.

Ostatecznie musisz podjąć decyzję samodzielnie i zależy to od konkretnych okoliczności, ale myślę, że określenie rozmiaru czcionki w pikselach jest w porządku .

Nawiasem mówiąc, podczas pracy z emaby określić rozmiar czcionki jest to dobry pomysł , aby ustawić bodysię font-size: 62.5%. Oznacza to, że podstawowy rozmiar czcionki to 10px, więc 1em to 10px, 1,6em to 16px i tak dalej, co ułatwia myślenie w pikselach podczas projektowania przy użyciu ems . Nadal uważam, że praca w ten sposób jest frustrująca, zwłaszcza gdy wartości ems spadają. Istnieje kilka bardzo przydatnych witryn, takich jak PXtoEM.com, które pomagają w tym.

Problemy z układem

Ekran jest oparty na pikselach , więc piksele są intuicyjnym wyborem w wielu przypadkach. Głównym problemem jest to, że różni użytkownicy mają różne rozmiary ekranu . Jak zauważyli inni, używanie min-widthi max-widthw pikselach wraz z widthprocentami jest pomocnym sposobem przestrzegania rozmiaru ekranu, jednocześnie zapobiegając nieuzasadnionemu zgniataniu lub rozciąganiu witryny w bardzo małych i bardzo dużych oknach.

Jednak generalnie unikałbym tego podejścia na korzyść zapytań o media CSS . Następnie możesz użyć fragmentów o stałej szerokości i poszerzać układ (między innymi) wraz ze wzrostem rozmiaru ekranu. Jednak zapytania o media CSS, podobnie jak wszystkie fajne technologie internetowe, cierpią z powodu braku obsługi przeglądarki. Przede wszystkim IE8 i wcześniejsze ich nie obsługują, chociaż są poprawki JavaScript. Z drugiej strony obsługują je iPhone i inne urządzenia przenośne i zdecydowanie polecam je, jeśli chcesz, aby Twoja witryna ładnie wyglądała na tych urządzeniach.

Myślę, że siatki o stałej szerokości są w porządku . Systemy siatki o stałej szerokości, takie jak 960 Grid System, są wystarczająco popularne same w sobie, a jest tak wiele innych witryn, które mają stałą szerokość, że wątpię, abyś usłyszał wiele skarg, gdybyś to zrobił. Problemem są urządzenia przenośne, które nie mają dużych ekranów, ale w tym przypadku należy używać zapytań o media CSS, więc można określić wszystko w pikselach i sprawić, by Twoja witryna wyglądała pięknie na pulpicie i na iPhonie.

Wniosek

Ostatecznie wszystko zależy od tego, kim są Twoi użytkownicy, co musisz wspierać i jak ma wyglądać Twoja witryna, ale nie ma nic złego w używaniu pikseli w CSS .

To zależy od tego, co stylizujesz. Na przykład w przypadku kolumn szerokość powinna prawdopodobnie zależeć od rozmiaru tekstu, aby zapewnić optymalny wygląd na wielu rozdzielczościach / ekranach. Jeśli chcesz podzielić swoją stronę na dwie części, użyj wartości procentowych. Ale jeśli chcesz mieć obramowanie 1 piks. Między tymi dwoma częściami, niezależnie od rozdzielczości, użyj pikseli.

Zasadniczo zależy to od tego, kto Cię zatrudnia, a co za tym idzie, odbiorców Twojej pracy. Dla celów instytucjonalnych (gdzie treść powinna przeważać nad kształtem, jak projekt rządowy), lepiej pracuj z .em lub%, trudniej je kontrolować, ale będą naprawdę przyjazne dla użytkownika pod względem dostępności.

Jeśli mówimy o witrynach korporacyjnych (gdzie kształt to transakcja), piksel będzie dokładniejszym narzędziem spełniającym oczekiwania klienta dotyczące jego marki. Płynny interfejs (%, .em) jest zawsze dobry, gdy jest inteligentnie wykonany, ale nie zapomnij sprawdzić swojego projektu w ekstremalnych warunkach i upewnić się, że będzie stabilny.

Jeśli pracujesz z pikselami, będziesz mieć absolutną kontrolę nad ostatecznym wyglądem swojej witryny, ale będziesz musiał założyć, że niektórzy użytkownicy nie będą mogli z nią wydajnie pracować.

Najlepsza opcja: zamiast projektować stronę internetową kompatybilną z wszystkimi platformami (co zaowocuje projektem z wieloma brakami), zaproponuj swoim klientom specjalne wersje strony dostosowane do każdego zapotrzebowania, co jest lepszą praktyką i lepszym biznesem także dla projektanta. ..

Powiedziałbym, że unikaj tego, jeśli to możliwe, z wyjątkiem niektórych przypadków.

Na przykład w przypadku cienkiej ramki wystarczy podać 1 piksel.

Również dla atrybutów max-i min-stylu jest w porządku. Ale jeśli to możliwe, ustaw atrybut non-max / min jako wartość procentową.

To naprawdę dobre pytanie, które zadawałem już wiele razy. Nie będąc hardkorowym projektantem stron internetowych (jestem bardziej po stronie programistów) Zwykle pytałem projektantów, z którymi pracuję, o ich opinie, a oto co wydestylowałem:

Używanie wartości procentowych w porównaniu z pikselami do określania rozmiaru elementów itd. Jest tak naprawdę kwestią osobistego gustu lub wymagań w każdym konkretnym przypadku. Jeśli potrzebujesz go do skalowania lub będzie dobrze skalować, użyj wartości procentowych. Jeśli nie, użyj pikseli. Ludzie tutaj używali przykładów głównych kolumn na stronie, które być może musiały być płynne, ale obramowania mogą wymagać precyzji pomiaru pikseli.

Oczywiście rozmiar obrazów jest w dużej mierze związany z ich rozdzielczością i jednostkami pikseli, więc zawsze ich używam w tym przypadku.

Jednak używanie rozmiaru em w porównaniu z rozmiarami pikseli lub nawet punktów dla tekstu to zupełnie inna sprawa. Większość facetów, z którymi pracuję, ma podstawowy styl resetowania dla rozmiarów czcionek, który zmniejsza rozmiar 1em do około 12 pikseli. Następnie używają ems wszędzie (lub tak blisko, jak to tylko możliwe) do określania rozmiaru elementów tekstu, kontrolek formularzy i tym podobnych. W ten sposób działam teraz, ponieważ wydaje się, że działa dobrze w różnych przeglądarkach, systemach operacyjnych i DPI na komputerach stacjonarnych i laptopach. Nie mogę jednak ręczyć za urządzenia mobilne.

Dostępność jest kluczowa - jeśli chcesz stworzyć coś użytecznego dla osób niepełnosprawnych lub pracować na różnych urządzeniach po wyjęciu z pudełka, nawet tych, które możesz uznać za stare, skalowanie będzie wymaganiem. Zbuduj go w swoim modelu, aby zaprojektować witrynę od samego początku, a możesz zdać sobie sprawę, że absolutna wielkość pikseli nie jest nawet potrzebna w tym przypadku.

Na przykład projekt z dużą ilością grafiki prawdopodobnie zostanie zaprojektowany w jednej skali, ale nowa witryna edukacyjna dla użytkowników niepełnosprawnych będzie musiała działać w różnych sytuacjach.

Pamiętaj tylko, że W3C wprowadziło różne metody określania rozmiarów i skalowania do swoich specyfikacji z powodu - elastyczności. Zrób wszystko, co najlepiej pasuje i działa dobrze dla Twojej publiczności (jak powiedział wcześniej Moustard).

Nie jestem ekspertem od css / html, ale stosuję konwencję, w której używam pikseli dla zewnętrznych kontenerów i wartości procentowych dla obiektów wewnętrznych.

Inną praktyczną zasadą, którą mam dla każdego, kto przegląda mój układ, jest zasada trzech pikseli . Rzadko się zdarza, aby wszystko było dokładnie wyrównane w każdej przeglądarce. Uzgodniliśmy, że wysiłek przewyższa korzyści wynikające z przeniesienia czegokolwiek o trzy piksele lub mniej.

Domyślnie postępuj właściwie. Jeśli użytkownik odwiedza Twoją witrynę z wyłączoną obsługą javascript i bez plików cookie preferencji, należy udostępnić mu stronę internetową, która jest tak funkcjonalna i dostępna, jak to tylko możliwe.

Twój domyślny arkusz stylów nie powinien zakładać nic na temat okna przeglądarki i nadal renderować funkcjonalną stronę, choć ohydną, aż do rozdzielczości 320x320 i nieograniczonych rozmiarów. Jeśli wierność fotograficzna jest tak ważna, że ​​nie możesz ufać skalowaniu przeglądarki, a czasami tak jest, powinieneś użyć pomiarów pikseli (przynajmniej minimalnych) dla elementów hermetyzujących obrazy o stałym rozmiarze, aby upewnić się, że nie skończysz z ważne sprawy są ukrywane. Określenie minimalnych szerokości wraz z wartościami procentowymi powinno zapewnić potrzebną kontrolę, a jednocześnie zapewnić użytkownikom dostępność, której potrzebują. Nawet jeśli dostępność nie jest teraz problemem, będzie później, jeśli witryna się powiedzie.

Kiedy zrobić wiedzieć więcej na temat okna przeglądarki, to jest w porządku używać stałych szerokościach w alternatywnych stylów, jeśli znaczenie zachowania uzasadnia zaprojektować dodatkową pracę.

Jeśli celujesz w stały rozmiar, piksele są w porządku. Ale jeśli chcesz, aby układ wyglądał dobrze na różnych rozdzielczościach / rozmiarach ekranu, powinieneś trzymać się bardziej względnych miar, takich jak wartości procentowe. Większość ludzi celuje w to drugie.

W porządku, jeśli to jest to, czego potrzeba, aby zadowolić klienta. W większości przypadków nie można zrównoważyć ilości miejsca na różnych rozmiarach ekranu tylko procentami. Zapytania o media CSS3 pomagają tutaj, ale adopcja jest nadal problematyczna.

W większości przypadków wolę piksel. Na przykład - domyślna szerokość treści ares: 960px. W "1024" będzie dobrze, z małymi wolnymi przestrzeniami po obu stronach ekranu. Umieść tam gradient lub tło. W „1280”, „1440”, „1680”, czy gdziekolwiek - będzie coraz większa szczelina, ale będzie ładnie wyglądać. Tak, za 800 - ta strona będzie brzydka. Ale kogo to obchodzi? Wszyscy główni gracze zrezygnowali ze wsparcia dla 800. Jest zbyt mało osób z tą rezolucją.

Jest wiele różnych witryn, na których %% będzie znacznie lepszym rozwiązaniem.

Elementy składowe ekranu to piksele. Nie możesz się pomylić ze stałymi rozmiarami pikseli. Jak wspomniały inne plakaty, możesz również użyć wartości procentowych lub „em” jako skalowalnego zamiennika.