Truy vấn phương tiện CSS và quan trọng

Tôi có một trang web sử dụng truy vấn @media nhưng dường như không đặt chúng. Họ luôn giữ kiểu mặc định.Truy vấn phương tiện CSS và quan trọng

Ví dụ:

#div1 { background:red} 

@media screen and (max-height:912px) { 
#div1{background:blue} 
}

sẽ luôn luôn gắn bó với nền: đỏ trừ khi tôi sử dụng !important nhưng trong các truy vấn phương tiện truyền thông của tôi, tôi đang tạo kiểu tóc rất nhiều selectors. Tôi có cần đặt thành từng kiểu chọn một !important không?

Nguồn

2012-04-21 jQuerybeast

Mã của bạn hoạt động tốt trên hệ thống của tôi. Tôi đã thử nghiệm trong Firefox, chrome và safari trên Mac. Môi trường thử nghiệm của bạn là gì? – Anji

Xin lỗi vì trả lời muộn. Tôi đã cố gắng tìm ra lý do tại sao nó không hoạt động. Đây là: http://jsfiddle.net/TUL6h/3/ Cố gắng làm cho màu xanh lam bằng cách thay đổi kích thước. Nó không bao giờ xảy ra – jQuerybeast

Nó sẽ chỉ chọn màu sắc trong đó là cuối cùng trong phần css. – jQuerybeast

Thay đổi max-height để min-height:! http://jsfiddle.net/jnQYb/

Nguồn

2012-04-21 21:52:38 jQuerybeast

Nó hoạt động tốt cho tôi.

Hãy xem xét điều đó: http://jsfiddle.net/TUL6h/1/ - nền màu đỏ, nhưng khi bạn thay đổi chiều cao phần kết quả, nó sẽ chuyển thành màu xanh dương trên một số điểm.

Bạn đang thử trình duyệt nào?

Nguồn

2012-04-21 19:32:27 MarcinJuraszek

Thats đúng, nhưng đó là hành vi thích hợp, bởi vì 'background: green' ghi đè' background: blue'. Bạn nên viết một cái gì đó như thế này: http://jsfiddle.net/TUL6h/5/ để đạt được điều đó. – MarcinJuraszek

Điều này không hoạt động. Đây có phải là vấn đề về trình duyệt không? –

Không nhất thiết, quan trọng được sử dụng để ghi đè lên css mặc định ví dụ: để ghi đè các thuộc tính được sử dụng trong phong cách mặc định. Vì vậy, nếu có một thuộc tính mới trong các truy vấn phương tiện, bạn không phải sử dụng nó cùng với điều đó.

Nguồn

2012-08-22 13:30:34

Sử dụng bên trong mã có trong các truy vấn @media của bạn là cách hiệu quả để thêm thuộc tính động vào các phần tử trang của bạn, trong khi vẫn giữ nguyên phần css mặc định của bạn để bảo trì dễ dàng.

Ví dụ:

<html> 
    <head> 
    <style> 
    @media all and (max-width: 768px) { 

    /* CSS styles targeting screens of smaller sizes and/or resolutions (IE phones and tablets) */ 

     #semantically-named-element p 
     { width: 60% !important; 
     background: rgba(0,0,255,1)!important; 
     margin: auto !important; } 

     #semantically-named-element span 
     { display: none !important; } 

    } 
    /* Look ma no media queries needed for default CSS below! Very easy to discern default styles, when the default code is the stuff not wrapped in queries. Period. */  

    /* Default CSS style attributes for any viewports that do not fit into the low or high resolution/screen size parameters set above and below. Also the fallback for browsers that still disregard CSS media queries */ 
    #semantically-named-element p 
     { width: 90%; 
      background: rgba(255,0,0,1); 
      margin: auto; } 

    #semantically-named-element span 
     { display: block; 
      background: rgba(0,0,0,0.8); 
      color: #FFF; 
      text-align: center;} 
    @media all and (min-width: 968px) { 
    /* CSS styles targeting very large or very high resolution viewports at the 769 pixels wide "break-point" */ 
     #semantically-named-element p 
     { width: 80% !important; 
     background: rgba(0,255,0,1)!important; 
     margin: auto !important; } 

     #semantically-named-element span 
     { display: block !important; 
     background: rgba(0,0,0,0.8)!important; 
     color: #FFF !important; font-size: 200%; } 
    } 
    </style> 
    </head> 

    <body> 
     <div id="semantically-named-element"> 
     <p> Usage of !important inside of the code contained within your @media queries is an effective way to add dynamic style properties to your pages elements, while leaving your 'default' css intact for easy maintenance.<span>hidden until tablet greater 768 viewport pixel width</span></p> 
     </div> 
    </body> 
</html>

Nguồn

2013-09-23 00:10:44 NicholasAbrams

Nhìn vào ví dụ của bạn trong //jsfiddle.net/TUL6h/55/: Bạn cần thay đổi thứ tự của các truy vấn phương tiện truyền thông. chiều cao tối đa: 510px; bao gồm chiều cao tối đa: 500px; nó phải đến trước để cho trường hợp đặc biệt hơn của 500px beeing hiển thị ở tất cả.

Nguồn

2013-10-31 09:51:43 emik

jsfiddle.net/TUL6h/55 sẽ không phải của tôi. Mỏ được tạo ra đến 5. Phần còn lại là từ những người dùng quanh đây. – jQuerybeast

Tôi cũng gặp vấn đề tương tự. Tôi nhận ra rằng các truy vấn phương tiện truyền thông phải ở cuối trang mẫu (ngay cả khi bạn đang sử dụng/nhập nhiều tệp trên luồng công việc của mình).

Nguồn

2016-01-24 20:32:17 jhorapb

Truy vấn phương tiện CSS và quan trọng

Trả lời

Các vấn đề liên quan