CODEWITHSUNDEEP
javascripthtmlcssimageresponsive-design
user2013488
user2013488

Reputation: 363

responsive dynamic html

How can I make a html element to change if the media width is lower than, let's say 726px ?

For example I have one image and I want to change it with another if the media width is lower than 726px.

Upvotes: 0

Views: 94

Answers (3)

marty
marty

Reputation: 4015

I'd recommend to bundle your low-resolution styles in a separate css file that you can activate by including the following link in you html head section:

    <link rel="stylesheet" media="only screen and (max-width:726px)" href="your-low-res-styles.css" title="norrowscreen" />

Regarding you question: "Is there a way to change the html...": Include a matchMedia listener in you code:

if (window.matchMedia !== undefined) {
    var mq = window.matchMedia("(max-width: 726px)");
    mq.addListener(onWidthChange);
    onWidthChange(mq);
}
function onWidthChange(mq) {
    if (mq.matches) {
        $("#img0").attr("src", url1);
    } else {
        $("#img0").attr("src", url2);
    );
};

Upvotes: 2

Roopchand
Roopchand

Reputation: 2728

@media only screen and (max-width: 726px){
#div{  background-image: url(image-1.png)}
}
@media only screen and (min-width: 727px){
#div{  background-image: url(image-2.png)}
}

Upvotes: 0

ashley
ashley

Reputation: 2767

Set the css to take effect up until 726px 

@media screen and (max-width: 726px) {
   background-image: url(image-med.png);
}

@media screen and (min-width: 727px) {
   background-image: url(image-big.png)
}

Upvotes: 2

Related Questions