Code2care : TechZone Apps & Tutorials

Responsive web design using CSS Media Queries

Now-a-days there are wide variety of devices on which people are browsing the web, desktops, laptops, mobile phones, tablets, phablets and even TVs. Statistics show that there is a significant increase in internet traffic from mobile phones, so it is very important to have your website optimized for devices with various screen sizes for better user experience.

Some of the screen sizes/resolutions that your website must be optimized :
  • Small screen Mobile : 320px
  • Medium screen Mobile : 480px
  • Large screen Mobile/Tablets : 680px
  • Mobile/Tablets : 800px
  • Laptops/Desktops :960px
  • Laptops/Desktops :1024px
  • Desktops/Tv : 1920px

  • To make your website adaptable to various screen sizes CSS Media screen Queries can be used.

    Css selectors can be wrapped into the following syntax,
    @media only screen and (min-width : <<screen width>>) {
    	//selectors
    }
    According to the screen size media block\'s we can alter the selectors atrributes.
    </style>
    	@media only screen and (min-width : 320px) {
    	//selectors
    }
    
    	@media only screen and (min-width : 480px) {
    	//selectors
    }
    
    }
    	/* Mobile phones/Tablets/Phablets ------- */
    	@media only screen and (min-width : 600px) {
    	//selectors
    }
    
    	/* Tablets/Phablets ----------- */
    	@media only screen and (min-width : 800px) {
    	//selectors
    }
    
    	/* Desktop/Laptops ----------- */
    	@media only screen and (min-width : 1024px) {
    	//selectors
    }
    
    	/* Desktop/Laptops ----------- */
    	@media only screen and (min-width : 1200px) {
    	//selectors
    }
    </style>
    Note : Media screen queries are not supported by ie6, ie7 and ie8.

    Responsive css design Image


    Demo
    Top


    Posts related to responsive.


    1. Responsive web design using CSS Media Queries


    Posts related to css.


    1. Remove Html head and body tags from ckeditor source

    2. Responsive web design using CSS Media Queries

    3. Default speed of Marquee tag : SCROLLAMOUNT

    4. Align html element at the center of page vertically and horizontally

    5. How to make jsfiddle bootstrap ready

    6. How to place two div elements next to each other

    7. How to set opacity only for div background and not the text - CSS

    8. How to make div or text in html unselectable using CSS

    9. Chessboard with pieces using pure HTML and CSS

    10. Comprehensive 256 Ascii code table with Html Hex IBM Microsoft Key

    11. Facebook like box overlaps fixed div element while scrolling the page

        more...

    Posts related to mediaQueries.


    1. Responsive web design using CSS Media Queries


    Code2care : Lines of Code for Change
    Code2care is an initiative to publish and share varied knowledge in technical and non-technical areas gathered during day-to-day learnings and development activities.





    Android app on Google Play    








    Popular tags
    android
    x 175
    eclipse
    x 29
    notepadplusplus
    x 20
    macosx
    x 14
    sharepoint
    x 14
    html
    x 14
    mac
    x 13
    androidstudio
    x 11




    1000+ C Programs     PHP Tutorial     JSON Tutorial     Swift Tutorial     India Pinocdes     About Us     Privacy Policy


    Code2care © 2012-15