Thiết kế web đáp ứng bằng cách sử dụng css hoặc javascript?

Question

Tôi sẽ tạo một trang web đang sử dụng thiết kế đáp ứng. Tôi đọc một số thông tin về truy vấn phương tiện truyền thông css. Những gì tôi muốn làm là bố cục trang web của tôi nên có sự khác biệt bằng cách sử dụng các thiết bị khác nhau (như PC, máy tính bảng hoặc điện thoại thông minh).

Nếu tôi sử dụng truy vấn phương tiện để xác định thiết bị bằng cách sử dụng chiều rộng của màn hình (tính bằng pixel), tôi luôn lo lắng nếu có thiết bị mới sử dụng màn hình ppi cực cao. Thiết bị đó có thể đe dọa như máy tính bảng hoặc một cái gì đó giống như PC?

Một giải pháp khác đang sử dụng tác nhân người dùng để xác định danh mục thiết bị bằng cách sử dụng userAgent. Ngoài ra còn có một vấn đề là nếu thiết bị không giải thích tốt javascript thì trang có thể bị hỏng.

Bất kỳ giải pháp tuyệt vời nào có thể giải quyết được những lo lắng của tôi ở trên? Hoặc giải pháp nào tốt hơn?

Hoặc tôi hiểu sai phương thức sử dụng truy vấn phương tiện?

Cảm ơn bạn.

Answer 1

CSS là con đường để đi và bạn luôn có thể cung cấp dự phòng cho các trình duyệt không hỗ trợ truy vấn phương tiện bằng cách sử dụng plugin js như css3mediaqueries.js, nhưng chỉ dựa vào JS để làm cho trang web của bạn đáp ứng rủi ro vì bạn có thể ' t cho biết chắc chắn nếu người dùng sẽ bật Javascript và khi đó là không phải là, tính năng này sẽ không phản hồi nữa.

Ngoài ra, được xem là phương pháp hay nhất hiện nay để sử dụng các giá trị em cho truy vấn phương tiện thay vì pixel để đảm bảo trang web của bạn luôn luôn chia tỷ lệ đúng. Thông tin thêm về chủ đề này trong this article.

Một mẹo khác là bạn xác định giá trị truy vấn phương tiện theo điểm ngắt tốt nhất của nội dung thay vì kích thước thiết bị, theo cách đó, bạn cũng đảm bảo nội dung của mình sẽ luôn đúng bất kể có bao nhiêu thiết bị mới được tạo.

Hy vọng rằng sẽ giúp :)

Answer 2

id 'sử dụng CSS cá nhân và đặt chiều rộng tối thiểu và chiều rộng tối đa. Hầu hết các thiết kế đáp ứng hiện nay sử dụng CSS. Bằng cách này nếu có một thiết bị mới trên thị trường nó sẽ chỉ điều chỉnh theo kích thước màn hình của nó.

@media screen and (max-width:480px) { } 
@media screen and (min-width:481px) {) etc... etccc.... 

Answer 3

Tôi thích Twtitter Bootstrap hơn khi sử dụng truy vấn phương tiện CSS3 cho các thiết bị khác nhau như vậy.

Answer 4

tôi thích sử dụng phương tiện truyền thông truy vấn trong CSS. Chỉ cần viết các truy vấn sau CSS mặc định ...

màn hình @media và (max-width: 600px) {ghi ở đây chỉ các yếu tố đó phải thay đổi de mã cho hiệu suất đáp ứng}

.logo { 
width: 200px; 
height: 80px; 
background: url... ; 
background-size: 100%; 
margin: 0; 
} 

@media screen and (max-width: 600px) { 
.logo { 
width: 150px; 
height: 60px; 
margin: 0 auto; 
} 
} 

Đừng quên chèn mã khung nhìn vào đầu/HTML.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=false" /> 

Answer 5

Hãy thử jRWD, một mô-đun chỉ JavaScript mà tôi đã thiết kế gần đây. Nó sử dụng 12 dòng JavaScript thuần túy và 2 hàm trợ giúp nhỏ.Nó có sẵn trên GitHub, tại https://github.com/BlackMagic/jRWD.

Nếu bạn muốn xem jRWD đang hoạt động, hãy truy cập http://ieee-qld.org. Đảm bảo bạn kiểm tra mã nguồn. JavaScript tối thiểu, biểu định kiểu CSS tối thiểu. Không có jQuery.