Force truy vấn phương tiện truyền thông được áp dụng

Tôi có html và css mã này:Force truy vấn phương tiện truyền thông được áp dụng

<div class="wrapper"> 
    <div class="a"></div> 
    <div class="b"></div> 
</div> 

@media all and (max-width: 400px), (max-height: 300px) { 
    .wrapper .a { 
     .... 
     .... 
    } 
    wrapper. .b { 
     .... 
     .... 
    } 
    .... 
    .... 
}

Bây giờ tôi muốn điều đó bất cứ khi nào wrapper được lớp "như-nhỏ", tất cả các kiểu màn hình nhỏ sẽ được áp dụng ngay cả khi màn hình không nhỏ. Tôi không muốn sao chép mã css bên trong truy vấn phương tiện. Làm thế nào tôi có thể giải quyết điều đó?

Một giải pháp khác là bắt buộc truy vấn phương tiện để áp dụng. Có cách nào để làm điều đó?

Nguồn

2013-03-27 Naor

Có thể với [* less *] (http://lesscss.org). –

@JaredFarrish: Ngay cả với ít hơn, sass hoặc stylus css rendered sẽ được nhân đôi. – Naor

Câu hỏi thú vị, là nó chỉ cho mục đích gỡ lỗi? – zessx

-1

Thêm cùng một lớp cho các phần đó.

<div class="wrapper"> 
    <div class="makeMeShine a"></div> 
    <div class="makeMeShine b"></div> 
</div>

đâu a và b có thể có phong cách riêng của họ :)

Nguồn

2013-03-27 09:41:58

"makeMeShine" là gì? Làm thế nào để kết nối này với truy vấn phương tiện? .. – Naor

makeMeShine chỉ là một lớp mà tôi đã thêm vào. ví dụ .makeMeShine {background: red; }. Eveywhere lớp makeMeShine được áp dụng bạn sẽ có nền đỏ. –

Và điều này liên quan đến truy vấn phương tiện như thế nào? – Naor

Trong các phiên bản mới hơn của Chrome bạn có thể "emulate" a mobile device để kích hoạt/kiểm tra truy vấn phương tiện truyền thông của bạn trong một trình duyệt máy tính để bàn. (Internet Exploder 11 has the same behavior!) Bạn có thể phải làm mới trình duyệt sau khi áp dụng mô phỏng; Chrome 35 vẫn áp dụng một phần truy vấn phương tiện cho đến khi tôi nhấn làm mới trong tab được liên kết.

Nguồn

2014-07-15 14:10:27 zedd45

Bạn có thể làm điều gì đó như thế này bằng một chút javascript.

Tóm lại, bạn sẽ di chuyển các truy vấn phương tiện của mình ra khỏi css và kiểm tra chúng trong JS bằng cách sử dụng window.matchMedia.

Khi bạn biết cái nào khớp với nhau, bạn có thể thêm tên lớp vào thẻ <html>, tương tự như cách Modernizr hoạt động. Vì vậy, trên điện thoại, bạn sẽ thấy <html class="like-small">.

css của bạn sẽ được ghi vào tận trong những lớp học tiện nghi, thay vì sử dụng các phương tiện truyền thông truy vấn nguồn gốc:

.like-small wrapper.a {} 
.like-large wrapper.a {}

(Tôi cũng muốn nói thêm .not-như-nhỏ, .not-như- các lớp trung bình đến <html> nữa, để đơn giản hóa hơn css)

Vì vậy, sau khi truy vấn phương tiện thông thường được khớp và tên lớp thích hợp được nối vào tài liệu, RWD hoạt động khá bình thường. Và nếu bạn muốn ép buộc một phong cách cụ thể, bạn chỉ có thể viết lại classNames trên thẻ HTML để ảnh hưởng đến toàn bộ trang hoặc thêm một className vào bất kỳ phần tử gốc nào để chỉ ảnh hưởng đến một phần của trang.

Nguồn

2014-10-23 14:48:23 wwwmarty

Tôi biết câu hỏi này là cũ, nhưng hy vọng đây là những gì bạn đang tìm kiếm (vì không có câu trả lời). Và tôi cũng không biết liệu việc thêm một lớp cụ thể vào CSS của bạn có phá vỡ yêu cầu của bạn không lặp lại CSS hay không.

Bạn có thể đạt được những gì bạn muốn làm bằng cách thay đổi định nghĩa truy vấn @media của bạn. Về cơ bản, thay vì nói rằng bạn muốn điều gì đó xảy ra khi màn hình nhỏ hơn giá trị, hãy giữ cho màn hình nhỏ của bạn CSS OUT truy vấn phương tiện và đặt truy vấn phương tiện cho màn hình lớn hơn.

Sau đó, bạn chỉ cần thay đổi thứ tự mà bạn gọi là CSS và thêm độ đặc hiệu cho các kiểu mà bạn muốn gọi cho lớp like-small.

HTML:

<div class="wrapper like-small"> 
    <div class="a"></div> 
    <div class="b"></div> 
</div> 


<div class="wrapper"> 
    <div class="a"></div> 
    <div class="b"></div> 
</div>

CSS:

.wrapper.like-small .a, 
.wrapper .a { 
     height:200px; 
     width:200px; 
     background:purple; 
    } 

.wrapper.like-small .b, 
    .wrapper .b { 
     height:200px; 
     width:200px; 
     background:blue; 
} 

@media all and (min-width: 400px), (min-height: 300px) { 
    .wrapper .a { 
     height:100px; 
     width:100px; 
    background:yellow; 
    } 
    .wrapper .b { 
     height:100px; 
     width:100px; 
    background:red; 
    } 
}

Và fiddle: http://jsfiddle.net/disinfor/70n37hhj/

Hy vọng rằng đây là những gì bạn đang theo đuổi (hơn một năm rưỡi trước đây :)

Nguồn

2014-10-23 15:11:41 disinfor

Bạn có thể thử bằng javascript. Câu này đặt chiều rộng khung nhìn và các lực lượng trình duyệt để áp dụng truy vấn phương tiện truyền thông của bạn:

$('meta[name="viewport"]').prop('content', 'width=400');

này được lấy từ câu trả lời này: https://stackoverflow.com/a/20137580/1401341 Như ai đó nói trong các ý kiến, điều này sẽ chỉ làm việc với các trình duyệt có hỗ trợ viewport thẻ.

Nguồn

2016-05-17 08:35:23 Fernando

Force truy vấn phương tiện truyền thông được áp dụng

Trả lời

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