2

I have two doubts.

  1. I want to display different elements in different screen size for a div by using @media query? Can I name the same ID for all the elements.?

  2. Can I use same id for two elements where if one element displayed another element will be hidden by using @media query?

Note: I know IDs are unique but here I want to use based upon the screen size.

media only screen and (min-width: 480px) {

}

@media only screen and (min-width: 768px) {

}

Please advice me.

Ruddy
  • 9,795
  • 5
  • 45
  • 66
Naju
  • 1,541
  • 7
  • 27
  • 59
  • 1
    @oGeez . It will be a problem while using js? so i added javascript – Naju Apr 02 '14 at 07:43
  • 1
    I'm not sure I know the answer for this but more to the point why would you ever do this when `class` exists. There is no need to use `id` if you are going to make multiple elements that need it, you would just use class. In the terms you are using it the only difference is `#` - `.` and that's about it. No real reason to use `id` so it would be best not to. – Ruddy Apr 02 '14 at 07:44
  • 1
    I am completely agree with Dikesh, if you want different style should be apply to set of elements when screen is of particular size only, then you can give definition of class in particular one media query blog. read this [thread](http://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-types) – gkd Apr 02 '14 at 07:48

1 Answers1

1

You should use a class instead of an id here. Id's are unique. You can add a class to as many elements as you like.

Media queries is not an excuse to use the same id multiple times.

Silly example of how it could be implemented with a class:

.some-class{
   background-color:blue;
}

media only screen and (min-width: 480px) {
   .some-class{
      background-color:red;
   }
}

@media only screen and (min-width: 768px) {
   .some-class{
      background-color:green;
   }
}
Peter Rasmussen
  • 16,474
  • 7
  • 46
  • 63