{"id":1642,"date":"2023-10-29T21:40:58","date_gmt":"2023-10-29T21:40:58","guid":{"rendered":"https:\/\/appliedartand.design\/lj\/?p=1642"},"modified":"2023-10-29T21:40:58","modified_gmt":"2023-10-29T21:40:58","slug":"responsive-web-design-media-query","status":"publish","type":"post","link":"https:\/\/appliedartand.design\/lj\/2023\/10\/29\/responsive-web-design-media-query\/","title":{"rendered":"Responsive Web Design\u00a0 & Media Query"},"content":{"rendered":"\n

What is a Media Query?<\/h2>\n\n\n\n

Media query is a CSS technique introduced in CSS3.<\/p>\n\n\n\n

It uses the\u00a0@media<\/code>\u00a0rule to include a block of CSS properties only if a certain condition is true.<\/p>\n\n\n\n\n\n\n\n

Always Design for Mobile First<\/h2>\n\n\n\n

Mobile First means designing for mobile before designing for desktop or any other device (This will make the page display faster on smaller devices).<\/p>\n\n\n\n

This means that we must make some changes in our CSS.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Adding Break Points<\/h2>\n\n\n\n

\u00a0We can add a breakpoint where certain parts of the design will behave differently on each side of the breakpoint.<\/p>\n\n\n\n

Example:
@media only screen and (max-width: 600px)\u00a0{
\u00a0 body\u00a0{
\u00a0\u00a0\u00a0 background-color:\u00a0lightblue;
\u00a0\u00a0}
}<\/p>\n\n\n\n

\n

Learn more:<\/p>\n\n\n\n