View Single Post
Old 01-19-2013, 06:02 PM   #28
dgatwood
Curmudgeon
dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.
 
Posts: 313
Karma: 1028382
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
Quote:
Originally Posted by Jellby View Post
Just out of curiosity: How would you write a code to select images based on screen size or orientation based on media queries that would degrade gracefully in a theoretical perfectly-ePub-and-only-ePub-compliant reader?
Many ways. For example:


Code:
<div id="myimage"></div>

myimage {
    background-image: .... default image here
}


@media ...
{
    .myimage {
        background-image: ...
        width: ...
        min-width: ...
        height: ...
        min-height: ...
    }
}

or


Code:
<div class="smallDevice"><img src=... /></div>
<div class="mediumDevice"><img src=... /></div>
<div class="largeDevice"><img src=... /></div>

.smallDevice {
    display: none;
}
.mediumDevice {
    display: block;
}
.largeDevice {
    display: none;
}

@media screen and (max-device-width: 720px) {
.smallDevice {
    display: block;
}
.mediumDevice {
    display: none;
}
}


@media screen and (min-device-width: 2000px) {
.mediumDevice {
    display: none;
}
.largeDevice {
    display: block;
}
}
dgatwood is offline   Reply With Quote