1 reply [Last post]
Joe King
Joe King's picture
Offline
newbie
United Kingdom
Last seen: 5 years 31 weeks ago
United Kingdom
Joined: 2015-03-19
Posts: 1
Points: 2

Hope someone can help.

I am trying to serve a mobile version of a website to mobile visitors and a desktop one to desktop visitors. Basically it's the same website, but with different font sizes.

Can I do this with CSS and if so is this the way to do it - by placing this code in a style.css file and refer to it on each html based web page?

<code>
@media screen and (max-width: 320px){
code goes here for mobile
}
@media screen and (max-width: 960px){
code goes here for desktop
}

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi Joe King, That's the basic

Hi Joe King,
That's the basic idea.
max and min width are a little confusing, you may want to use min-width with those values.
Max-width is like saying the width has to be at least this big.

You need to consider things like what happens when multiple media queries match and when none match.

Have a look at this test page: http://csscreator.com/media.html