kossoy/Readme.md

## Readme.md

      
    Raw
  

              Readme.md
            
          
    Media queries in action

Simple example using media queries for dynamic size changing of nested divs.
To see results -- open in new window and try to resize.
@media screen and (max-width: 700px) {}

  
## index.html
<!doctype html>
<style type="text/css">

    html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    body {

        /* Firefox */
        display: -moz-box;
        -moz-box-orient: horizontal;
        -moz-box-pack: center;
        -moz-box-align: center;

        /* Safari and Chrome */
        display: -webkit-box;
        -webkit-box-orient: horizontal;
        -webkit-box-pack: center;
        -webkit-box-align: center;

        /* W3C */
        display: box;
        box-orient: horizontal;
        box-pack: center;
        box-align: center;
    }

    div.container {
        width: 300px;
        height: 300px;
        background: gray;
        padding: 20px;
    }

    div.tile {
        width: 50px;
        height: 50px;
        background: #a3bad9;
        float: left;
        position: relative;
        margin: 25px;
        top: 45px;
    }

        /* max-width */
    @media screen and (max-width: 700px) {
        div.container {
            width: 60px;
            height: 60px;
        }

        div.tile {
            width: 10px;
            height: 10px;
            margin: 5px;
            top: 7px;
        }
    }

        /* min-width & max-width */
    @media screen and (min-width: 701px) and (max-width: 850px) {
        div.container {
            width: 120px;
            height: 120px;
        }

        div.tile {
            width: 20px;
            height: 20px;
            margin: 10px;
            top: 14px;
        }
    }

        /* min-width & max-width */
    @media screen and (min-width: 851px) and (max-width: 1024px) {
        div.container {
            width: 240px;
            height: 240px;
        }

        div.tile {
            width: 40px;
            height: 40px;
            margin: 20px;
            top: 28px;
        }
    }

</style>
<body>
<div class="container">
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
</div>
	<!doctype html>
	<style type="text/css">

	html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	}

	body {

	/* Firefox */
	display: -moz-box;
	-moz-box-orient: horizontal;
	-moz-box-pack: center;
	-moz-box-align: center;

	/* Safari and Chrome */
	display: -webkit-box;
	-webkit-box-orient: horizontal;
	-webkit-box-pack: center;
	-webkit-box-align: center;

	/* W3C */
	display: box;
	box-orient: horizontal;
	box-pack: center;
	box-align: center;
	}

	div.container {
	width: 300px;
	height: 300px;
	background: gray;
	padding: 20px;
	}

	div.tile {
	width: 50px;
	height: 50px;
	background: #a3bad9;
	float: left;
	position: relative;
	margin: 25px;
	top: 45px;
	}

	/* max-width */
	@media screen and (max-width: 700px) {
	div.container {
	width: 60px;
	height: 60px;
	}

	div.tile {
	width: 10px;
	height: 10px;
	margin: 5px;
	top: 7px;
	}
	}

	/* min-width & max-width */
	@media screen and (min-width: 701px) and (max-width: 850px) {
	div.container {
	width: 120px;
	height: 120px;
	}

	div.tile {
	width: 20px;
	height: 20px;
	margin: 10px;
	top: 14px;
	}
	}

	/* min-width & max-width */
	@media screen and (min-width: 851px) and (max-width: 1024px) {
	div.container {
	width: 240px;
	height: 240px;
	}

	div.tile {
	width: 40px;
	height: 40px;
	margin: 20px;
	top: 28px;
	}
	}

	</style>
	<body>
	<div class="container">
	<div class="tile"></div>
	<div class="tile"></div>
	<div class="tile"></div>
	<div class="tile"></div>
	<div class="tile"></div>
	<div class="tile"></div>
	</div>