Having all @media switches in one css file might make your mobile clients
download a lot of useless rules. You can split the files up and include just
those files that are applicable for the device that is loading your pages.
Check out this project:
https://github.com/scottjehl/eCSSential#check-out-the-demos
Am 15.08.2012 um 10:40 schrieb sommeralex:
> the window device ratio was the wrong example (due it is JS)
>
> apple mentions two others ways, but it seems they are "CSS" solutions
>
> header {
> background: -webkit-image-set( url(images/header.jpg) 1x,
> url(images/header_2x.jpg) 2x);
> height: 150px; /* height in CSS pixels */
> width: 800px; /* width in CSS pixels */
> }
>
> OR
>
> header {
> background-image: url(images/header.jpg);
> background-size: cover;
> height: 150px;
> width: 800px;
> }
> /* ... more 1x CSS rules ... */
> @media screen and (-webkit-min-device-pixel-ratio: 2) {
> header {
> background-image: url(images/header_2x.jpg);
> }
> /* ... more 2x CSS rules ... */
> }
>
>
> i guess the simplest hack is just to use higher resolutions images but
> forcing a fixed height and width.
>
>
>
> --
> View this message in context:
> http://tapestry.1045711.n5.nabble.com/macbook-retina-support-tp5715342p5715434.html
> Sent from the Tapestry - User mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org
> For additional commands, e-mail: users-h...@tapestry.apache.org
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org
For additional commands, e-mail: users-h...@tapestry.apache.org
