{"id":519,"date":"2013-04-06T12:40:29","date_gmt":"2013-04-06T11:40:29","guid":{"rendered":"http:\/\/www.bocciolesi.fr\/tutoriels-et-cours\/?p=519"},"modified":"2017-02-24T12:40:44","modified_gmt":"2017-02-24T11:40:44","slug":"responsive-web-design-media-queries-css3","status":"publish","type":"post","link":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/responsive-web-design-media-queries-css3\/","title":{"rendered":"Responsive Web Design &#8211; Think Mobile First"},"content":{"rendered":"<div class=\"pdfprnt-buttons pdfprnt-buttons-post pdfprnt-top-right\"><a href=\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-json\/wp\/v2\/posts\/519?print=pdf\" class=\"pdfprnt-button pdfprnt-button-pdf\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-content\/plugins\/pdf-print\/images\/pdf.png\" alt=\"image_pdf\" title=\"Afficher le PDF\" \/><span class=\"pdfprnt-button-title pdfprnt-button-pdf-title\">Enregistrer en PDF<\/span><\/a><a href=\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-json\/wp\/v2\/posts\/519?print=print\" class=\"pdfprnt-button pdfprnt-button-print\" target=\"_blank\"><\/a><\/div><p><span style=\"color: #3366ff;\"><strong>I\u25baDans ce cours, nous allons aborder le Responsive Web Design et les fameux M\u00e9dia Queries du CSS3.<\/strong><\/span><\/p>\n<p>Qu&#8217;est ce que le<strong><span style=\"color: #3366ff;\"> Responsive Web Design<\/span><\/strong> ? Jusque vers la fin 2009-2010, la majorit\u00e9 des sites Web \u00e9taient maquett\u00e9s avec un container centr\u00e9 (un div ou un tableau) dont la largeur maxi \u00e9tait de 1000px. On utilisait en g\u00e9n\u00e9ral une image de fond que l&#8217;on pla\u00e7ait dans le background du body en CSS. Cette image assez large occupait plus ou moins d&#8217;espace selon la r\u00e9solution des \u00e9crans des internautes.<\/p>\n<p>Mais on \u00a0ne pensait pas en utilisant\u00a0<span style=\"font-size: 1rem;\">cette m\u00e9thode de conception\u00a0<\/span><span style=\"line-height: 1.714285714; font-size: 1rem;\">que de multiples terminaux Web feraient leur apparition ! Le tout 1er SmartPhone est apparu en 2007 et se nommait<strong><span style=\"color: #3366ff;\"> IPhone<\/span><\/strong>, puis vinrent tous les autres : les\u00a0<strong><span style=\"color: #3366ff;\">SmartPhones Android, les WindowsPhone et les Tablettes tactiles<\/span><\/strong> (dont l&#8217;IPad).<\/span><\/p>\n<p><span style=\"font-size: 1rem; line-height: 1.714285714;\"> Les d\u00e9veloppeurs et les\u00a0<\/span>designers<span style=\"font-size: 1rem; line-height: 1.714285714;\">\u00a0Web ont du adapter leur mise en page Web \u00e0 tous ces diff\u00e9rents terminaux. Ce n&#8217;\u00e9tait d\u00e9j\u00e0 pas simple avec les diff\u00e9rents navigateurs pr\u00e9sents sur le march\u00e9 de l&#8217;Internet et les diff\u00e9rentes versions de tous ces navigateurs, il fallait qu&#8217;un \u00e9l\u00e9ment de plus apparaisse dans la probl\u00e9matique de conception de pages Web !<br \/>\n<\/span><em><span style=\"line-height: 1.714285714; font-size: 1rem; text-decoration: underline;\">NB <\/span><\/em><span style=\"line-height: 1.714285714; font-size: 1rem;\">: <\/span><em style=\"line-height: 1.714285714; font-size: 1rem;\">ON peut\u00a0consulter\u00a0les statistiques d&#8217;utilisation des navigateurs ici :\u00a0<a title=\"Statistiques d'utilisation des navigateurs\" href=\"http:\/\/gs.statcounter.com\/\" target=\"_blank\">http:\/\/gs.statcounter.com\u00a0<\/a><\/em><\/p>\n<p><span style=\"font-size: 1rem;\">\u00a0<\/span><span style=\"font-size: 1rem;\">Beaucoup\u00a0consultent<\/span><span style=\"font-size: 1rem;\">\u00a0le Web depuis leurs t\u00e9l\u00e9phones portables avec de\u00a0petites tailles d&#8217;\u00e9cran. Les sites con\u00e7us en 1000px sont automatiquement r\u00e9duits pour que la page s&#8217;affiche int\u00e9gralement. l&#8217;utilisateur peut donc zoomer avec ses doigts et naviguer dans telle ou telle partie du site. Mais il s&#8217;av\u00e8re que ce n&#8217;est pas tr\u00e8s pratique et la question se pose alors de d\u00e9velopper plusieurs interfaces du site, une pour le web classique, une pour telle cat\u00e9gorie de SmartPhones, une pour telle autre, etc .. On se rend vite compte que cette mani\u00e8re de faire engendrera beaucoup de travail en temps et en co\u00fbt.<\/span><span style=\"font-size: 1rem;\">\u00a0<\/span><\/p>\n<p>Heureusement, il y a une solution : le <strong><span style=\"color: #3366ff;\">Responsive Web Design<\/span><\/strong>, un design, une conception de mise en page qui peut s&#8217;adapter de mani\u00e8re tr\u00e8s fluide \u00e0 toutes ces diff\u00e9rentes largeur d&#8217;\u00e9cran !<\/p>\n<p>Et le <span style=\"color: #3366ff;\"><strong>RWD<\/strong><\/span> s&#8217;appuie \u00e9videmment sur <strong><span style=\"color: #3366ff;\">HTML5<\/span> <\/strong>et <strong><span style=\"color: #3366ff;\">CSS3<\/span><\/strong>, les r\u00e9volutionnaires de la conception Web !<\/p>\n<p>=&gt; Quelques outils pour tester le responsive :<\/p>\n<ul>\n<li><span style=\"line-height: 1.714285714; font-size: 1rem;\">Firefox :\u00a0<\/span><a style=\"line-height: 1.714285714; font-size: 1rem;\" href=\"https:\/\/addons.mozilla.org\/en-us\/firefox\/addon\/firesizer\/\">https:\/\/addons.mozilla.org\/en-us\/firefox\/addon\/firesizer\/<\/a><\/li>\n<li><span style=\"line-height: 1.714285714; font-size: 1rem;\">Chrome :\u00a0<\/span><a style=\"line-height: 1.714285714; font-size: 1rem;\" href=\"https:\/\/chrome.google.com\/webstore\/detail\/window-resizer\/kkelicaakdanhinjdeammmilcgefonfh\">https:\/\/chrome.google.com\/webstore\/detail\/window-resizer\/kkelicaakdanhinjdeammmilcgefonfh<\/a><\/li>\n<li>et :\u00a0<a href=\"http:\/\/lab.maltewassermann.com\/viewport-resizer\/\">http:\/\/lab.maltewassermann.com\/viewport-resizer\/<\/a><\/li>\n<\/ul>\n<h2><strong><span style=\"color: #3366ff;\">\u25ba Principes du Responsive<\/span><\/strong><\/h2>\n<p>Nous allons voir comment mettre en place un site adaptatif avec les m\u00e9thodes du <strong><span style=\"color: #800080;\">Responsive Design :<\/span><\/strong><\/p>\n<p>Les navigateurs des terminaux ont tendance \u00e0 r\u00e9duire automatiquement le site Internet con\u00e7u pour un affichage classique PC et le rendre compl\u00e8tement illisible.<\/p>\n<p><span style=\"font-size: 1rem; line-height: 1.714285714;\"><strong><span style=\"color: #800080;\">=&gt; Exemple :<\/span><\/strong> un site est\u00a0<\/span>g\u00e9n\u00e9ralement<span style=\"font-size: 1rem; line-height: 1.714285714;\">\u00a0con\u00e7u pour un affichage en 1024 px minimum en largeur.<br \/>\nLe navigateur mobile va essayer de faire rentrer les 1024 px du site dans une taille d&#8217;\u00e9cran qui peut aller de 380 px \u00e0 1000 px au plus pour les tablettes&#8230;<\/span><\/p>\n<p><strong><span style=\"color: #800080;\">=&gt; Les tailles d&#8217;\u00e9cran\u00a0des navigateurs :<\/span><br \/>\n<\/strong>Comprendre comment sont g\u00e9r\u00e9es de deux mani\u00e8res diff\u00e9rentes n&#8217;est pas une mince affaire, il existe d\u00e9j\u00e0 2 concepts quant \u00e0 la gestion des tailles d&#8217;\u00e9crans :<\/p>\n<ul>\n<li>La surface r\u00e9elle\u00a0<strong>[<\/strong>\u00a0<strong><span style=\"color: #3366ff;\">width\u00a0<\/span>] :\u00a0<\/strong>c&#8217;est la r\u00e9solution de l&#8217;\u00e9cran, le nombre pr\u00e9cis de pixels de l&#8217;\u00e9cran d\u00e9finis par le constructeur.<\/li>\n<\/ul>\n<ul>\n<li>La surface en\u00a0<strong>pixels CSS\u00a0[\u00a0<span style=\"color: #3366ff;\">device-width<\/span>\u00a0]<\/strong>\u00a0: c&#8217;est le nombre de pixels virtuels que pense avoir le terminal du mobile.<\/li>\n<\/ul>\n<p><span style=\"line-height: 1.714285714; font-size: 1rem;\">Avec la technologie <strong><span style=\"color: #3366ff;\">Retina d&#8217;Apple<\/span><\/strong>,la densit\u00e9 des pixels est telle que la pixellisation m\u00eame de tr\u00e8s pr\u00eat est quasiment invisible.\u00a0<\/span><br style=\"line-height: 1.714285714; font-size: 1rem;\" \/><span style=\"line-height: 1.714285714; font-size: 1rem;\">Les Iphones 4 et 5 ont une r\u00e9solution de 326 ppp (pixels par pouce) et 128 ppcm (pixels par cm), les Ipad ont une r\u00e9solution de 264 ppp. ce qui fait que les r\u00e9solutions en taille r\u00e9elle <span style=\"color: #3366ff;\">width<\/span> et <span style=\"color: #3366ff;\">height<\/span> deviennent de plus en plus \u00e9lev\u00e9es !<br \/>\n<\/span>Les tailles en<span style=\"color: #3366ff;\"> pixels CSS<\/span> (device-width et device-height) ram\u00e8nent les dimensions de l&#8217;\u00e9cran \u00e0 quelque chose de plus r\u00e9aliste et plus facile \u00e0 impl\u00e9menter dans le d\u00e9veloppement des pages HTML. Nous verrons plus tard comment l&#8217;impl\u00e9menter avec les m\u00e9dia-queries &#8230;<\/p>\n<p style=\"font-size: 1rem;\"><em>=&gt; Voici un tableau de comparaison :<\/em><\/p>\n<p><a href=\"https:\/\/www.mb-creation-web.fr\/tutoriels-et-cours\/wp-content\/uploads\/2013\/05\/Capture15.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.mb-creation-web.fr\/tutoriels-et-cours\/wp-content\/uploads\/2013\/05\/Capture15.jpg\" alt=\"Capture\" width=\"717\" height=\"375\" \/><\/a><\/p>\n<p>On pourra trouver une liste plus compl\u00e8te\u00a0<a href=\"http:\/\/en.wikipedia.org\/wiki\/List_of_displays_by_pixel_density\" target=\"_blank\">http:\/\/en.wikipedia.org\/wiki\/List_of_displays_by_pixel_density<\/a>\u00a0ou \u00a0<a href=\"http:\/\/mobitest.me\/devices\/\" target=\"_blank\">http:\/\/mobitest.me\/devices\/<\/a><\/p>\n<p><strong><span style=\"font-size: 1rem; line-height: 1.714285714; color: #800080;\">=&gt; Le concept du viewport des mobiles :<\/span><\/strong><\/p>\n<p><span style=\"font-size: 1rem; line-height: 1.714285714;\">Le navigateur mobile a donc tendance \u00e0 simuler une largeur d&#8217;\u00e9cran plus grande, justement pour faire rentrer ttoute la page ! Mais la r\u00e9duit fortement &#8230;<br \/>\nLe meta-tag\u00a0<\/span><strong style=\"font-size: 1rem;\"><span style=\"color: #3366ff;\">viewport\u00a0<\/span><\/strong><span style=\"font-size: 1rem; line-height: 1.714285714;\">invent\u00e9 et propri\u00e9taire d&#8217;Apple, (totalement \u00e9tranger \u00e0 toute norme homologu\u00e9e !) peut solutionner le probl\u00e8me.<br \/>\nH<\/span><span style=\"font-size: 1rem; line-height: 1.714285714;\">eureusement, les navigateurs mobiles l&#8217;ont adopt\u00e9 en grande majorit\u00e9&#8230;<\/span><\/p>\n<p><span style=\"font-size: 1rem; line-height: 1.714285714;\">Le\u00a0<span style=\"color: #3366ff;\"><strong style=\"font-size: 1rem; line-height: 1.714285714;\">viewport\u00a0<\/strong><\/span>par d\u00e9faut des terminaux mobiles est de 980 px.\u00a0<\/span><\/p>\n<p><strong><span style=\"color: #800080;\">=&gt; Comment manipuler le meta-tag <\/span><span style=\"color: #800080;\">viewport\u00a0:<\/span><br \/>\n<\/strong><em><span style=\"line-height: 1.714285714; font-size: 1rem;\">en utilisant ce tag dans l&#8217;ent\u00eate du document HTML<br \/>\n<\/span><\/em><em style=\"line-height: 1.714285714; font-size: 1rem;\"><span style=\"color: #3366ff;\">&lt;meta name=&#8217;viewport&#8217; content=&#8217;attributs&#8217;&gt;<\/span><\/em><\/p>\n<p style=\"padding-left: 30px;\"><em id=\"__mceDel\"><strong><span style=\"color: #800080;\">&#8211; Liste des attributs du viewport \u00a0:<\/span><\/strong><\/em><\/p>\n<ul>\n<li><span style=\"line-height: 14px;\"><em><span style=\"color: #3366ff;\">width<\/span> <\/em>: largeur en pixel de la page<br \/>\nEn fixant <em><span style=\"color: #3366ff;\">width=device-width<\/span><\/em>, la largeur en pixel du navigateur s&#8217;adapte au nombre de pixels simul\u00e9s par la largeur du terminal (device)<br \/>\nSoit imaginez un site avec un container principal de <strong><span style=\"color: #800080;\">1000 px<\/span><\/strong>, visionn\u00e9 sur un mobile de <strong><span style=\"color: #800080;\">320px<\/span><\/strong> de large (Iphone 3 4 et 5), on ne voit que les 320 premiers pixels &#8230;<\/span><\/li>\n<li><span style=\"color: #3366ff;\">initial-scale<\/span> : niveau de zoom initial =&gt; initial-scale=&#8217;1&#8242;<\/li>\n<li><span style=\"color: #3366ff;\">minimum-scale\u00a0<\/span>: valeur la plus petite du zoom =&gt; minimum-scale=&#8217;0.5&#8242;<\/li>\n<li><span style=\"color: #3366ff;\">maximum-scale<\/span> : valeur la plus grande du zoom =&gt; maximum-scale=&#8217;1.5&#8242;<\/li>\n<li><span style=\"color: #3366ff;\">user-scalable<\/span> : autorisation ou pas de zoomer =&gt; user-scalable=&#8217;yes&#8217; | &#8216;no&#8217;<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.mb-creation-web.fr\/tutoriels-et-cours\/wp-content\/uploads\/2013\/05\/Capture.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-688\" src=\"https:\/\/www.mb-creation-web.fr\/tutoriels-et-cours\/wp-content\/uploads\/2013\/05\/Capture.jpg\" alt=\"Capture\" width=\"381\" height=\"555\" srcset=\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-content\/uploads\/2013\/05\/Capture.jpg 381w, https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-content\/uploads\/2013\/05\/Capture-205x300.jpg 205w\" sizes=\"auto, (max-width: 381px) 100vw, 381px\" \/><\/a><\/p>\n<p>Et sur une tablette de <strong><span style=\"color: #800080;\">600px<\/span> <\/strong>de large :<\/p>\n<p><a href=\"https:\/\/www.mb-creation-web.fr\/tutoriels-et-cours\/wp-content\/uploads\/2013\/05\/Capture1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-689\" src=\"https:\/\/www.mb-creation-web.fr\/tutoriels-et-cours\/wp-content\/uploads\/2013\/05\/Capture1.jpg\" alt=\"Capture\" width=\"642\" height=\"845\" srcset=\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-content\/uploads\/2013\/05\/Capture1.jpg 642w, https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-content\/uploads\/2013\/05\/Capture1-227x300.jpg 227w, https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-content\/uploads\/2013\/05\/Capture1-624x821.jpg 624w\" sizes=\"auto, (max-width: 642px) 100vw, 642px\" \/><\/a><\/p>\n<p>Il faut maintenant gr\u00e2ce aux media-queries, redimensionner ou faire dispara\u00eetre certaines zones :<br \/>\nLa d\u00e9tection se fera avec la largeur de l&#8217;\u00e9cran :<\/p>\n<p>\/*&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212; Iphone Max 380px &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;*\/<br \/>\n@media only screen and (max-width:320px) and (orientation:portrait)<br \/>\n{<br \/>\nsection {width:90%; margin-top:25%; float:left;}<br \/>\naside { display:none;}<br \/>\n#container { width:95%;padding:1%;}<br \/>\nnav li { clear:left; margin:0;}<br \/>\nnav li:first-child {margin:0;}<br \/>\nheader { height: auto; line-height: normal; padding: 0; }<br \/>\n}<\/p>\n<p><a href=\"https:\/\/www.mb-creation-web.fr\/tutoriels-et-cours\/wp-content\/uploads\/2013\/05\/Capture2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-691\" src=\"https:\/\/www.mb-creation-web.fr\/tutoriels-et-cours\/wp-content\/uploads\/2013\/05\/Capture2.jpg\" alt=\"Capture\" width=\"358\" height=\"522\" srcset=\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-content\/uploads\/2013\/05\/Capture2.jpg 358w, https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-content\/uploads\/2013\/05\/Capture2-205x300.jpg 205w\" sizes=\"auto, (max-width: 358px) 100vw, 358px\" \/><\/a><\/p>\n<p><em>\u00a0Michel BOCCIOLESI<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I\u25baDans ce cours, nous allons aborder le Responsive Web Design et les fameux M\u00e9dia Queries du CSS3. Qu&#8217;est ce que le Responsive Web Design ? Jusque vers la &#8230;<\/p>\n","protected":false},"author":1,"featured_media":1490,"comment_status":"closed","ping_status":"closed","sticky":true,"template":"","format":"standard","meta":{"footnotes":""},"categories":[36,38,39],"tags":[],"class_list":["post-519","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developpement-web","category-responsive-web-design","category-tutoriels"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Responsive Web Design - Think Mobile First - Tutoriels et Cours<\/title>\n<meta name=\"description\" content=\"Tutoriel consacr\u00e9 \u00e0 l&#039;explication des Responsive Web Design et des M\u00e9dia Queries du CSS3\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/responsive-web-design-media-queries-css3\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsive Web Design - Think Mobile First - Tutoriels et Cours\" \/>\n<meta property=\"og:description\" content=\"Tutoriel consacr\u00e9 \u00e0 l&#039;explication des Responsive Web Design et des M\u00e9dia Queries du CSS3\" \/>\n<meta property=\"og:url\" content=\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/responsive-web-design-media-queries-css3\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutoriels et Cours\" \/>\n<meta property=\"article:published_time\" content=\"2013-04-06T11:40:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-02-24T11:40:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-content\/uploads\/2013\/04\/Fotolia_66587149_XS.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"393\" \/>\n\t<meta property=\"og:image:height\" content=\"306\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Michel BOCCIOLESI\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Michel BOCCIOLESI\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/responsive-web-design-media-queries-css3\/\",\"url\":\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/responsive-web-design-media-queries-css3\/\",\"name\":\"Responsive Web Design - Think Mobile First - Tutoriels et Cours\",\"isPartOf\":{\"@id\":\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/responsive-web-design-media-queries-css3\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/responsive-web-design-media-queries-css3\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-content\/uploads\/2013\/04\/Fotolia_66587149_XS.jpg\",\"datePublished\":\"2013-04-06T11:40:29+00:00\",\"dateModified\":\"2017-02-24T11:40:44+00:00\",\"author\":{\"@id\":\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/#\/schema\/person\/6bdfe0a1263b803645c69e3d5748dabe\"},\"description\":\"Tutoriel consacr\u00e9 \u00e0 l'explication des Responsive Web Design et des M\u00e9dia Queries du CSS3\",\"breadcrumb\":{\"@id\":\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/responsive-web-design-media-queries-css3\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/responsive-web-design-media-queries-css3\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/responsive-web-design-media-queries-css3\/#primaryimage\",\"url\":\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-content\/uploads\/2013\/04\/Fotolia_66587149_XS.jpg\",\"contentUrl\":\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-content\/uploads\/2013\/04\/Fotolia_66587149_XS.jpg\",\"width\":393,\"height\":306,\"caption\":\"Responsive websites design for computers tablets and mobile phones concept icon vector illustration\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/responsive-web-design-media-queries-css3\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Responsive Web Design &#8211; Think Mobile First\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/#website\",\"url\":\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/\",\"name\":\"Tutoriels et Cours\",\"description\":\"Michel Bocciolesi | Formateur Consultant en Informatique\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/#\/schema\/person\/6bdfe0a1263b803645c69e3d5748dabe\",\"name\":\"Michel BOCCIOLESI\",\"description\":\"Michel Bocciolesi est consultant et formateur sp\u00e9cialis\u00e9 en Informatique.\",\"sameAs\":[\"https:\/\/www.mb-creation-web.fr\"],\"url\":\"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/author\/michel\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Responsive Web Design - Think Mobile First - Tutoriels et Cours","description":"Tutoriel consacr\u00e9 \u00e0 l'explication des Responsive Web Design et des M\u00e9dia Queries du CSS3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/responsive-web-design-media-queries-css3\/","og_locale":"fr_FR","og_type":"article","og_title":"Responsive Web Design - Think Mobile First - Tutoriels et Cours","og_description":"Tutoriel consacr\u00e9 \u00e0 l'explication des Responsive Web Design et des M\u00e9dia Queries du CSS3","og_url":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/responsive-web-design-media-queries-css3\/","og_site_name":"Tutoriels et Cours","article_published_time":"2013-04-06T11:40:29+00:00","article_modified_time":"2017-02-24T11:40:44+00:00","og_image":[{"width":393,"height":306,"url":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-content\/uploads\/2013\/04\/Fotolia_66587149_XS.jpg","type":"image\/jpeg"}],"author":"Michel BOCCIOLESI","twitter_misc":{"\u00c9crit par":"Michel BOCCIOLESI","Dur\u00e9e de lecture estim\u00e9e":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/responsive-web-design-media-queries-css3\/","url":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/responsive-web-design-media-queries-css3\/","name":"Responsive Web Design - Think Mobile First - Tutoriels et Cours","isPartOf":{"@id":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/#website"},"primaryImageOfPage":{"@id":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/responsive-web-design-media-queries-css3\/#primaryimage"},"image":{"@id":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/responsive-web-design-media-queries-css3\/#primaryimage"},"thumbnailUrl":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-content\/uploads\/2013\/04\/Fotolia_66587149_XS.jpg","datePublished":"2013-04-06T11:40:29+00:00","dateModified":"2017-02-24T11:40:44+00:00","author":{"@id":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/#\/schema\/person\/6bdfe0a1263b803645c69e3d5748dabe"},"description":"Tutoriel consacr\u00e9 \u00e0 l'explication des Responsive Web Design et des M\u00e9dia Queries du CSS3","breadcrumb":{"@id":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/responsive-web-design-media-queries-css3\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/bocciolesi.fr\/tutoriels-et-cours\/responsive-web-design-media-queries-css3\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/responsive-web-design-media-queries-css3\/#primaryimage","url":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-content\/uploads\/2013\/04\/Fotolia_66587149_XS.jpg","contentUrl":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-content\/uploads\/2013\/04\/Fotolia_66587149_XS.jpg","width":393,"height":306,"caption":"Responsive websites design for computers tablets and mobile phones concept icon vector illustration"},{"@type":"BreadcrumbList","@id":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/responsive-web-design-media-queries-css3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/"},{"@type":"ListItem","position":2,"name":"Responsive Web Design &#8211; Think Mobile First"}]},{"@type":"WebSite","@id":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/#website","url":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/","name":"Tutoriels et Cours","description":"Michel Bocciolesi | Formateur Consultant en Informatique","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/#\/schema\/person\/6bdfe0a1263b803645c69e3d5748dabe","name":"Michel BOCCIOLESI","description":"Michel Bocciolesi est consultant et formateur sp\u00e9cialis\u00e9 en Informatique.","sameAs":["https:\/\/www.mb-creation-web.fr"],"url":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/author\/michel\/"}]}},"_links":{"self":[{"href":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-json\/wp\/v2\/posts\/519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-json\/wp\/v2\/comments?post=519"}],"version-history":[{"count":27,"href":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-json\/wp\/v2\/posts\/519\/revisions"}],"predecessor-version":[{"id":1608,"href":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-json\/wp\/v2\/posts\/519\/revisions\/1608"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-json\/wp\/v2\/media\/1490"}],"wp:attachment":[{"href":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-json\/wp\/v2\/media?parent=519"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-json\/wp\/v2\/categories?post=519"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bocciolesi.fr\/tutoriels-et-cours\/wp-json\/wp\/v2\/tags?post=519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}