css - assign id to body tag based on device type -

i'm wondering if there's way can assign id webpage based on type of device. example, have css set follows

#desktop { min-width:1200px; min-height:500px; }  #tablet { min-width:600px; min-height:480px;  #mobile { min-width:320px; min-height:400px; 

what assign these ids body tag, know there ways detect device , assign css file, can assign id body based on device?

what need use css feature called media query.

process: add in head tag of page meta tag below display correctly pages on device (size of text, width etc...)

<meta name="viewport" content="width=device-width" /> 

or

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 

check online review differences, enable zoom etc...

then, in css, have build this

css

your curent css here (for desktop)     #the_name_of_the_div_is_the_same{         width:100%;         background-color:yellow;     }  /* 4 principals size of screen: */ /* no body using 1 @media screen , (max-width: 1680px) {     #the_name_of_the_div_is_the_same{        in css     } }*/  /* then, if width of screen under 960px , above 758px, div attributes */ @media screen , (max-width: 960px) {     #the_name_of_the_div_is_the_same{         width:80%;         background-color:red;     } }  @media screen , (max-width: 758px) {     #the_name_of_the_div_is_the_same{         width:30%;         background-color: black;     } }  @media screen , (max-width: 524px) {     #the_name_of_the_div_is_the_same{         width:70%;         background-color: green;     } } 

dimensions:

iphone 3+4 portrait w320 x 480

iphone 5 portrait 320 x 568

crappy android portrait 240 x 320

android (samsung galaxy) portrait 380 685

ipad portrait 768 x 1024

kindle portrait 600 x 1024

or can use plug-in detect devices, , redirect them correct page (3 different pages, or load 3 different css etc) according device. note: solution, website won't responsive work across devices.