CODEWITHSUNDEEP
cssmobile-safarimobile-website
Jitendra Vyas
Jitendra Vyas

Reputation: 152935

How to write CSS only for devices which are below than 300px in screen width, but not for all?

How to write CSS only for devices which are below than 320px in screen width, but not for all?

I want to write CSS like

Only example to explain to question

devices with min-width of 300 px  { color:red}
devices with max-width of 299 px  { color:blue}

And how to control Landscape mode in both condition?

Upvotes: 2

Views: 2286

Answers (5)

Tim
Tim

Reputation: 1958

It's not as famous as screen and (max-width: or min-width) but CSS3 media queries also allow you to apply css depending on your orientation device.

A code example

@media screen and (orientation:portrait) {

/* Portrait styles */

}

@media screen and (orientation:landscape) {

/* Landscape styles */

}

See there specification : http://www.w3.org/TR/css3-mediaqueries/#orientation

Upvotes: 1

xanderer
xanderer

Reputation: 438

I find that this code isn't very reliable on feature phones and some blackberrys. In which case I use Device Atlas to get the width on the server side.

@media only screen and (max-width: 299px) {
  color:blue;
}


@media only screen and (min-device-width: 300px) {
  color:red;
}

Upvotes: 1

Jonathan Miller
Jonathan Miller

Reputation: 1786

There is a wonderful article that can explain it much better than I can here:

http://www.alistapart.com/articles/responsive-web-design/

Upvotes: 1

Boris Zbarsky
Boris Zbarsky

Reputation: 35084

myselector { color: blue; }
@media screen and (min-width: 300px) {
  myselector {
    color: red;  
  }
}

Though you may need to adjust this as needed depending on whether you care about CSS px width of the viewport or CSS px width of the device screen or something else. That wasn't clear from the question.

Upvotes: 2

JacobTheDev
JacobTheDev

Reputation: 18560

You could do this using javascript.

if (document.clientWidth < 300) {
 document.getElementById("yourElement").style.color="blue");
} else if (document.clientWidth >= 300) {
 document.getElementById("yourElement").style.color="red");
}

Or something like that.

You could probably also find a way to include a different style sheet if it's under a certain pixel width. I'm not exactly sure how to modify a <head> with JS, though, so you'll have to wait for another answer or google around a bit.

Upvotes: 0

Related Questions