@media all and (...">
Geek asks and answers

Use forced media request

I have html and css code:

<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 {
        ....
        ....
    }
    ....
    ....
}

Now I want that whenever the shell gets an “as-small” class, all the styles of the small screen will be applied, even if the screen is small. I do not want to duplicate css code inside a media request. How can i solve this?

Another solution is to force a media query. Is there any way to do this?

+5
source share
5 answers

Chrome "" , / - . (Internet Exploder 11 !) , ; Chrome 35 - , .

0

- javascript.

- css JS, window.matchMedia.

, , <html>, , Modernizr. <html class="like-small">.

css , , -:

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

( .not-like-small,.not-like-medium <html>, css)

, , - , RWD . , HTML, , , .

0

, , , , , ( ). , CSS, CSS.

, , @media. , , , , - , , CSS CSS OUT - - .

, CSS, , 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;
    }
}

: http://jsfiddle.net/disinfor/70n37hhj/

, , ( :)

0

javascript. -:

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

This is taken from this answer: fooobar.com/questions/327980 / ... As stated in the comments, this will only work with browsers that support the tag viewport.

0
source

Add the same class for these sections.

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

Where a and b can have their own custom styles :)

-1
source

More articles:


All Articles