Cách triển khai thiết kế web đáp ứng và các phương pháp hay nhất của mình

Question

Tôi có trang web sử dụng pixel để hiển thị các trang. Nhưng khi tôi xem trang web ở các thiết bị khác nhau có độ phân giải màn hình khác nhau, toàn bộ trang sẽ không vừa với màn hình và nếu tôi sử dụng tỷ lệ, nội dung trang sẽ bị ép.

Thiết kế web đáp ứng có phải là lựa chọn đúng để thiết kế trang web hay không. Nếu vậy, tôi có vài lo ngại.

1. Nguy cơ liên quan đến việc chuyển đổi trang web hiện tại để kết hợp thiết kế đáp ứng là gì.
2. Có bất kỳ khuôn khổ có sẵn để làm điều này và đó là tốt nhất
3. Làm thế nào nó được hỗ trợ trên các thiết bị và các trình duyệt

Answer 1

Sử dụng media queries sẽ điều chỉnh một css khác nhau cho các kích thước màn hình khác nhau. Cách nó hoạt động là nói cho trình duyệt: nếu screenwidth = 700px hoặc nhỏ hơn/lớn hơn; sử dụng css di động. Nếu độ rộng màn hình = 1000px hoặc nhỏ hơn/lớn hơn; sử dụng css trên máy tính để bàn. Không có giới hạn về số truy vấn phương tiện bạn có thể sử dụng.

Sử dụng tỷ lệ phần trăm cũng là một khả năng; fluid design. Tôi muốn đề nghị sử dụng này cùng với các truy vấn phương tiện truyền thông mặc dù.

Đối với các khuôn khổ, có rất nhiều ở đó. Bootstrap là một trong số nhiều populair hơn. Cá nhân tôi tin rằng làm việc mobile first là cách tốt nhất để mặc dù. Tuy nhiên, vẫn còn tranh luận nóng về chủ đề này.

Như Pete đã đề cập trong nhận xét trước đó; làm việc với sự hủy hoại duyên dáng (máy tính để bàn trước) sẽ làm cho thiết bị tải xuống nhiều như trang web dành cho máy tính để bàn nhưng không sử dụng nội dung được tải xuống. Đó là một trở ngại lớn đối với người dùng. (Thời gian tải trang lớn hơn, nhiều yêu cầu máy chủ, sử dụng nhiều dữ liệu MB, v.v.) Do đó, tại sao tôi nghĩ tăng cường tiến bộ (trước tiên) là cách để thực hiện.

Sử dụng nâng cao tiến bộ, trình duyệt sẽ luôn tải xuống css di động trước tiên; cắt giảm thời gian tải trang cực kỳ.

Để biết thông tin hỗ trợ trình duyệt về thiết kế đáp ứng, hãy kiểm tra this link.

Answer 2

Đọc trên media queries thay đổi css theo chiều rộng của trình duyệt hoặc chiều cao.

Bao gồm viewport để làm cho trang web của bạn trên các thiết bị di động mở rộng chính xác.

Answer 3

Nhìn dưới một đầu đáp ứng điển hình của html:

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="HandheldFriendly" content="true"> 
<meta charset="utf-8"> 
<meta name="description" content="How to make android app"> 
<meta name="author" content="Animesh Shrivastav"> 
<title>Make-Website</title> 
<link rel="stylesheet" href="../css/my.css"> 

và css đáp ứng điển hình

html { 
    margin: 0; 
    padding: 0; 
} 

body { 
    font-size: 1em; 
    font-family: sans-serif; 
    margin-left: 20%; 
    width: 78%; 
} 

nav { 
    position: fixed; 
    top: 0; 
    left: 0; 
    text-align: center; 
    width: 20%; 
    min-height: 1500px; 
    color: rgba(255,255,255,0.5); 
    background-color: #34495e; 
} 

Bây giờ hiểu được chính mình.

Nếu bạn không thể hiểu được, sau đó kiểm tra trang web của tôi dưới đây: writing responsive website in text editor like notepad