CSS Media Queries





To make elements responsive and mobile friendly, we use the media queries method


media queries allow you to make your website responsive, without creating mobile app, which is also better for SEO.


When using media queries you declare a boundary or "limit" of pixels, If user screen size have crossed or dropped the limit, the style of the element will change.



In the next example we use media queries method to create responsive form, resize the browser window to see the effect. When the screen is less than 600px wide, the style of the page/component changes.




Code Example:

                
                  
                @media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0; }
  
              
                
            
Try yourself >>





CSS Media Query Syntax


the media queries structure consists of a media type, and one or more expressions:


Code Example:

                
                  
                @media  (mediatype) and (expressions) {
  CSS-Code;
}
  
              
                
            



In the next example we declare media queries element , If the screen is less than 600 pixels, the media queries get active.


resize the browser window to see the effect.


Code Example:

                
                  
                @media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;}
  
              
                
            
Try yourself >>




In the next example we declare media queries element , If the screen is more than 600 pixels, the media queries get active and the element is hidden:


resize the browser window to reveal the form:


Code Example:

                
                  
                @media screen and (min-width: 600px) {
  .col-25, .col-75, input[type=submit] {
   display:none;}}
  
              
                
            
Try yourself >>





CSS3 media types



Value Description
screen computer screens, smart-phones, tablets.
all all media type devices
print printers
speech screenreaders that "reads" the page out loud









enjoy this css full course, we create this css tutorial for beginners With examples, and other advanced css tutorials, our courses are free, learn css3 online, free computer programming online courses.



Navigation