độ rộng Đề xuất bố trí đáp ứng

Question

gì bạn đề nghị nên có độ rộng tôi nên sử dụng cho bố cục đáp ứng?

/* Default Width: */ 
    .container { width: 940px; margin: 0 auto; } 

    /* Smaller than standard 960 (devices and browsers) */ 
    @media only screen and (max-width: 959px) {} 

    /* Tablet Portrait size to standard 960 (devices and browsers) */ 
    @media only screen and (min-width: 768px) and (max-width: 959px) {} 

    /* All Mobile Sizes (devices and browser) */ 
    @media only screen and (max-width: 767px) {} 

    /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ 
    @media only screen and (min-width: 480px) and (max-width: 767px) {} 

    /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ 
    @media only screen and (max-width: 479px) {} 

Answer 1

Không có khuyến nghị chiều rộng cho bố cục đáp ứng. Nó hoàn toàn phụ thuộc vào cấu trúc bố trí của bạn. Layout Structure phương tiện sử dụng MEDIAQUERIES khi bạn muốn bất kỳ thay đổi cụ thể về chiều rộng cụ thể hoặc khi bố trí của bạn đã phá vỡ bất kỳ chiều rộng màn hình cụ thể.

Answer 2

Nếu bạn đang tìm kiếm các phương pháp hay nhất/phổ biến và chiều rộng cụ thể được áp dụng khi sử dụng bố cục đáp ứng, tôi khuyên bạn nên xem xét hệ thống lưới sẵn có. Tìm kiếm google nhanh chóng mang lại nhiều kết quả, nhưng một trong những kết quả ưa thích của tôi sẽ là the 1140 grid - Tôi rất đồng ý với logic của họ về việc chọn các phép đo. Nguyên văn:

Lưới 1140 phù hợp hoàn hảo với màn hình 1280. Trên màn hình nhỏ hơn nó trở nên lỏng và thích nghi với chiều rộng của trình duyệt. Phế liệu 1024! Thiết kế một lần vào năm 1140 cho 1280 và với rất ít công việc thêm , nó sẽ tự điều chỉnh để hoạt động trên bất kỳ màn hình nào, thậm chí là thiết bị di động.

Nếu đây không phải là loại câu trả lời bạn đang tìm kiếm, vui lòng lặp lại câu hỏi.

Answer 3

Tôi đã bắt đầu sử dụng "320 và lên" độ rộng của định như sau:

Lưu ý rằng họ đi từ nhỏ đến lớn không phải là cách khác xung quanh mặc dù. Đây là phù hợp hơn với tăng cường tiến bộ và chắc chắn ưa thích anyway: http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

http://stuffandnonsense.co.uk/projects/320andup/

// Default styling here 

// Little larger screen 
@media only screen and (min-width: 480px) { 

} 

// Pads and larger phones 
@media only screen and (min-width: 600px) { 

} 

// Larger pads 
@media only screen and (min-width: 768px) { 

} 

// Horizontal pads and laptops 
@media only screen and (min-width: 992px) { 

} 

// Really large screens 
@media only screen and (min-width: 1382px) { 

} 

// 2X size (iPhone 4 etc) 
@media only screen and 
     (-webkit-min-device-pixel-ratio: 1.5), only screen and 
     (-o-min-device-pixel-ratio: 3/2), only screen and 
     (min-device-pixel-ratio: 1.5) { 

} 

Nếu bạn sử dụng Sass, đây là một mẹo nhỏ Tôi đã sử dụng:

$laptop-size: "only screen and (min-width: 768px)"; 
$desktop-size: "only screen and (min-width: 1382px)"; 
// etc 

Và sau đó

@media #{$laptop-size} { 
    // Styling here... 
} 

Bằng cách này bạn có thể dễ dàng thay đổi chiều rộng ở một nơi, bạn cũng không phải viết toàn bộ mọi thứ.