CSS - Procenty lub piksele?

Question

Używam CSS od wielu lat i zawsze byłem facetem "procentowym", ponieważ zawsze definiuję wysokości i szerokości używając procentów w przeciwieństwie do pikseli (z wyjątkiem, na przykład, przy ustawianiu rzeczy takich jak marginesy, dopełnienie itd., w którym to przypadku używam pikseli).

chciałbym zrobić coś takiego:

body{ 
    height: 99%; 
    width: 99%; 
    margin-top: 10px; 
} 

ale często widzę przykłady takich jak to:

body{ 
    height: 300px; 
    width: 250px; 
    margin-top: 10px; 
} 

Moje pytanie brzmi: czy istnieje jakieś korzyści przy użyciu jednego nad drugim ogólnie, a jeśli tak, to jakie one są?

Dziękuję.

Mick

Answer 1

Strony mobilne. % skały za to. Jak to będzie (oczywiście) dostosować do koloru.

Jeśli jednak chcesz mieć określoną szerokość, np. Artykuł, który chcesz wyświetlić w określony sposób, px jest zwycięzcą.

Obie mają wiele Plus i minus nad sobą :)

Answer 2

Jeśli chcesz obiekty być tej samej wielkości, co nie ma znaczenia, a następnie pikseli (nie wpływa na powiększanie lub rozmiaru ekranu). Może również zajrzeć do używania EM. Sądzę, że EM są w środku, gdzie mają wpływ na powiększanie, ale nie na wielkość ekranu.

Answer 3

Powodów pełno! Szerokości procentowe są bardzo przydatne, jeśli chodzi o wymiarowanie elementów względem czegoś innego (na przykład rozmiar przeglądarki). Możesz dynamicznie zmieniać stronę, aby pasowała do różnych okoliczności. Piksele z drugiej strony są przydatne, gdy potrzebujesz precyzyjnych rozmiarów, które nie zmienią się w tobie. Niektóre osoby (np. Ja) używają zarówno pikseli, jak i procentów, aby pozycjonować elementy w taki sposób, w jaki chcesz. Inni (np. Ludzie inni niż ja: P) powiedzą Ci, że to głupie.

Answer 4

Używam pikseli na mojej stronie i utrzymuję maksymalną szerokość 1000px. Moja strona wyświetla poprawnie na moim 11" netbook, jednak nie robi bardzo dobrze z urządzeniami mobilnymi, ale to, co jest dla:

<link rel="stylesheet" href="/styles/mobile.css" media="handheld" /> 

Uważam rozwijanie stron internetowych w procentach bardzo czasochłonne, konieczności rozważenia wszystkich ponownie -sizing wydarzenia, takie jak:

overflow:scroll; 

pikseli i procentów obie mają swoje przywileje, ale chciałbym powiedzieć, że piksele byłby lepszym wyborem, ponieważ od precyzji, niezawodności i łatwiej jest rozwijać także kolejna rzecz do rozważenia. są piksele i wartości procentowe dla czcionek. Oto moja zasada:

• Jeśli tworzysz witrynę internetową z procentami, użyj wartości procentowych dla czcionki, aby zachować proporcje.
• Jeśli tworzysz witrynę internetową z pikselami, użyj pikseli dla czcionki.

Jeśli masz ludzi, którzy mogą potrzebować powiększyć czcionkę, zawsze lepiej jest użyć procentów czcionki.

Answer 5

% to droga do współczesnego świata, podobnie jak grafika wektorowa. Ponieważ ekrany stają się większe lub mniejsze, możesz skalować poprawnie, niezależnie od rozdzielczości.

Answer 6

Oczywiście nie ma żadnego dobra ani zła. To raczej kwestia płynności.

Łatwiej jest pozycjonować obiekty względem siebie za pomocą pikseli i kontrolować dokładną wysokość i szerokość.

Skalowanie obiektów jest z drugiej strony łatwiejsze z procentami. 50% szerokości okna zawsze będzie stanowić połowę okna bez względu na rozmiar ekranu.

Answer 7

w wewnętrznej górnej kwatera znajduje się w % więc będzie liczyć jako 200px*0.3=60px

#outer{ 
 
    border-style: dotted; 
 
    position: relative; 
 
    height: 200px; 
 
} 
 
#inner{ 
 
border-style: double; 
 
    position: absolute; 
 
    top: 30%; <<<<<<<<<<<<<< 
 
}

<div id="outer"> 
 
outer 
 
<div id="inner"> 
 
inner 
 
</div> 
 
</div>

Oto top jest 30px. więc będzie tak, jak jest.

#outer{ 
 
    border-style: dotted; 
 
    position: relative; 
 
    height: 200px; 
 
} 
 
#inner{ 
 
border-style: double; 
 
    position: absolute; 
 
    top: 30px; <<<<<<<<<<<< 
 
}

<div id="outer"> 
 
outer 
 
<div id="inner"> 
 
inner 
 
</div> 
 
</div>

Answer 8

stosowania zarówno = D

Z zawsze można połączyć za pomocą zarówno jeśli są zdezorientowani o tym)

calc() jest rodowitym CSS sposób zrobić prosty matematyka w CSS jako zamiennik dowolnej wartości długości (lub prawie dowolnej wartości liczbowej).

Posiada cztery proste operatory matematyczne: add (+), subtract (-), multiply (*) i divide (/).

.my-class { 
    widht: calc(100% - 20px); 
    height: calc(50% + 10px); 
} 

Obsługa przeglądarki jest zaskakująco dobra. Can I use...

Warto przeczytać: CSS-Tricks

Answer 9

Lubię procentowe zbyt ale w niektórych przypadkach nie robi tego, co się spodziewać. Jeśli na przykład mam dwa przyciski dzielące ten sam wiersz z maksymalną szerokością: 50%, a aktualna rzutnia nie jest liczbą parzystą, jedna z nich zawsze będzie zauważalnie nieco większa.