Jaka jest preferowana jednostka podczas wykonywania elastycznego projektu?

Question

Buduję responsywną stronę i zastanawiam się, z której jednostki powinienem skorzystać? Widziałem wiele witryn używających pikseli (px) do pomiarów i widziałem, że niektóre wykorzystują procent (%). Czy istnieje preferowany - lub właściwy - sposób na elastyczne projektowanie?

Zauważyłem, że procent jest trudny w użyciu, ponieważ sprawia, że ​​obliczenia są trudne i skończyłem z wartościami takimi jak 2,754% i tak dalej przy ustawianiu szerokości/marginesów itp. Piksele wydają się łatwiejsze, to tylko proste dodawanie i Odejmowanie, ale czytałem, że nie jest to "przyszły dowód" lub coś podobnego i nie będzie prawidłowo skalowane, jeśli użytkownik powiększy okno przeglądarki. Czy to nadal prawda?

Jeśli masz jakieś doświadczenie lub wiedzę, proszę udostępnij! Bardzo chciałbym usłyszeć, co macie do powiedzenia!

Dzięki!

Answer 1

Użyj wartości procentowych wraz z minimalną szerokością i maksymalną szerokością w pikselach. Spowoduje to zatrzymanie wartości procentowych, co spowoduje, że twój divy będą zbyt małe lub zbyt duże. np.

div { 
    width:100%; //full width of browser 
    max-width: 960px; //this means it will be 100% of the browser until 960px then it will stop expanding 
} 

Answer 2

Oczywiście musisz użyć procentu. Ale z kluczami CSS min-height, min-width, max-width.

Dla następnego pokolenia

vw i vh. Wartość vw wynosi 1/100 szerokości okna, a vh to 1/100 wysokości okna. Za reakcję będą to nowe jednostki.

Answer 3

Dla układ typu rzeczy jak rozmiarów pudełka, którego chcesz użyć % ponieważ będzie zazwyczaj mają kilka kolumn wielkości jako procent ich rodziców, które będą układane na wierzchu od siebie w pewnej przerwania (width:100%) . Żadna inna jednostka nie pozwoli ci wypełnić 100% przestrzeni, takiej jak %.

Dla wypełnienie/marginesy użyć em, zwykle będziesz chciał umieścić swoje elementy w stosunku do wielkości tekstu. Z em (znakiem "M") możesz z łatwością powiedzieć, że chcę tutaj uzyskać około 1 znaków.

Dla granice można użyć px lub em, jest jednak różnica. Jeśli chcesz, aby ramka wyglądała na szerokość jednego piksela na wszystkich urządzeniach, użyj 1px. Nie może to być jeden piksel na wszystkich urządzeniach, jednak wyświetlacze wysokiej gęstości konwertują na przykład 1px na 2px. Jeśli chcesz, aby twoja ramka była wielkością opartą na twojej czcionce, użyj em.

Dla czcionek użytku em (lub %), korzystanie z em prowadzi przez rodziców na dzieci i to tylko ładniejszy jednostkowe pracować nad px.