响应式Web设计：HTML5和CSS3实战（第2版） ([英] Ben Frain [[英] Ben Frain])（Z-Library）

【One-Line Pitch】 A practical, code-first guide to building websites that adapt gracefully across phones, tablets, and desktops using modern HTML5 markup and CSS3 layout, media, and graphics features. Best for front-end developers and designers who already know basic HTML/CSS and want a hands-on path from fluid grids to Flexbox, responsive images, and SVG. 【Book Arc】 - **Opening (~0%–6%)**: Sets up the core problem—ever-widening gaps between browsers and devices—and frames responsive web design as a client-side HTML5/CSS3 solution, then walks through viewport meta tags and the first media-query example. - **Early (~6%–31%)**: Builds the responsive toolkit: media query syntax, breakpoint strategy, converting fixed pixel layouts to proportional sizes, and the limits of floats/tables before introducing Flexbox and responsive images (`srcset`, `sizes`, `picture`). - **Early–Middle (~31%–44%)**: Shifts to HTML5 semantics—looser syntax, `<figure>`/`<figcaption>`, `<details>`/`<summary>`, redefined inline elements, and native video/audio embedding. - **Middle (~44%–63%)**: Dives into CSS3 power features: new selectors and pseudo-classes, custom properties, `calc()`, web typography via `@font-face`, color formats, shadows, gradients, filters, and multiple backgrounds. - **Late (~63% onward)**: Turns to SVG as a resolution-independent graphics technology—root attributes, `viewBox`, and embedding methods—positioning it as central to scalable responsive visuals. 【Key Takeaways】 - **Responsive design is a client-side discipline** (Opening): The book argues you can adapt layout and function to screen size, input method, and device capability without server-side solutions—lowering the barrier for front-end developers. - **Media queries are the control layer, not the whole system** (Early): Breakpoints override a baseline stylesheet; the author prefers placing queries near the rules they modify rather than bundling them separately. - **Proportional sizing replaces fixed pixels** (Early): The target ÷ context formula converts fixed layouts into fluid ones, a foundational skill before reaching for newer layout modules. - **Flexbox solves what floats and tables cannot** (Early): Alignment, equal-height columns, and filling remaining space become straightforward once you understand main vs. cross axis and the `flex` shorthand. - **Responsive images require author-provided alternatives** (Early): Browsers can't know which image versions exist, so `srcset`, `sizes`, and `<picture>` let you serve appropriate assets with sensible fallbacks. - **HTML5 semantics improve document clarity** (Early–Middle): Elements like `<figure>`, `<details>`, and redefined `<b>`/`<em>`/`<i>` carry meaning beyond styling, and native `<video>`/`<audio>` reduce reliance on plugins. - **CSS3 enables branching and maintainability** (Middle): Feature queries (`@supports`), custom properties, and `calc()` let styles adapt to browser support and centralize values for easier updates. - **SVG is the resolution-independent image format** (Late): Unlike raster formats, SVG scales cleanly, and understanding `viewBox` and embedding options is essential for multi-screen graphics. 【Reading Tips】 - **Skim the HTML5 syntax chapter if you're already comfortable with semantic markup**; deep-read the Flexbox and responsive images sections, which carry the most practical weight. - **Work through the code examples** (the book references numbered examples like `example_02-01`); the concepts—especially Flexbox axes and `viewBox`—click faster when you resize a browser window yourself. - **Treat browser-support notes as decision aids**: the author repeatedly flags what works where (e.g., `@supports` gaps in older IE/Safari), so note these when planning real projects. - **Don't skip the "why not floats/tables" discussion**—it explains the design rationale behind Flexbox and helps you avoid legacy layout traps. - **Use the CSS3 graphics chapters (shadows, gradients, filters) as a reference** rather than reading linearly; they're technique catalogs you'll revisit. 【Coverage Limits】 The excerpts cover the book's core arc—media queries, Flexbox, responsive images, HTML5 semantics, CSS3 features, and SVG—but do not detail later chapters on performance, Grid Layout (explicitly deferred), or the closing "next era" discussion. Specific chapter numbers and full example code are only partially visible.