CSS - Tỷ lệ phần trăm hoặc pixel?

Question

Tôi đã sử dụng CSS trong nhiều năm và tôi luôn là một 'phần trăm', vì tôi luôn xác định chiều cao và chiều rộng sử dụng tỷ lệ phần trăm thay vì pixel (ví dụ: khi thiết lập những thứ như lề, đệm, vv, trong trường hợp này tôi sử dụng pixel).

tôi sẽ làm một cái gì đó như thế này:

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

nhưng tôi thường xem các ví dụ như thế này:

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

Câu hỏi của tôi là thế này: là có bất kỳ lợi ích để sử dụng một trong khác tổng thể và nếu có thì chúng là gì?

Cảm ơn bạn.

Mick

Answer 1

Trang web di động. % đá cho điều đó. Vì nó sẽ (rõ ràng) điều chỉnh cho phù hợp.

Tuy nhiên, khi bạn muốn chiều rộng cố định cho ví dụ như một bài viết văn bản mà bạn muốn hiển thị theo một cách nhất định, px là người chiến thắng.

Cả hai đều có nhiều cộng và trừ của hơn nhau :)

Answer 2

Nếu bạn muốn đối tượng có cùng kích thước không thành vấn đề gì, sau đó pixel (không bị ảnh hưởng bởi phóng to hoặc kích thước màn hình). Cũng có thể xem xét sử dụng EM's. Tôi nghĩ rằng EM là loại ở giữa, nơi chúng bị ảnh hưởng bởi phóng to, nhưng không bị ảnh hưởng bởi kích thước màn hình.

Answer 3

Lý do rất nhiều! Tỷ lệ phần trăm là rất hữu ích khi nói đến kích thước các yếu tố liên quan đến một cái gì đó khác (kích thước trình duyệt ví dụ). Bạn có thể tự động thay đổi trang của mình để phù hợp với các trường hợp khác nhau. Mặt khác, pixel hữu ích khi bạn cần các kích thước chính xác sẽ không thay đổi về bạn. Một số người (ví dụ: tôi) sử dụng cả pixel và phần trăm cho các phần tử vị trí theo cách bạn muốn. Những người khác (ví dụ: những người ngoài tôi: P) sẽ cho bạn biết điều này thật ngu ngốc.

Answer 4

Tôi sử dụng pixel trên trang web của mình và tôi giữ chiều rộng tối đa 1000px. Trang web của tôi hiển thị đúng trên netbook 11" của tôi, tuy nhiên không làm rất tốt với các thiết bị di động, nhưng đó là những gì này là dành cho:

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

tôi thấy việc phát triển các trang web trong tỷ lệ phần trăm rất nhiều thời gian chuyên sâu, cần phải xem xét tất cả lại -sizing sự kiện, chẳng hạn như:

overflow:scroll; 

pixels và tỷ lệ phần trăm cả hai đều có đặc quyền của họ, nhưng tôi sẽ nói rằng pixel sẽ là một lựa chọn tốt hơn vì có độ chính xác, độ tin cậy, và dễ dàng hơn để phát triển Ngoài ra một điều cần xem xét. là các pixel và tỷ lệ phần trăm cho phông chữ. Dưới đây là quy tắc chung của tôi:

• Nếu bạn đang phát triển một trang web có tỷ lệ phần trăm, hãy sử dụng tỷ lệ phần trăm cho phông chữ, vì lý do giữ tỷ lệ chính xác.
• Nếu bạn đang phát triển trang web có pixel, hãy sử dụng pixel cho phông chữ.

Nếu bạn có những người có thể cần phóng to phông chữ thì tốt hơn nên sử dụng tỷ lệ phần trăm cho phông chữ.

Answer 5

% là cách để đi trong một thế giới hiện đại giống như đồ họa Vector. Khi màn hình lớn hơn hoặc nhỏ hơn, bạn có thể mở rộng không phân biệt độ phân giải.

Answer 6

Rõ ràng là không đúng hoặc sai. Đó là một vấn đề về tính lưu động.

Việc định vị các đối tượng tương đối với nhau với pixel dễ dàng hơn và kiểm soát chiều cao và chiều rộng chính xác.

Các đối tượng chia tỷ lệ sẽ dễ dàng hơn với tỷ lệ phần trăm. 50% chiều rộng cửa sổ sẽ luôn là một nửa của cửa sổ, bất kể kích thước màn hình là bao nhiêu.

Answer 7

trong nội tâm bất động sản hàng đầu phong cách là trong % vì vậy nó sẽ được tính là 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>

Dưới đây là top 30px. vì vậy nó sẽ được như nó được.

#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

Dùng Cả = D

Với Bạn luôn có thể kết hợp sử dụng cả hai nếu bạn không rõ về nó)

calc() là một CSS cách tự nhiên để làm đơn giản toán ngay trong CSS như một sự thay thế cho bất kỳ giá trị độ dài nào (hoặc khá nhiều giá trị số).

Nó có bốn nhà khai thác toán học đơn giản: add (+), subtract (-), multiply (*), và divide (/).

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

Hỗ trợ trình duyệt đáng ngạc nhiên là tốt. Can I use...

đọc hữu ích: CSS-Tricks

Answer 9

Tôi thích tỷ lệ quá nhưng nó trong một số trường hợp nó không làm những gì tôi mong đợi. Ví dụ: nếu tôi có hai nút chia sẻ cùng một hàng với chiều rộng tối đa: 50% và chế độ xem hiện tại không phải là số chẵn, một trong số các nút đó sẽ luôn lớn hơn một chút.