Sure! Here are some practical Media Query (MQ) examples in CSS to help you build responsive designs:

1. Simple Responsive Layout

/* Base styles (mobile first) */.container {  padding: 10px;  background-color: lightblue;}/* Tablets and larger (min-width: 600px) */@media (min-width: 600px) {  .container {    padding: 20px;    background-color: lightgreen;  }}/* Desktops and larger (min-width: 1024px) */@media (min-width: 1024px) {  .container {    padding: 40px;    background-color: lightcoral;  }}

2. Hide/Show Elements on Different Screens

/* Hide menu on desktop */.menu {  display: block;}@media (min-width: 1024px) {  .menu {    display: none;  }}/* Show desktop menu only on large screens */.desktop-menu {  display: none;}@media (min-width: 1024px) {  .desktop-menu {    display: block;  }}

3. Change Font Size Based on Viewport Width

p {  font-size: 14px;}@media (min-width: 768px) {  p {    font-size: 18px;  }}@media (min-width: 1200px) {  p {    font-size: 22px;  }}

4. Orientation-based Styles

/* Portrait */@media (orientation: portrait) {  body {    background-color: lightyellow;  }}/* Landscape */@media (orientation: landscape) {  body {    background-color: lightblue;  }}

5. High-Resolution (Retina) Displays

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {  .logo {    background-image: url('logo@2x.png');  }}

If you want, I can help you build a complete responsive page or explain how to combine multiple media queries for complex layouts!