{"id":1267,"date":"2014-08-20T20:41:09","date_gmt":"2014-08-20T20:41:09","guid":{"rendered":"https:\/\/ibex.tech\/cloud\/?p=1267"},"modified":"2024-01-05T15:21:34","modified_gmt":"2024-01-05T15:21:34","slug":"screen-resolution","status":"publish","type":"post","link":"https:\/\/ibex.tech\/cloud\/css\/responsive-css\/screen-resolution","title":{"rendered":"Screen Resolution"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\">Rules based on screen resolution<\/h4>\n\n\n\n<p>2 possibilities:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media only screen and (min-width: 801px) {\n  \/* When width is greater than or equal to 801px *\/\n\t.my_class {\n\t\theight: 360px;\n\t}\n}\n\n@media only screen and (max-width: 800px) {\n  \/* When width is less than or equal to 800px *\/\n\t.my_class {\n\t\theight: 240px;\n\t}\n}<\/code><\/pre>\n\n\n\n<p>3 or more possibilities:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media only screen and (min-width: 1101px) {\n\t.my_class {\n\t\tcolumn-count: 3;\n\t}\n}\n\n@media only screen and (min-width: 801px) and (max-width: 1100px) {\n\t.my_class {\n\t\tcolumn-count: 2;\n\t}\n}\n\n@media only screen and (max-width: 800px) {\n\t.my_class {\n\t\tcolumn-count: 1;\n\t}\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Max-Width vs Max-Device-Width<\/h4>\n\n\n\n<p>max-width<\/p>\n\n\n\n<p>The width of the target display area, e.g. the browser.<\/p>\n\n\n\n<p>When you change the size of the browser on your desktop, the CSS will change,<\/p>\n\n\n\n<p>max-device-width<\/p>\n\n\n\n<p>The width of the device&#8217;s entire rendering area, i.e. the actual device screen.<\/p>\n\n\n\n<p>when you change the size of the browser window on your desktop, the CSS won&#8217;t change.<\/p>\n\n\n\n<p><br>Which one to use<\/p>\n\n\n\n<p>Using max-device-width rather than max-width is useful when you need to keep something consistent even when browser window has been re-sized. For example, UI controls that you don&#8217;t want to switch to different&nbsp;sized images when re-sizing the screen<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Detecting different screen types<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style type=\"text\/css\"&gt;\n    \/* default styles here for older browsers. \n       You can go for a 600px - 960px width max but using percentages\n    *\/\n    @media only screen and (min-width:960px){\n        \/*Styles for browsers larger than 960px;*\/\n    }\n    @media only screen and (min-width:1440px){\n        \/*Styles for browsers larger than 1440px;*\/\n    }\n    @media only screen and (min-width:2000px){\n        \/*For sumo sized screens*\/\n    }\n    @media only screen and (max-device-width:480px){\n       \/*Styles for mobile browsers smaller than 480px; (iPhone)*\/\n    }\n    @media only screen and (device-width:768px){\n       \/*Default iPad screens*\/\n    }\n    \/* different techniques for iPad screening *\/\n    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {\n      \/*For portrait layouts only*\/\n    }\n\n    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {\n      \/*For landscape layouts only*\/\n    }\n&lt;\/style&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Rules based on screen resolution 2 possibilities: 3 or more possibilities: Max-Width vs Max-Device-Width max-width The width of the target display area, e.g. the browser. When you change the size of the browser on your desktop, the CSS will change, max-device-width The width of the device&#8217;s entire rendering area, i.e. the actual device screen. when [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[127],"tags":[],"class_list":["post-1267","post","type-post","status-publish","format-standard","hentry","category-responsive-css"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/1267","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/comments?post=1267"}],"version-history":[{"count":8,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/1267\/revisions"}],"predecessor-version":[{"id":4576,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/1267\/revisions\/4576"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/media?parent=1267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/categories?post=1267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/tags?post=1267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}