Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a way to make desktop-only CSS rules?

Tags:

css

mobile

I found out my Droid has a max width of 800 pixels, which I think some lower-resolution computers are smaller than, but I want my Droid to display the mobile CSS, so I am not sure max device width is the best solution. So does anybody know how I'd design my CSS link tags so that the mobile CSS is used only by smartphones while the desktop CSS is used only by desktop computers (including the kind with a width under 800px)?

like image 628
brony4lyfcuzponiesrule Avatar asked Jul 22 '11 18:07

brony4lyfcuzponiesrule


3 Answers

Responsive Web Design, using media-queries

@media screen and (min-width: 800px) {
    // this css will only be used when the screen size is min 800px
}
like image 106
Aaron Avatar answered Sep 22 '22 05:09

Aaron


I tried the solutions above, but they didn't work for iPad in landscape mode. The iPad Landscape is 1024 px. So my solution was:

@media only screen and (min-width: 1025px) {
        .myClass {
            /*...your desktop-only style...*/
        }
    } 
like image 12
Hugo Nava Kopp Avatar answered Sep 19 '22 05:09

Hugo Nava Kopp


@media (pointer: fine) {
    body {
        background-color: red;
    }
}
like image 6
asdjfiasd Avatar answered Sep 22 '22 05:09

asdjfiasd