Responsive web design

Responsive web design is an approach that uses flexible layouts, media queries, and adaptable content to make websites work across different screen sizes and device capabilities.

CSS media queries: CSS rules that apply styles when device or viewport conditions match specified criteria. They let layouts switch or adjust at chosen viewport widths and other conditions.
Viewport (web): The visible area of a web page within a browser window or device screen. Responsive layouts commonly use viewport dimensions as the basis for adaptation.
Mobile-first design: A design strategy that begins with small-screen constraints and adds capabilities for larger screens. It provides a disciplined way to prioritize content before expanding a responsive layout.
World Wide Web Consortium: The international standards organization that develops recommendations for the World Wide Web. Its CSS standards provide the mechanisms that responsive design relies on.
Fixed-width web design: A web layout built around a fixed pixel width rather than adapting continuously to available space. Its rigid dimensions can require horizontal scrolling on screens narrower than the design.
Fluid grid: A layout system whose columns and spacing scale proportionally with available space. Proportional columns let page structure expand and contract without fixed-width breakpoints.
CSS pixels: The reference unit used by CSS, distinct from a device's physical pixels. CSS dimensions and breakpoints use a consistent coordinate system across pixel densities.
Responsive typography: Typography that adjusts its size, spacing, or measure to suit different viewport conditions. Text must remain readable and well-proportioned as responsive layouts change width.
Cascading Style Sheets: A stylesheet language used to describe the presentation of HTML and other structured documents. Responsive design grew from CSS's evolving ability to condition and vary presentation.
Separate mobile website: A distinct website or codebase created specifically for mobile devices alongside a desktop site. Responsive design usually adapts one site instead of maintaining a separate mobile version.

Linked from 14 pages