Cách nhanh nhất để làm cho trang web đáp ứng?

Question

Tôi đã sử dụng Zurb Foundation and Skeleton trước đây nên tôi quen thuộc với cả hai nhưng tôi chưa bao giờ phải chuyển đổi một trang web hiện tại sang trang web đáp ứng trước đây. Whats phương pháp nhanh nhất để chuyển đổi trang web của tôi là gì? Sử dụng khung như trên hoặc thêm Truy vấn phương tiện cho mã đã được cung cấp? (Điều đó thậm chí làm việc?)

Answer 1

Xác định thiết bị mà bạn muốn hỗ trợ và sau đó thêm một kiểu với một cái gì đó dọc theo những dòng:

/* =Responsive Structure 
----------------------------------------------- */ 
@media (max-width: 800px) { 
     /* Smaller Resolution Desktops and Laptops */ 
     [...] 
} 
@media (max-width: 650px) { 
     /* Smaller devices */ 
     [...] 
} 
@media (max-width: 450px) { 
     /* Even Smaller devices */ 
     [...] 
} 
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { 
     /* Even Smaller devices */ 
     [...] 
} 

Đó là đơn giản nhất để kiểm tra xem họ đi theo thứ tự giảm dần. nhiều phương tiện truyền thông ví dụ truy vấn ở đây:

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Answer 2

Trong trường hợp của tôi, tôi cần phải viết lại các trang web từ đầu vì tập phong cách đáp ứng của tôi didnt giải quyết vấn đề .. Vì vậy, tôi viết lại Styles của tôi sử dụng LESS và tôi có thể tạo một bản định kiểu đáp ứng với các truy vấn phương tiện chính xác như Matthew Darnell làm.

Tôi không quen với Skeleton nhưng Twitter Boostrap hoạt động tốt cho tôi.

Answer 3

Nếu bạn sẵn sàng làm một công việc nhỏ và di chuyển, có một cách để cài đặt nền tảng cho một dự án hiện có (cụ thể là các dự án la bàn).

Trước tiên, bạn cần cài đặt la bàn và biến dự án thành một dự án la bàn. Một cách dễ dàng để làm điều này là thông qua bộ mã và chỉ cần kéo và thả thư mục dự án của bạn vào bộ mã. Bạn có thể nhận được một số gợi ý đầu cuối thông qua trang này trên trang web nền tảng.

http://foundation.zurb.com/docs/sass.html

Sau đó bạn sẽ cần phải mở Terminal và gõ

cd /path-to-your-project-folder/ 

sau đó gõ

compass install -r zurb-foundation foundation 

Bạn có thể thử và nền tảng sử dụng một mình trên một ứng dụng hiện có bằng cách sử dụng hoàn toàn sass (không có la bàn) nhưng bạn phải tải xuống nền tảng từ trang web git và @bao gồm từng trang một. Bạn có thể tìm thấy thông tin trong trang tôi đã liệt kê ở trên.