Frontend · interactive
Responsive design
One page, every screen. Start with the phone layout, then add min-width media queries that rearrange things as space allows. Images come in several sizes so each device downloads only what it can show. Drag the viewport width.
Lamp 1
Lamp 2
Lamp 3
Lamp 4
Lamp 5
Lamp 6
700px wide · 2 columns · nav: menu button · image needs 700px → srcset picks lamp-800.jpg
At 700px: sm rules apply. Each product image shows about 350 CSS pixels wide; at 2× density it needs 700 real pixels, so the browser downloads the 800px version.
Screen density
1 2 3 Offer several widths; the browser picks by layout width and pixel density. Phones stop downloading desktop images.
<img srcset="lamp-400.jpg 400w, lamp-800.jpg 800w" sizes="…">
4
In production
Tools and technologies
Responsive layout is the default for the web.
Not tied to one language — use these names when you search docs or design a system.