Việc sử dụng số pixel trong CSS thay vì tỷ lệ phần trăm có xấu về mặt tương thích không? Làm thế nào về độ phân giải thấp hơn? Có ổn không khi làm việc với chúng trong phạm vi 1-100?
Câu trả lời:
Đây là một câu hỏi khó, vì câu trả lời chủ yếu phụ thuộc vào tình huống của bạn.
Điểm ảnh không tệ lắm, tôi hầu như cũng sử dụng chúng. (Đôi khi ngay cả đối với kích thước phông chữ.)
Tôi thường cố định phần tử khối bên ngoài của bố cục theo một kích thước nhất định (pixel với bố cục chiều rộng cố định và tỷ lệ phần trăm với bố cục linh hoạt), và trên các phần tử bên trong, tôi thường đặt tỷ lệ phần trăm bất cứ khi nào có thể.
Có một số yếu tố không thể được tạo kiểu bằng tỷ lệ phần trăm hoặc ems, đặc biệt là những thứ lạ mắt hơn đến từ các nhà thiết kế đồ họa không hiểu các nguyên tắc như vậy.
Ví dụ: nếu bạn có một cột trên trang web của mình với phong cách đơn giản, bạn có thể đặt chiều rộng của nó thành phần trăm một cách dễ dàng, nhưng nếu nó có hình nền với chiều rộng cụ thể không được thiết kế có tính đến tỷ lệ, thì nó chỉ có vẻ tốt với chiều rộng cố định. Trong những trường hợp như vậy, bạn sẽ phải đảm bảo rằng phần còn lại của trang chiếm đúng chiều rộng còn lại.
Lưu ý rằng bạn có thể sử dụng các pixel có tỷ lệ phần trăm với nhau.
Ví dụ: đây là đoạn trích từ một trong những ứng dụng web mới nhất của tôi:
min-width: 800px;
width: 80%;
max-width: 1500px;
Sự lựa chọn cũng phụ thuộc vào thiết kế hoặc bố cục bạn muốn đạt được.
Đối với bố cục có chiều rộng cố định , giá trị pixel là tốt. Nếu một nhà thiết kế cung cấp cho bạn một hình ảnh Photoshop có chứa những thứ thực sự lạ mắt mà thậm chí sẽ cực kỳ phức tạp để nghĩ về cách nó sẽ thay đổi kích thước, bạn chắc chắn nên làm điều này.
Nếu bố cục của bạn cần phải động , bạn nên sử dụng tỷ lệ phần trăm để đảm bảo rằng nó sẽ mở rộng khi độ phân giải thay đổi và bạn có thể sử dụng đoạn mã trên để làm cho nó trông đẹp hơn trong các trường hợp mà nếu không nó sẽ trông rất điên rồ.
Một số bố cục (ví dụ: hãy tưởng tượng nếu StackOverflow sẽ chiếm hết không gian) sẽ trông khá xấu trên chiều rộng của ví dụ. 1920 pixel - độ rộng dòng sẽ cao đến mức cực kỳ khó đọc.
Đây là những gì max-widthdành cho. Ngay cả trong một số bố cục động, bạn sẽ phải giới hạn chiều rộng tối đa của trang web để tối đa hóa khả năng sử dụng và khả năng đọc.
Và cũng hãy xem xét các màn hình nhỏ hơn.
Đúng là không còn ai sử dụng máy tính để bàn 800 × 600 nữa, nhưng nhiều người duyệt web bằng các thiết bị di động có độ phân giải thậm chí còn nhỏ hơn.
Đây là min-widthmục đích: để làm cho bố cục mở rộng động của bạn trông bớt chật chội hơn khi thay đổi nhỏ hơn.
Tôi hi vọng cái này giúp được.
BIÊN TẬP:
Các Smashing Book có một vài suy nghĩ rất tốt đẹp về đề tài này.
CHỈNH SỬA 2:
Tôi không muốn bài đăng của mình nghe giống như tôi muốn bạn bắt buộc định cỡ dựa trên pixel đối với khách truy cập của bạn.
(Rõ ràng, một số người trong các bình luận đã hiểu lầm tôi theo cách như vậy.)
Để làm rõ nó:
Tôi tin rằng bố cục lý tưởng là bố cục điều chỉnh tốt với bất kỳ độ phân giải hoặc cài đặt nào có thể.
Tuy nhiên, không phải lúc nào chúng ta cũng có thể làm mọi thứ một cách hoàn hảo. Thời gian / tài nguyên và đối tượng mục tiêu là chìa khóa để xác định xem trang web của bạn có yêu cầu chức năng nâng cao đó hay không.
Tôi khuyên bạn nên sử dụng đúng thứ cho công việc được giao.
Nếu bạn đang phát triển một trang web sẽ có một tỷ lệ phần trăm đáng kể khách truy cập yêu cầu các điều chỉnh nâng cao hơn cho trang web, nó có thể rất xứng đáng.
(Tất nhiên, đôi khi chúng ta chỉ làm điều đó cho bản thân để có cảm giác làm mọi thứ đúng cách, nhưng không phải lúc nào cũng là một quyết định đúng đắn về mặt tài chính.)
Tuy nhiên, bạn nên thực hiện nghiên cứu thích hợp về loại trang web sẽ là, ai sẽ là khách truy cập và những thứ như vậy, trước khi quyết định về bố cục và liệu có nên dành thời gian để làm cho chúng trở nên linh hoạt hay năng động hơn không.
Tất cả các phép đo đều có mục đích riêng:
Sử dụng pixel cho những thứ dựa trên pixel , như đường viền. Bạn có thể không muốn một đường viền có chiều rộng là 1,3422 pixel.
Sử dụng các thước đo tập trung vào văn bản (em, ví dụ) cho những thứ dựa trên văn bản , như vùng nội dung, nhãn và hộp nhập liệu. Đó là một cách dễ dàng để đảm bảo bạn có chỗ cho văn bản có chiều dài và chiều rộng nhất định.
Sử dụng phần trăm cho những thứ dựa trên cửa sổ , chẳng hạn như cột.
Tất nhiên vẫn có những ngoại lệ. Ví dụ: bạn có thể muốn chỉ định chiều rộng cột tối thiểu tính bằng pixel. Nhưng hãy làm theo những điều trên và các trang của bạn sẽ mở rộng quy mô tốt. LUÔN LUÔN phóng to và thu nhỏ các trang của bạn để xem chúng hoạt động như thế nào với các kích thước phông chữ và hình dạng trình duyệt khác nhau - đừng ngạc nhiên về sau.
Tôi nghĩ trước tiên bạn phải hiểu các vấn đề tồn tại khi làm việc với pixel trong CSS:
emvà các kích thước tương đối khác, bạn sẽ tôn trọng quyết định của người dùng thay đổi điều này. Điều này đặc biệt quan trọng đối với các trang web nặng về văn bản, đặc biệt nếu có nhiều người dùng cũ hơn. Mặt khác, nếu thiết kế của một trang web là quan trọng, tôi nghĩ có thể và hợp lý khi sử dụng pxđể chỉ định kích thước phông chữ mà không phá vỡ khả năng sử dụng.Cuối cùng, bạn cần phải tự mình đưa ra quyết định và nó phụ thuộc vào từng trường hợp chính xác, nhưng tôi nghĩ rằng chỉ định kích thước phông chữ theo pixel là được .
Bằng cách này, khi làm việc với emđể xác định kích thước font chữ đó là một ý tưởng tốt để thiết lập bodyđể font-size: 62.5%. Điều này có nghĩa là kích thước phông chữ cơ bản là 10px, vì vậy 1em là 10px, 1.6em là 16px, v.v., giúp bạn dễ dàng suy nghĩ về pixel trong khi thiết kế bằng ems . Tôi vẫn cảm thấy khó chịu khi làm việc như thế này, đặc biệt là khi các giá trị của ems thác. Có một số trang web rất hữu ích như PXtoEM.com giúp thực hiện việc này.
Màn hình là một bố cục dựa trên pixel , vì vậy pixel là một lựa chọn trực quan cho nhiều thứ. Vấn đề chính ở đây là những người dùng khác nhau có kích thước màn hình khác nhau . Như những người khác đã chỉ ra, sử dụng min-widthvà max-widthbằng pixel cùng với widthphần trăm là một cách hữu ích để tôn trọng các kích thước của màn hình, trong khi ngăn chặn trang web của bạn để được squished bất hợp lý hoặc kéo dài trên cửa sổ rất nhỏ và rất lớn.
Tuy nhiên, tôi thường tránh cách tiếp cận này để ủng hộ các truy vấn phương tiện CSS . Sau đó, bạn có thể sử dụng các phần chiều rộng cố định và làm cho bố cục rộng hơn (trong số những thứ khác) khi kích thước màn hình tăng lên. Tuy nhiên, các truy vấn phương tiện CSS, giống như tất cả các công nghệ web thú vị, đều thiếu sự hỗ trợ của trình duyệt. Đáng chú ý nhất, IE8 trở về trước không hỗ trợ chúng, mặc dù có các bản sửa lỗi JavaScript. Mặt khác, iPhone và các thiết bị cầm tay khác có hỗ trợ chúng và tôi thực sự khuyên bạn nên sử dụng chúng nếu bạn muốn trang web của mình trông đẹp mắt trên các thiết bị này.
Tôi nghĩ rằng lưới có chiều rộng cố định là tốt . Các hệ thống lưới có chiều rộng cố định như Hệ thống lưới 960 đã đủ phổ biến theo đúng nghĩa của chúng và có rất nhiều trang web khác có chiều rộng cố định, tôi nghĩ rằng bạn sẽ nghe thấy nhiều lời phàn nàn nếu bạn làm điều này. Các thiết bị cầm tay không có màn hình lớn là một vấn đề, nhưng đây là nơi nên sử dụng các truy vấn phương tiện CSS, vì vậy bạn có thể chỉ định mọi thứ bằng pixel và làm cho trang web của bạn trông đẹp mắt trên máy tính để bàn và trên iPhone.
Cuối cùng, mọi thứ phụ thuộc vào người dùng của bạn là ai, bạn cần hỗ trợ gì và bạn muốn trang web của mình trông như thế nào, nhưng không có gì sai khi sử dụng pixel trong CSS .
Điều đó phụ thuộc vào những gì bạn đang tạo kiểu. Ví dụ: đối với các cột, chiều rộng có thể phụ thuộc vào kích thước văn bản để đảm bảo rằng nó sẽ trông tối ưu trên nhiều độ phân giải / màn hình. Nếu bạn muốn chia trang của mình thành hai phần, bạn nên sử dụng tỷ lệ phần trăm. Nhưng nếu bạn muốn có đường viền 1px giữa hai phần này, không phụ thuộc vào độ phân giải, hãy sử dụng pixel.
Về cơ bản, nó phụ thuộc vào việc ai đang tuyển dụng bạn và do đó là khán giả của công việc của bạn. Đối với các mục đích thể chế (nơi nội dung nên chiếm ưu thế hơn so với hình dạng, chẳng hạn như một dự án của chính phủ), bạn nên làm việc với .em hoặc%, chúng khó kiểm soát hơn, nhưng chúng sẽ thực sự thân thiện với người dùng về khả năng truy cập.
Nếu chúng ta nói về Trang web tổng hợp (Nơi hình thành thỏa thuận), pixel sẽ là một công cụ chính xác hơn để đáp ứng kỳ vọng của khách hàng về thương hiệu của họ. Giao diện lỏng (%, .em) luôn là một thứ tốt khi nó được thực hiện một cách thông minh, nhưng đừng quên kiểm tra thiết kế của bạn trong điều kiện khắc nghiệt và đảm bảo rằng nó sẽ ổn định.
Nếu bạn làm việc với pixel, bạn sẽ có quyền kiểm soát tuyệt đối đối với giao diện cuối cùng của trang web của mình, nhưng bạn sẽ phải giả định rằng một số người dùng không thể hoạt động với nó một cách hiệu quả.
Lựa chọn tốt nhất: thay vì thiết kế một Trang web tương thích với tất cả các nền tảng (điều gì sẽ dẫn đến một thiết kế nhiều thiếu sót), hãy đề xuất cho khách hàng của bạn các phiên bản đặc biệt của trang web phù hợp với mọi nhu cầu, cách thực hành tốt hơn và công việc kinh doanh tốt hơn cho một nhà thiết kế cũng vậy. ..
Tôi sẽ nói rằng hãy tránh nó nếu có thể trừ một số trường hợp nhất định.
Ví dụ đối với đường viền mỏng, bạn chỉ cần chỉ định 1px là được.
Ngoài ra đối với các thuộc tính phong cách max-và min-nó là ok. Nhưng sau đó hãy đặt thuộc tính không phải max / min thành phần trăm nếu có thể.
max-và min-thuộc tính.
Đây thực sự là một câu hỏi hay mà tôi đã hỏi nhiều lần trước đây. Không phải là một nhà thiết kế web chuyên nghiệp (tôi thiên về phát triển) Tôi thường hỏi các nhà thiết kế mà tôi làm việc cùng về ý kiến của họ, và đây là những gì tôi đã chắt lọc:
Sử dụng tỷ lệ phần trăm so với pixel cho các yếu tố định kích thước, v.v. thực sự là vấn đề của sở thích cá nhân hoặc yêu cầu trong từng trường hợp cụ thể. Nếu bạn cần nó để chia tỷ lệ hoặc nó sẽ mở rộng quy mô tốt, hãy sử dụng tỷ lệ phần trăm. Nếu không, hãy sử dụng pixel. Mọi người ở đây đã sử dụng các ví dụ về các cột chính trong một trang có thể cần phải linh hoạt nhưng các đường viền cũng có thể cần độ chính xác của phép đo pixel.
Rõ ràng việc định kích thước hình ảnh bị ràng buộc khá nhiều với độ phân giải và đơn vị pixel, vì vậy tôi luôn sử dụng chúng trong trường hợp này.
Tuy nhiên, việc sử dụng định cỡ em so với pixel hoặc thậm chí định cỡ điểm cho văn bản là một điều hoàn toàn khác. Hầu hết những người mà tôi làm việc đều có phong cách thiết lập lại cơ sở cho kích thước phông chữ làm giảm kích thước 1em xuống khoảng 12px. Sau đó, họ sử dụng ems ở mọi nơi khác (hoặc càng gần mọi nơi càng tốt) để định kích thước các phần tử văn bản, điều khiển biểu mẫu và những thứ tương tự. Đây là cách tôi vận hành bây giờ vì nó dường như hoạt động tốt trên nhiều trình duyệt, hệ điều hành và DPI trên máy tính để bàn và máy tính xách tay. Tôi không thể đảm bảo cho các thiết bị di động.
Tuy nhiên, khả năng tiếp cận là chìa khóa - nếu bạn cần tạo thứ gì đó có thể sử dụng được cho người khuyết tật hoặc làm việc trên nhiều thiết bị khác nhau, ngay cả những thứ bạn có thể coi là cũ, thì việc mở rộng quy mô sẽ là một yêu cầu. Xây dựng nó thành mô hình của bạn để thiết kế trang web ngay từ đầu và bạn có thể nhận ra rằng kích thước pixel tuyệt đối thậm chí không cần thiết trong trường hợp đó.
Ví dụ: một thiết kế đậm chất nghệ thuật có thể sẽ được thiết kế ở một quy mô duy nhất, nhưng trang web giáo dục mới dành cho người dùng khuyết tật sẽ phải hoạt động trong nhiều tình huống khác nhau.
Chỉ cần nhớ rằng, W3C đưa nhiều phương pháp định cỡ và chia tỷ lệ vào thông số kỹ thuật của chúng vì một lý do - tính linh hoạt. Làm bất cứ điều gì phù hợp nhất và hiệu quả với khán giả của bạn (như Moustard đã nói trước đó).
Tôi không phải là chuyên gia css / html nhưng quy ước tôi sử dụng là sử dụng pixel cho các vùng chứa bên ngoài và tỷ lệ phần trăm cho các đối tượng bên trong.
Một quy tắc chung khác mà tôi có với bất kỳ ai xem xét bố cục của tôi là Quy tắc ba điểm ảnh . Hiếm khi mọi thứ sẽ xếp hàng chính xác trong mọi trình duyệt hiện có. Chúng tôi đã đồng ý rằng nỗ lực vượt trội hơn lợi ích khi di chuyển bất kỳ thứ gì từ ba pixel trở xuống.
Làm điều đúng theo mặc định. Nếu người dùng truy cập trang web của bạn với javascript bị vô hiệu hóa và không có cookie tùy chọn, bạn nên cung cấp cho họ một trang web hoạt động tốt và dễ truy cập nhất có thể.
Biểu định kiểu mặc định của bạn sẽ không giả định gì về cửa sổ trình duyệt và vẫn hiển thị một trang chức năng, tuy nhiên, tuy ghê tởm, có độ phân giải xuống đến 320x320 và lên đến kích thước không giới hạn. Nếu độ trung thực của hình ảnh quan trọng đến mức bạn không thể tin tưởng vào việc mở rộng trình duyệt và đôi khi đúng như vậy, thì bạn nên sử dụng các phép đo pixel (ít nhất là tối thiểu) cho các phần tử đóng gói hình ảnh có kích thước cố định, để đảm bảo rằng bạn không bị những thứ quan trọng đang được che đậy. Việc chỉ định chiều rộng tối thiểu cùng với tỷ lệ phần trăm sẽ cung cấp cho bạn khả năng kiểm soát cần thiết trong khi cung cấp cho người dùng khả năng tiếp cận mà họ cần. Ngay cả khi khả năng truy cập không phải là vấn đề bây giờ, nó sẽ là vấn đề sau nếu trang web thành công.
Khi bạn làm biết thêm về các cửa sổ trình duyệt, sau đó nó không quan trọng để sử dụng độ rộng cố định trong stylesheets thay thế, nếu tầm quan trọng của việc bảo tồn các biện minh cho thiết kế công việc bổ sung.
Nếu bạn đang nhắm mục tiêu một kích thước cố định thì pixel vẫn ổn. Nhưng nếu bạn muốn bố cục của mình trông đẹp trên các độ phân giải / kích thước màn hình khác nhau, thì bạn nên tuân theo các biện pháp tương đối hơn như tỷ lệ phần trăm. Hầu hết mọi người đang nhắm mục tiêu sau.
Tôi thích pixel hơn trong hầu hết các trường hợp. Ví dụ: chiều rộng mặc định của nội dung là: 960px. Trong "1024", nó sẽ ổn, với không gian trống nhỏ ở cả hai bên của màn hình. Đặt một số gradient hoặc nền ở đó. Trong "1280" hoặc "1440" hoặc "1680", hoặc bất cứ điều gì - sẽ có khoảng cách lớn hơn và lớn hơn, nhưng nó sẽ đẹp. Đúng, với giá 800 - trang web này sẽ xấu. Nhưng, ai quan tâm? Mọi người chơi chính đều bỏ hỗ trợ 800. Có quá ít người có giải pháp này ..
Tuy nhiên, có nhiều trang web khác nhau, trong đó %% sẽ là giải pháp tốt hơn nhiều.
Các khối cấu tạo của màn hình là các pixel. Bạn không thể làm sai với kích thước pixel cố định. Như các áp phích khác đã đề cập, bạn cũng có thể sử dụng tỷ lệ phần trăm hoặc "em" để thay thế có thể mở rộng.