jackncoke
jackncoke

Reputation: 2020

how to accommodate mobile devices

I have built a site that is fully functional on PC, Laptop and Ipad devices. I want to expand it to take on mobile phones. The problem i have faced is i am not sure the best way to do this. I currently Use themes in my site. I would think the best way to do this would be to detect the device and change the theme based on if it is a phone or a PC. A lot of the examples i found show how to do this when you are linking Style sheets.

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />

Should i be doing this through linked stylesheets or can i do this with a theme somehow?

Upvotes: 1

Views: 220

Answers (1)

Vukašin Manojlović
Vukašin Manojlović

Reputation: 2733

Most of the Desktop + Mobile themes work like following code. The best way is using @media queries (check this link and this one). Instead of using more stylesheets, use only one.

@media screen and (min-device-width: 801px) {
    /* Your style here */
}

@media screen and (max-device-width: 800px) {
    /* Your style here for mobile  */
}

Upvotes: 1

Related Questions