CSS3 Mod

media-query-desktop-first-genesis-sample.css

/* Theme WordPress Genesis Sample (extrait) */

/* STYLES POUR ORDINATEUR */

html {
	font-size: 62.5%; /* 10px browser default */
}

/* Chrome fix */
body > div {
	font-size: 2rem;
}

body {
	background-color: #eee;
	color: #333;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 20px;
	font-size: 2rem;
	-webkit-font-smoothing: antialiased;
	font-weight: 400;
	line-height: 1.625;
	margin: 0;
}

/* GROUPES DE @MEDIA, DU PLUS GRAND AU PLUS PETIT */ 


@media only screen and (max-width: 1340px) {

	.site-inner,
	.wrap {
		max-width: 1140px;
	}
	/* [...] */

}


@media only screen and (max-width: 1200px) {

	.site-inner,
	.wrap {
		max-width: 960px;
	}
	/* [...] */

}

@media only screen and (max-width: 1023px) {
	/* iPad portrait fait 1024px de large */ 

	.site-inner,
	.wrap {
		max-width: 800px;
	}	
	/* [...] */

}

@media only screen and (max-width: 860px) {

	.site-inner {
		padding: 5% 5% 0;
	}

	.wrap {
		padding-left: 5%;
		padding-right: 5%;
	}
	/* [...] */

}

media-query-ex.css

/**************************
* Mettre dans le head du HTML
* < meta name="viewport" content="width=device-width; initial-scale=1.0">
**************************/

/**************************
* SMARTPHONE (PORTRAIT ET PAYSAGES)
**************************/
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-width: 320px) and (max-width: 480px) {
    /* Styles */
}

/**************************
* SMARTPHONE (PAYSAGE)
**************************/
/* Smartphones (landscape) ----------- */
@media only screen and (min-width: 321px) {
    /* Styles */
}

/**************************
* SMARPHONE (PORTRAIT)
**************************/
/* Smartphones (portrait) ----------- */
@media only screen and (max-width: 320px) {
    /* Styles */
}

/**************************
* IPADS (PORTRAIT ET PAYSAGE)
**************************/
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    /* Styles */
}

/**************************
* IPADS (PAYSAGES)
**************************/
/* iPads (landscape) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    /* Styles */
}

/**************************
* IPADS (PORTRAIT)
**************************/
/* iPads (portrait) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    /* Styles */
}

/**************************
* ORDI DE BUREAU ET PORTABLES
**************************/
/* Desktops and laptops ----------- */
@media only screen and (min-width: 1224px) {
    /* Styles */
}

/**************************
* ÉCRANS LARGES
**************************/
/* Large screens ----------- */
@media only screen and (min-width: 1824px) {
    /* Styles */
}

/**************************
* IPHONE RETINA
**************************/
/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
}

media-query-mobile-first-twenty-sixteen.css

/* Theme WordPress Twentysixteen (extrait) */

/* STYLES POUR MOBILES */

body,
button,
input,
select,
textarea {
	color: #1a1a1a;
	font-family: Merriweather, Georgia, serif;
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.75;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	font-weight: 700;
	margin: 0;
	text-rendering: optimizeLegibility;
}

/* [...] */


/* GROUPES DE @MEDIA, DU PLUS PETIT AU PLUS GRAND */ 


/**
 * 710px
 */

@media screen and (min-width: 44.375em) {
	.site {
		margin: 21px;
	}

	.site-main {
		margin-bottom: 5.25em;
	}

	/* [...] */

}


/**
 * 783px
 */

@media screen and (min-width: 48.9375em) {
	body:not(.custom-background-image).admin-bar:before {
		top: 32px;
	}
}

/**
 * 910px
 */

@media screen and (min-width: 56.875em) {

	.widecolumn {
		padding-right: 15%;
		padding-left: 15%;
	}

	/* [...] */

}


/**
 * 985px
 */

@media screen and (min-width: 61.5625em) {
	.site-main {
		margin-bottom: 7.0em;
	}
	/* [...] */

}


/**
 * 1200px
 */

@media screen and (min-width: 75em) {

	body:not(.search-results) .entry-summary .aligncenter {
		margin-bottom: 1.5217391304em;
	}
	/* [...] */

}

responsive-box-sizing.css

/* normalize.css v6.0.0 | MIT License | http://necolas.github.io/normalize.css/ */

html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],/* 1 */
[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,/* 1 */
menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}


/* Box Sizing */

/*
 Voir le très bon article:
 https://css-tricks.com/box-sizing/
*/

html,
input[type="search"]{
	box-sizing: border-box;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}