chuyển mạch dựa trên kích thước màn hình

Question

CSS nob đây ...

Tôi đang nhìn vào một khuôn khổ phản ứng nhanh và tưởng tượng làm thế nào tôi sẽ hoàn thành nhiệm vụ khác nhau.

Dựa vào kích thước của màn hình, họ có các lớp học thêm vào thẻ nội dung như:

.PhoneVisible, .DesktopVisible, vv ...

Họ cũng có các lớp học để tạo liên kết vào nút :

.btn, nhỏ nút, med-nút, lớn nút

tôi bối rối về cách bạn sẽ đi về việc thay đổi CSS của bạn. I E. một cái gì đó như:

<a href="#" class="MyButtonOptions">XXXX</> 

.PhoneVisible .MyButtonOptions { btn small-button } 
.TabletVisible .MyButtonOptions { btn med-button } 
.DesktopVisible .MyButtonOptions { btn large-button } 

Bạn có phải đặt các tùy chọn khác nhau riêng lẻ không?

tức là .PhoneVisible .MyButtonOptions {height: 30px; } ???

Tất cả lời khuyên đều được đánh giá cao!

Answer 1

Hãy xem điều này https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries.

Một cách khác là đính kèm sự kiện thay đổi kích thước một số phần của "mã chuyển đổi".

Something như thế này: http://jsfiddle.net/s5dvb/

HTML

<div id="body" class="limit400"> 
    <h1>Hey :D</h1> 
</div> 

CSS

.limit400 h1 { font-size:10px; } 
.limit1200 h1 { font-size:50px; } 

JS

$(window).on('resize', function() { 
    if($(window).height() > 400) { 
     $('#body').addClass('limit1200'); 
     $('#body').removeClass('limit400'); 
    }else{ 
     $('#body').addClass('limit400'); 
     $('#body').removeClass('limit1200'); 
    } 
}) 

Về các khuôn khổ, thử http://purecss.io/ hoặc http://getbootstrap.com/

Hy vọng điều đó sẽ hữu ích.

Answer 2

Truy vấn phương tiện CSS chắc chắn là đường đi.

Bạn có thể dễ dàng tách CSS của bạn dựa trên kích thước trình duyệt, mật độ điểm ảnh vv

Dưới đây là danh sách các ví dụ từ CSS-Tricks.

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
    /* Styles */ 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen 
and (min-width : 321px) { 
    /* Styles */ 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen 
and (max-width : 320px) { 
    /* Styles */ 
} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
    /* Styles */ 
} 

/* iPads (landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
    /* Styles */ 
} 

/* iPads (portrait) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
    /* Styles */ 
} 

/* Desktops and laptops ----------- */ 
@media only screen 
and (min-width : 1224px) { 
    /* Styles */ 
} 

/* Large screens ----------- */ 
@media only screen 
and (min-width : 1824px) { 
    /* Styles */ 
} 

/* iPhone 4 ----------- */ 
@media 
only screen and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5) { 
    /* Styles */ 
}