{"id":3532,"date":"2014-04-06T15:54:20","date_gmt":"2014-04-06T20:54:20","guid":{"rendered":"http:\/\/www.lonhosford.com\/lonblog\/?p=3532"},"modified":"2015-07-31T18:25:48","modified_gmt":"2015-07-31T23:25:48","slug":"css-media-queries-mobile-first-responsive-design-external-css-files","status":"publish","type":"post","link":"https:\/\/www.lonhosford.com\/lonblog\/2014\/04\/06\/css-media-queries-mobile-first-responsive-design-external-css-files\/","title":{"rendered":"Mobile First Responsive Design  with Media Queries External CSS Files"},"content":{"rendered":"<div id=\"fb-root\"><\/div>\n<p><script src=\"https:\/\/connect.facebook.net\/en_US\/all.js#appId=105467682877384&amp;xfbml=1\"><\/script><fb:like href=\"https:\/\/www.lonhosford.com\/lonblog\/2014\/04\/06\/css-media-queries-mobile-first-responsive-design-external-css-files\/\" send=\"true\" width=\"450\" show_faces=\"true\" font=\"\"><\/fb:like><!-- Place this tag where you want the +1 button to render --><g:plusone annotation=\"inline\"><\/g:plusone><br \/>\n<strong><a href=\"https:\/\/www.lonhosford.com\/lonblog\/2014\/03\/30\/mobile-first-responsive-design-css-media-selector\/\">Previous<\/a> | Part 4 of 5 | <a href=\"https:\/\/www.lonhosford.com\/lonblog\/2014\/05\/04\/mobile-first-responsive-design-layout-and-flexible-image-tutorial\/\">Next<\/a><\/strong> <\/p>\n<p>By Lon Hosford<br \/>\nYou have a plethora of configuration approaches with using CSS Media Queries in creating a mobile first design.<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.lonhosford.com\/lonblog\/wp-content\/uploads\/2014\/04\/05_integrate_css_file_detection_900x544-300x181.png\" alt=\"log image for CSS Media Query 101 Mobile First Tutorial CSS Media Queries Mobile First Responsive Design External CSS Files\" width=\"300\" height=\"181\"  class=\"alignleft size-medium wp-image-3533\" srcset=\"https:\/\/www.lonhosford.com\/lonblog\/wp-content\/uploads\/2014\/04\/05_integrate_css_file_detection_900x544-300x181.png 300w, https:\/\/www.lonhosford.com\/lonblog\/wp-content\/uploads\/2014\/04\/05_integrate_css_file_detection_900x544.png 900w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/> The previous tutorials we places all the CSS into the HTML document. That was fine for a learning activity. You know that we need to use external CSS files. That means using the HTML <code>link<\/code> element in the document <code>head<\/code> section.<\/p>\n<p>The <code>@media<\/code> CSS selector is just plain CSS so we can use it in an external CSS file. So all the CSS we had in the document <code>style<\/code> element can be put into a CSS file and it works the same. <\/p>\n<p><a href=\"http:\/\/click.linksynergy.com\/fs-bin\/click?id=A1q8CHNXgAc&#038;offerid=323057.40&#038;type=3&#038;subid=0\" >Save 20% on Publish Your Flappy Bird Clone iPhone Game, EZ &#038; No Coding!<\/a><IMG border=0 width=1 height=1 src=\"https:\/\/ad.linksynergy.com\/fs-bin\/show?id=A1q8CHNXgAc&#038;bids=323057.40&#038;type=3&#038;subid=0\" ><\/p>\n<p>Our CSS length was short and tailor for quick absorption in a learning activity. You can count on the CSS lines growing quickly as you start to include your design styling not only for one layout but possibly for multiple screen layouts. The CSS file can get pretty long. So you can consider an approach to break the CSS into separate files for each minimum screen width. Then you can just put the media query CSS in each file. This approach also works.<\/p>\n<p>[ad name=&#8221;Google Adsense&#8221;]<\/p>\n<p>Then consider that the <code>link<\/code> element has the <code>media<\/code> attribute that uses the same media query syntax as the <code>@media<\/code> CSS selector. That allows you attach a CSS file only when the media query is true. It also negates the need for the media selector in the file. Essentially you are saying all the CSS in a file is for a specific group of screen widths starting at a certain minimum and expanding until another media query takes over any selectors and properties.<\/p>\n<p>In this post we are taking the last example and breaking it up this way. One file for the base css and one file for each target minimum screen width. <\/p>\n<p><strong>Configuration Approaches and Refactoring Demonstration<\/strong><\/p>\n<p>This video covers the CSS Mobile First Responsive Design Configuration Approaches. It also demonstrates the refactoring of the last tutorial&#8217;s files into external files for the base and each target minimum screen width.<\/p>\n<p>[iframe https:\/\/www.youtube.com\/embed\/4OUWvKYpLw8 640 360]<br \/>\n[ad name=&#8221;Pearson Web Dev Books&#8221;]<br \/>\nSource Files for the video series: <a href=\"http:\/\/bit.ly\/P8RpJV\" target=\"_blank\" title=\"Source File Download Link\">Download<\/a><\/p>\n<p><strong>The <code>link<\/code> Element <code>media<\/code> Attribute<\/strong><\/p>\n<p>These are the link elements for each separate CSS file we plan to use. <\/p>\n<ul>\n<li>base.css<\/li>\n<li>screen-min-320.css<\/li>\n<li>screen-min-768.css<\/li>\n<li>screen-min-1024.css<\/li>\n<\/ul>\n<p>The <code>@media<\/code> selector media query syntax is becomes the <code>media<\/code> attribute&#8217;s value. Then you order the files starting with the base followed by the CSS file for the smallest design width. The you progressively add the CSS files for each next minimum width target.<\/p>\n<pre class=\"brush: php; collapse: false; first-line: 6; html-script: true; title: ; notranslate\" title=\"\">\r\n&lt;title&gt;CSS Mobile Media Queries 101 | Lon Hosford&lt;\/title&gt;\r\n&lt;!-- Base css --&gt;\r\n&lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot;href=&quot;base.css&quot; \/&gt;\r\n&lt;!-- True if greater than or equal to 320px --&gt;\r\n&lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; media=&quot;only screen and (min-width: 320px)&quot; href=&quot;screen-min-320.css&quot; \/&gt;\r\n&lt;!-- True if greater than or equal to 768px --&gt;\r\n&lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; media=&quot;only screen and (min-width: 768px)&quot; href=&quot;screen-min-768.css&quot; \/&gt;\r\n&lt;!-- True if greater than or equal to 1024px --&gt;\r\n&lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; media=&quot;only screen and (min-width: 1024px)&quot; href=&quot;screen-min-1024.css&quot; \/&gt;\r\n&lt;\/head&gt;\r\n<\/pre>\n<p><a href=\"http:\/\/click.linksynergy.com\/fs-bin\/click?id=A1q8CHNXgAc&#038;offerid=323057.34&#038;type=3&#038;subid=0\" >Save 20% on Master Your iPhone and Be 10X More Productive!<\/a><IMG border=0 width=1 height=1 src=\"https:\/\/ad.linksynergy.com\/fs-bin\/show?id=A1q8CHNXgAc&#038;bids=323057.34&#038;type=3&#038;subid=0\" ><\/p>\n<p>Each of the CSS files could contain the <code>@media<\/code> selector. If that was the case, then you do not need the <code>link<\/code> element <code>media<\/code> attribute. <\/p>\n<p>A drawback is that we have increased number of network HTTP requests. Bandwidth performance is impacted by many items. Files do lend themselves to caching. So you need to perform your own bandwidth analysis to see if using multiple CSS files has any significant impact on your performance.<\/p>\n<p>A happy medium might be one CSS file for the base and one for handling screen width detection.<\/p>\n<ul>\n<li>base.css<\/li>\n<li>screen.css<\/li>\n<\/ul>\n<p>In that case you would include the <code>@media<\/code> selectors in the screen.css file.<\/p>\n<p style=\"text-align:center\">\n<a target='new' href=\"http:\/\/click.linksynergy.com\/link?id=A1q8CHNXgAc&#038;offerid=323057.21530&#038;type=2&#038;murl=https%3A%2F%2Fwww.udemy.com%2Fhow-to-make-real-money-with-google-adsense-tips-techniques%2F\"><IMG border=0 src=\"https:\/\/udemyimages-a.akamaihd.net\/course\/480x270\/21530_964c_3.jpg\" ><\/a><IMG border=0 width=1 height=1 src=\"https:\/\/ad.linksynergy.com\/fs-bin\/show?id=A1q8CHNXgAc&#038;bids=323057.21530&#038;type=2&#038;subid=0\" >\n<\/p>\n<p>Complete <code>practice.html<\/code> File<\/p>\n<pre class=\"brush: php; collapse: true; highlight: [7,8,9,10,11,12,13,14]; html-script: true; light: false; title: ; toolbar: true; notranslate\" title=\"\">\r\n&lt;!doctype html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;meta charset=&quot;UTF-8&quot;&gt;\r\n&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;\r\n&lt;title&gt;CSS Mobile Media Queries 101 | Lon Hosford&lt;\/title&gt;\r\n&lt;!-- Base css --&gt;\r\n&lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot;href=&quot;base.css&quot; \/&gt;\r\n&lt;!-- True if greater than or equal to 320px --&gt;\r\n&lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; media=&quot;only screen and (min-width: 320px)&quot; href=&quot;screen-min-320.css&quot; \/&gt;\r\n&lt;!-- True if greater than or equal to 768px --&gt;\r\n&lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; media=&quot;only screen and (min-width: 768px)&quot; href=&quot;screen-min-768.css&quot; \/&gt;\r\n&lt;!-- True if greater than or equal to 1024px --&gt;\r\n&lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; media=&quot;only screen and (min-width: 1024px)&quot; href=&quot;screen-min-1024.css&quot; \/&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\t&lt;header&gt;\r\n\t\t&lt;h1&gt;Scriptum Titulus&lt;\/h1&gt;\t\r\n\t&lt;\/header&gt;\r\n\t&lt;section&gt;\r\n\t\t&lt;h2&gt;Pagina Titulus&lt;\/h2&gt;\r\n\t\t&lt;p&gt;Sed consequat feugiat dictum. Aliquam fermentum sodales lectus in aliquam. Duis venenatis augue quis eros egestas fringilla. In consectetur eleifend hendrerit. Praesent quis interdum ligula. Nulla et aliquam lorem, ut ultricies elit. Nulla blandit nunc orci, ac ultricies nisi ultricies sit amet. Suspendisse nec metus est. Donec sem diam, cursus nec enim et, interdum tristique quam. Aliquam et dolor arcu.&lt;\/p&gt;\r\n\t\t&lt;p&gt;Donec vel libero enim. In porta at mauris a mattis. Sed rhoncus dolor ut purus feugiat lobortis. Proin vel tellus consequat, mattis diam eu, egestas lacus. Morbi dictum justo ac erat condimentum venenatis. Nunc augue dolor, aliquet id ligula in, rhoncus sollicitudin elit. Phasellus rhoncus laoreet elit, ac aliquet risus tincidunt eu. Suspendisse vitae ligula commodo, tristique justo consectetur, congue justo. In semper sed quam eget rutrum.&lt;\/p&gt;\t\r\n\t&lt;\/section&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><strong>The CSS File Code<\/strong><\/p>\n<p>base.css<\/p>\n<pre class=\"brush: css; collapse: true; first-line: 1; light: false; title: ; toolbar: true; notranslate\" title=\"\">\r\n\/* Base CSS *\/\r\nheader, section{ display: block; } \r\n\/* All elements *\/\r\n* {\r\n\tcolor:#FFF;\r\n\tmargin:0;\r\n\tpadding:0;\r\n}\r\nbody { \r\n\tbackground:#575757;\r\n\tfont-family:Helvetica, Arial, sans-serif;\r\n}\r\nheader h1 {\r\n\tbackground:rgba(0,0,0,.7);\r\n\tfont-size:.8em;\r\n\theight: 3em;\r\n\tline-height:3em;\r\n\tpadding:0 .5em;\r\n}\r\nsection {\r\n\tmargin:0 0 1em 0;\r\n\tpadding:.6em;\r\n}\r\nsection h2{\r\n\tfont-size:.7em;\r\n\tpadding-bottom:1em;\r\n}\r\nsection p{\r\n\tfont-size:.6em;\r\n\tpadding-bottom:1em;\r\n}\r\n<\/pre>\n<p><a href=\"http:\/\/click.linksynergy.com\/fs-bin\/click?id=A1q8CHNXgAc&#038;offerid=323057.37&#038;type=3&#038;subid=0\" >Save 20% on iPhone Camera Essentials!<\/a><IMG border=0 width=1 height=1 src=\"https:\/\/ad.linksynergy.com\/fs-bin\/show?id=A1q8CHNXgAc&#038;bids=323057.37&#038;type=3&#038;subid=0\" ><\/p>\n<p>screen-min-320.css<\/p>\n<pre class=\"brush: css; collapse: true; first-line: 1; light: false; title: ; toolbar: true; notranslate\" title=\"\">\r\n\/* Smallest Screen Size Design Target *\/\r\n\/* Example: iPhone portrait *\/\r\n\/* True if width greater than or equal to 320px *\/\r\nbody {background:#B26BB2;}\r\nheader h1 {\r\n\tfont-size:1.6em;\t\r\n\theight:2.8em;\r\n\tline-height:2.8em;\t\r\n}\r\nsection {\r\n\tpadding:.9em;\r\n}\r\nsection h2{\r\n\tcolor:#000;\r\n\tfont-size:1em;\r\n}\r\nsection p{\r\n\tcolor:#000;\r\n\tfont-size:.9em;\r\n}\r\n<\/pre>\n<p>screen-min-768.css<\/p>\n<pre class=\"brush: css; collapse: true; first-line: 1; light: false; title: ; toolbar: true; notranslate\" title=\"\">\r\n\/* Example: iPad portrait *\/\r\n\/* True if width greater than or equal to 768px *\/\r\nbody {background:#33CCCC;}\r\nheader h1 {\r\n\tfont-size:1.8em;\t\r\n\theight:3em;\r\n\tline-height:3em;\t\r\n}\r\nsection h2{\r\n\tfont-size:1.5em;\r\n}\r\nsection p{\r\n\tfont-size:1.3em;\r\n}\r\n<\/pre>\n<p>screen-min-1024.css<\/p>\n<pre class=\"brush: css; collapse: true; first-line: 1; light: false; title: ; toolbar: true; notranslate\" title=\"\">\r\n\/* Examples: iPad landscape, Laptops and Desktops *\/\r\n\/* True if width greater than or equal to 1024px *\/\r\nbody {background:#FF0066;}\r\nheader h1 {\r\n\tfont-size:2em;\t\r\n\theight:3.2em;\r\n\tline-height:3.2em;\t\r\n}\r\nsection {\r\n\tmax-width:1200px;\r\n\tpadding:.9em;\r\n}\r\n<\/pre>\n<p>[ad name=&#8221;Google Adsense&#8221;]<\/p>\n<p><g:plusone annotation=\"inline\"><\/g:plusone><\/p>\n<div id=\"fb-root\"><\/div>\n<p><script src=\"https:\/\/connect.facebook.net\/en_US\/all.js#appId=105467682877384&amp;xfbml=1\"><\/script><fb:like href=\"https:\/\/www.lonhosford.com\/lonblog\/\/2014\/04\/06\/css-media-queries-mobile-first-responsive-design-external-css-files\/\" send=\"true\" width=\"450\" show_faces=\"true\" font=\"\"><\/fb:like><\/p>\n<div id=\"fb-root\"><\/div>\n<p><script src=\"https:\/\/connect.facebook.net\/en_US\/all.js#xfbml=1\"><\/script><fb:comments href=\"https:\/\/www.lonhosford.com\/lonblog\/\/2014\/04\/06\/css-media-queries-mobile-first-responsive-design-external-css-files\/\" num_posts=\"3\" width=\"500\"><\/fb:comments><br \/>\n<!-- Place this render call where appropriate --><br \/>\n<script type=\"text\/javascript\">\n  (function() {\n    var po = document.createElement('script'); po.type = 'text\/javascript'; po.async = true;\n    po.src = 'https:\/\/apis.google.com\/js\/plusone.js';\n    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);\n  })();\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Previous | Part 4 of 5 | Next By Lon Hosford You have a plethora of configuration approaches with using CSS Media Queries in creating a mobile first design. The previous tutorials we places all the CSS into the HTML document. That was fine for a learning activity. You know that we need to use [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,118],"tags":[119,120,121],"class_list":["post-3532","post","type-post","status-publish","format-standard","hentry","category-general","category-tutorial","tag-css","tag-media-queries","tag-responsive-design"],"_links":{"self":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts\/3532","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/comments?post=3532"}],"version-history":[{"count":34,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts\/3532\/revisions"}],"predecessor-version":[{"id":3647,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts\/3532\/revisions\/3647"}],"wp:attachment":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/media?parent=3532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/categories?post=3532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/tags?post=3532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}