Reputation: 2020
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
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