CSS 30 💻 media queries introduction

a - media queries intro and types

    Media queries are a fundamental part of responsive web design
    They allow you to apply different styles for different screen sizes and device types
    They are defined using @media rule in  CSS
    media types: all → applies for all devices(default),
    print → styles for print preview mode screen → styles for screen devices
    in media rules you can also use logical operators → and, not, only and or
    @media screen and (min-width: 780px) → for screen and min width 780px
    @media print → media query for print version


b - media queries common descriptors

    width → Minimum and maximum width of the viewport. height → Minimum and maximum height of the viewport.
    aspect-ratio → Aspect ratio of the viewport. orientation → Orientation (portrait or landscape).
    device-width, device-height → Dimensions of the device screen. color → Number of bits per color component in the output device.
    color-index → Maximum number of colors that can be addressed on the output device.  monochrome → Number of shades of gray in the output device.
    resolution → Minimum and maximum resolution (dots per inch) of the output device.
    scan → Scan type (progressive or interlaced). hover → Whether hover capabilities are available.
    @media (orientation: landscape) → only for landscape orientation 
    @media (min-width: 768px) and (max-width: 1024px) → for width between 768px and 1024px
    @media not (hover: hover) → for non-touch devices


c - media queries best practices

    Mobile First → Start with the smallest screen and build up to larger ones
    Avoid Overusing Media Queries → Too many can slow down your site...
    ...Aim for a breakpoint every 50-70 pixels or so.
    Use Relative Units → Use relative units like em, rem, % instead of fixed units...
    ...like pixels to ensure consistency across different devices.
    Test Thoroughly → Test your designs on various devices and screen sizes to ensure they look good everywhere.
    Just remember that media queries are a powerful tool in CSS...
    for creating responsive web design

---

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!