Ads Top

How to learn responsive web design?

Responsive web design techniques with media queries:

You want to learn responsive web designing so must need to use meta tag in the html on <head> section:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

If you will not use meta tag as above then you will found your css is working but not change for the mobile devices means small devices. And then need to media queries as syntax below:

@media() {

            .anyclass { }

        }

@media(width==min-width, max-width, width) {

            .anyclass {

                background#eb7979;

                padding15px;

            }

        }

You can use any class between @media body tag as curly braces. This is same as javascript condition like :

if (condition) {

            // block code

        }

Now you can start html and convert in the responsive html code only from css.

You can see below code example:

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive HTML from CSS with media query</title>
    <style>
        body {
            margin0;
            padding0;
            font-familyArialHelveticasans-serif;
        }
        .mainBox {
            background#ddd;
            border1px solid #ccc;
            padding15px;
            max-width600px;
            margin20px auto;
            border-radius10px;
            box-shadow0 0 10px 1px #999;
        }
        @media(width:1100px) {
            /* 
            this is optional as your requirement that you need only on 
the screen 1100
            } */
        }
        @media(min-width:1200px) and (max-width1300px) {
            /* 
            this is optional as your requirement that you need only 
on the minimum device size 1200 to 1300
            } */
            .mainBox {
                background#f00;
                padding15px;
            }
        }
        @media(max-width:1024px) {
            .mainBox {
                background#0bf;
                padding15px;
            }
        }
        @media(max-width:992px) {
            .mainBox {
                background#0b6;
                padding15px;
            }
        }
        @media(max-width:767px) {
            .mainBox {
                background#ccc;
                padding15px;
            }
        }
        @media(max-width:414px) {
            .mainBox {
                background#eb7979;
                padding15px;
            }
        }
    </style>
</head>

<body>
    <div class="mainBox">Responsive webdesining from CSS with media query</div>
</body>
</html> 

How to test this page responsive or not?

Now you can go on the browser and resize your window and when change your device size then you will found that your media query is working. As below screenshot:

 

No comments:

Copyright Reserved to Anything Learn. Powered by Blogger.