{"flag":true,"single":true,"pageTitle":"Media query rule","post":{"id":184,"user_id":"1","slug":"media-query-rule-hhls","title":"Media query rule","body":"<p>Apply on less than 576px wide<\/p>\r\n<pre class=\"language-markup\"><code>@media (max-width: 576px) {\r\n    body{\r\n       color:red;\r\n    }\r\n}\r\n\r\n\r\n\r\n@media (max-width: 390px) {\r\n\t\/**css**\/\r\n}\r\n@media (max-width: 576px) {\r\n\t\/**css**\/\r\n}\r\n@media (max-width: 768px) {\r\n\t\/**css**\/\r\n}\r\n@media (max-width: 992px) {\r\n\t\/**css**\/\r\n}\r\n@media (max-width: 1024px) {\r\n\t\/**css**\/\r\n}\r\n@media (max-width: 1200px) {\r\n\t\/**css**\/\r\n}\r\n@media (max-width: 1280px) {\r\n\t\/**css**\/\r\n}<\/code><\/pre>\r\n<p>&nbsp;Large 600px and up<\/p>\r\n<pre class=\"language-markup\"><code>\/* Small devices (portrait tablets and large phones, 600px and up) *\/\r\n@media only screen and (min-width: 600px) {...}\r\n\r\n\/* Medium devices (landscape tablets, 768px and up) *\/\r\n@media only screen and (min-width: 768px) {...}\r\n\r\n\/* Large devices (laptops\/desktops, 992px and up) *\/\r\n@media only screen and (min-width: 992px) {...}\r\n\r\n\/* Extra large devices (large laptops and desktops, 1200px and up) *\/\r\n@media only screen and (min-width: 1200px) {...}<\/code><\/pre>","category_id":"10","is_private":"0","created_at":"2023-09-12T23:23:38.000000Z","updated_at":"2023-09-12T23:23:38.000000Z","category":{"id":10,"user_id":"1","name":"CSS","slug":"css-a43c","parent_id":null,"created_at":"2023-03-21T01:17:14.000000Z","updated_at":"2023-03-21T01:17:14.000000Z"},"user":{"id":1,"name":"R GONDAL","email":"rizikmw@gmail.com","email_verified_at":null,"two_factor_confirmed_at":null,"current_team_id":"1","profile_photo_path":null,"created_at":"2023-03-12T10:49:33.000000Z","updated_at":"2025-01-10T12:59:00.000000Z","profile_photo_url":"https:\/\/ui-avatars.com\/api\/?name=R+G&color=7F9CF5&background=EBF4FF"}},"pageDesc":"Apply on less than 576px wide @media (max-width: 576px) {     body{        color:red;     } }    @media (max-width: 390px) { \t\/**css**\/ } @m - Media query rule (Updated: September 12, 2023) - Read more about Media query rule at my programming site [SITE]","categories":[]}