Question

I need to built a website but I have specific instructions to not use javascript. In addition to that I also have to make one that work for iPhone/mobile devices (also no javascript). It’s fine for me to switch style sheets base on devices with some PHP magic, so it doesn’t have to be the same CSS file.

What I want to know is, what are some recommended CSS frameworks for either or both scenarios?

Answer 1

You would use media queries to achieve this.

https://developer.mozilla.org/en-US/docs/CSS/Media_queries

The basic idea is to design from mobile up, or “responsive” design. You should google search that for more insight.

You then use such operators as

@media only screen and (max-width: 480px){
    #content{
        display:block;
    }
}

for example, to define how a particular element changes for each view.
There are tons of resources for this that can be found with basic searches, so the need to outline in detail here is none.

You can also add in specific style sheets like so:

<link rel="stylesheet" media="all and (max-width: 480px)" href="http://foo.bar.com/stylesheet.css" />

if you want to separate the style sheets for each view.

good luck.

If you have specific questions, feel free to ask and I can update.