{"id":2660,"date":"2015-05-16T07:32:25","date_gmt":"2015-05-16T07:32:25","guid":{"rendered":"http:\/\/www.vishmax.com\/en\/?p=2660"},"modified":"2015-05-25T06:19:16","modified_gmt":"2015-05-25T06:19:16","slug":"media-queries-with-skeleton-framework","status":"publish","type":"post","link":"https:\/\/www.vishmax.com\/en\/labs\/media-queries-with-skeleton-framework\/","title":{"rendered":"CSS media queries with skeleton framework"},"content":{"rendered":"<p>Cascading Style Sheets (CSS) are one of the important part of web design, without a proper Cascading Style Sheets the website will not become user friendly.  In modern design (hand coding and table less) CSS can be used  to perform variety of tasks including animation.<\/p>\n<p>When Css2 was introduced web developers have the option for specific media types like screen or print and now with Css3 web developers are able to target specific screen sizes using \u2018<strong>Media Queries<\/strong>\u2019. <\/p>\n<p><strong>Media Queries<\/strong> are some kind of filters which can be applied to Cascading Style Sheets (CSS), with this we can make a website responsive for many devices like smart phone, tablet, desktop monitor etc.<\/p>\n<p>In this post we will share almost standard devices and browsers size and simple skeleton which the developer can use as a frame work in their web projects. <\/p>\n<pre lang=\"css\">\r\n\r\n\/* ---------------------------------------------------------------------- *\/\r\n\/*\tMedia Queries skeleton framework - Vishmax.com\r\n\/* ---------------------------------------------------------------------- *\/\r\n\r\n\t\/* Smaller than standard 960 (devices and browsers) *\/\r\n\t@media only screen and (max-width: 959px) {\r\n\r\n\t}\r\n\t\r\n\t\/* Tablet Portrait size to standard 960 (devices and browsers) *\/\r\n\t@media only screen and (min-width: 768px) and (max-width: 959px) {\r\n\r\n\t}\r\n\t\r\n\t\/* All Mobile Sizes (devices and browser) *\/\r\n\t@media only screen and (max-width: 767px) {\r\n\r\n\t}\r\n\t\r\n\t\/* Mobile Landscape Size to Tablet Portrait (devices and browsers) *\/\r\n\t@media only screen and (min-width: 480px) and (max-width: 767px) {\r\n\r\n\t}\r\n\t\r\n\t\/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) *\/\r\n\t@media only screen and (max-width: 479px) {\r\n\t}\r\n\r\n\t\/* Smartphones (portrait and landscape) ----------- *\/\r\n\t@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {\r\n\r\n\t}\r\n\r\n\t\/* iPhone 4 ----------- *\/\r\n\t@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {\r\n\r\n\t}\r\n\t\r\n\t@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {\r\n\r\n\t}\r\n\t\r\n\t\/* iPhone 5 ----------- *\/\r\n\t@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){\r\n\t}\r\n\t\r\n\t@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){\r\n\t}\r\n\t\r\n\t\/* iPhone 6 ----------- *\/\r\n\t@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){\r\n\r\n\t}\r\n\t\r\n\t@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){\r\n\r\n\t}\r\n\t\r\n\t\/* iPhone 6+ ----------- *\/\r\n\t@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){\r\n\r\n\t}\r\n\t\r\n\t@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){\r\n\r\n\t}\r\n\t\r\n\t\/* Samsung Galaxy S3 ----------- *\/\r\n\t@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){\r\n\r\n\t}\r\n\r\n\t@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){\r\n\r\n\t}\r\n\t\r\n\t\/* Samsung Galaxy S4 ----------- *\/\r\n\t@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){\r\n\r\n\t}\r\n\t\r\n\t@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){\r\n\r\n\t}\r\n\t\r\n\t\/* Samsung Galaxy S5 ----------- *\/\r\n\t@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){\r\n\r\n\t}\r\n\t\r\n\t@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){\r\n\r\n\t}\r\n\r\n\r\n\r\n\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Cascading Style Sheets (CSS) are one of the important part of web design, without a proper Cascading Style Sheets the website will not become user friendly. In modern design (hand coding and table less) CSS can be used to perform variety of tasks including animation. When Css2 was introduced web developers have the option for [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2662,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[44],"tags":[67,94],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.2.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS media queries with skeleton framework - Vishmax.com<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vishmax.com\/en\/labs\/media-queries-with-skeleton-framework\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS media queries with skeleton framework - Vishmax.com\" \/>\n<meta property=\"og:description\" content=\"Cascading Style Sheets (CSS) are one of the important part of web design, without a proper Cascading Style Sheets the website will not become user friendly. In modern design (hand coding and table less) CSS can be used to perform variety of tasks including animation. When Css2 was introduced web developers have the option for [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vishmax.com\/en\/labs\/media-queries-with-skeleton-framework\/\" \/>\n<meta property=\"og:site_name\" content=\"Vishmax.com\" \/>\n<meta property=\"article:published_time\" content=\"2015-05-16T07:32:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-05-25T06:19:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2015\/05\/media-queries-400x230.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"400\" \/>\n\t<meta property=\"og:image:height\" content=\"230\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/media-queries-with-skeleton-framework\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/media-queries-with-skeleton-framework\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93\"},\"headline\":\"CSS media queries with skeleton framework\",\"datePublished\":\"2015-05-16T07:32:25+00:00\",\"dateModified\":\"2015-05-25T06:19:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/media-queries-with-skeleton-framework\/\"},\"wordCount\":146,\"publisher\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#organization\"},\"keywords\":[\"CSS\",\"Web Design Tips\"],\"articleSection\":[\"Labs\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/media-queries-with-skeleton-framework\/\",\"url\":\"https:\/\/www.vishmax.com\/en\/labs\/media-queries-with-skeleton-framework\/\",\"name\":\"CSS media queries with skeleton framework - Vishmax.com\",\"isPartOf\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#website\"},\"datePublished\":\"2015-05-16T07:32:25+00:00\",\"dateModified\":\"2015-05-25T06:19:16+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/media-queries-with-skeleton-framework\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vishmax.com\/en\/labs\/media-queries-with-skeleton-framework\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/media-queries-with-skeleton-framework\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/www.vishmax.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS media queries with skeleton framework\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#website\",\"url\":\"http:\/\/www.vishmax.com\/en\/\",\"name\":\"Vishmax.com\",\"description\":\"Software Company in Calicut for Web Design and eCommerce\",\"publisher\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/www.vishmax.com\/en\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#organization\",\"name\":\"Vishmax.com\",\"url\":\"http:\/\/www.vishmax.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png\",\"contentUrl\":\"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png\",\"width\":150,\"height\":50,\"caption\":\"Vishmax.com\"},\"image\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g\",\"caption\":\"admin\"},\"url\":\"https:\/\/www.vishmax.com\/en\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS media queries with skeleton framework - Vishmax.com","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:\/\/www.vishmax.com\/en\/labs\/media-queries-with-skeleton-framework\/","og_locale":"en_US","og_type":"article","og_title":"CSS media queries with skeleton framework - Vishmax.com","og_description":"Cascading Style Sheets (CSS) are one of the important part of web design, without a proper Cascading Style Sheets the website will not become user friendly. In modern design (hand coding and table less) CSS can be used to perform variety of tasks including animation. When Css2 was introduced web developers have the option for [&hellip;]","og_url":"https:\/\/www.vishmax.com\/en\/labs\/media-queries-with-skeleton-framework\/","og_site_name":"Vishmax.com","article_published_time":"2015-05-16T07:32:25+00:00","article_modified_time":"2015-05-25T06:19:16+00:00","og_image":[{"width":400,"height":230,"url":"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2015\/05\/media-queries-400x230.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.vishmax.com\/en\/labs\/media-queries-with-skeleton-framework\/#article","isPartOf":{"@id":"https:\/\/www.vishmax.com\/en\/labs\/media-queries-with-skeleton-framework\/"},"author":{"name":"admin","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93"},"headline":"CSS media queries with skeleton framework","datePublished":"2015-05-16T07:32:25+00:00","dateModified":"2015-05-25T06:19:16+00:00","mainEntityOfPage":{"@id":"https:\/\/www.vishmax.com\/en\/labs\/media-queries-with-skeleton-framework\/"},"wordCount":146,"publisher":{"@id":"http:\/\/www.vishmax.com\/en\/#organization"},"keywords":["CSS","Web Design Tips"],"articleSection":["Labs"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.vishmax.com\/en\/labs\/media-queries-with-skeleton-framework\/","url":"https:\/\/www.vishmax.com\/en\/labs\/media-queries-with-skeleton-framework\/","name":"CSS media queries with skeleton framework - Vishmax.com","isPartOf":{"@id":"http:\/\/www.vishmax.com\/en\/#website"},"datePublished":"2015-05-16T07:32:25+00:00","dateModified":"2015-05-25T06:19:16+00:00","breadcrumb":{"@id":"https:\/\/www.vishmax.com\/en\/labs\/media-queries-with-skeleton-framework\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vishmax.com\/en\/labs\/media-queries-with-skeleton-framework\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vishmax.com\/en\/labs\/media-queries-with-skeleton-framework\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/www.vishmax.com\/en\/"},{"@type":"ListItem","position":2,"name":"CSS media queries with skeleton framework"}]},{"@type":"WebSite","@id":"http:\/\/www.vishmax.com\/en\/#website","url":"http:\/\/www.vishmax.com\/en\/","name":"Vishmax.com","description":"Software Company in Calicut for Web Design and eCommerce","publisher":{"@id":"http:\/\/www.vishmax.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/www.vishmax.com\/en\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/www.vishmax.com\/en\/#organization","name":"Vishmax.com","url":"http:\/\/www.vishmax.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png","contentUrl":"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png","width":150,"height":50,"caption":"Vishmax.com"},"image":{"@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g","caption":"admin"},"url":"https:\/\/www.vishmax.com\/en\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts\/2660"}],"collection":[{"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/comments?post=2660"}],"version-history":[{"count":0,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts\/2660\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/media\/2662"}],"wp:attachment":[{"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/media?parent=2660"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/categories?post=2660"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/tags?post=2660"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}