using different CSS rules for mobile vs desktop

The general way to do this is:

    /* mobile */
    body {
        ...
    }

    @media only screen and (min-width: 1000px) {
        /* desktop */
        body {
            ...
        }
    }

However, this works a little better for me:

    /* mobile */
    body {
        ...
    }

    /* 2x and above are high-DPI mobile screens, 1x is desktop */
    @media only screen and (max-resolution: 1.5x) {
        /* desktop */
        body {
            ...
        }
    }

Side note: ScreenResolutionTest.com is an incredibly helpful site for this.