In CSS, responsiveness is achieved using the @media rule, which applies styles based on device characteristics like width, height, or orientation. This ensures web pages look good on various screen sizes, from mobile phones to desktop monitors. For example, @media can adjust layouts for smaller screens by changing font sizes or stacking elements vertically:

/* Default styles */
body {
    font-size: 16px;
    display: flex;
    flex-direction: row;
}

/* Styles for screens smaller than 750px (like tablets and phones) */
@media(max-width: 750px) {
    body {
        font-size: 14px;
        flex-direction: column;
    }
}