Basic Concepts
1. Pixel Types
Screeen size is measured diagonally in centimeters. Screen resolution refers to the number of physical pixels across and down the screen.
- Physical Pixel: smallest controllable display unit on a device, the fundamental dot for rendering data. Retina (2x) or 3x screens use multiple physical pixels to represent one CSS pixel—1 CSS pixel maps to 1 physical pixel on standard screens, 4 on 2x, and 9 on 3x.
- CSS Pixel: The abstract unit for web development (e.g.,
width: 100px). A single CSS pixel converts to physical pixels for rendering, with the mapping dependent on both screen pixel density and user scaling behavior.
Note: CSS px ≠ physical pixels. On PCs, 1 CSS pixel typically equals 1 physical pixel, but on mobile, the ratio varies by screen density.
2. Device-Independent Pixel (DIP)
The pixel unit used in CSS and browsers, abstracted to precisely measure web content across devices.
3. Device Pixel Ratio (DPR)
The ratio of physical pixels to device-independent pixels. For 1:1, 1 CSS pixel uses 1 physical pixel; for 2:1 (DPR=2), 4 physical pixels; for 3:1 (DPR=3), 9 physical pixels.
4. Screen Resolution
Physical resolution describes pixel count in horizontal and vertical directions. Higher resolution on the same screen size means finer, denser pixel displays.
5. Viewport
The area on a device where web content renders, with three key types:
- Visual Viewport: The user’s current visible screen width.
- Layout Viewport: The total width of the rendered webpage.
- Ideal Viewport: When the layout viewport equals the visual viewport (screen width), providing optimal display.
Set ideal viewport with:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
width=device-width: Matches layout viewport to visual viewport.initial-scale: Sets initial page zoom (0.0–10.0).user-scalable: Disallows manual scaling (no/yes).maximum-scale/minimum-scale: Limits zoom range.
Adaptive Layout Schemes
1. Percentage Unit (%)
Use percentages for width and fixed pixels for height, adjusting to the visible area in real time. Add max-width/min-width to constrain size ranges, ideal for lists.
Pros: Simple principle, full browser compatibility.
Cons:
- Fails to display correctly on extremely small/large screens.
- Font sizes don’t scale with screen width.
- Percentages reference different parent elements for box model properties, complicating layout.
2. rem Unit
rem is relative to the root element (<html>) font size (browser default: 16px → 1rem=16px). Dynamicallly adjust the root font size based on screen width to ensure consistent visual scaling.
Key idea: Divide the screen into N equal parts (e.g., 20), where 1rem equals one part. For a 640px-wide screen, 1rem = 640px / 20 = 32px, so set <html> font size to 32px.
(function initRemBase() {
const root = document.documentElement;
function updateRem() {
const baseSize = root.getBoundingClientRect().width / 20;
root.style.fontSize = `${baseSize}px`;
}
window.addEventListener('resize', updateRem);
updateRem();
})();
Pros:
- Strong compatibility with most modern browsers.
- Better adaptive results than percentages—pages won’t distort when resized.
Cons:
- Not a pure CSS solution; requires JS to listen for resize events, creating coupling between CSS and JS.
- Decimal pixel errors: rem calculations may produce decimal pixels, which browsers round to integers, causing rendering inconsistencies (mitigation: skip rem conversion for very small pixel values).
3. vw/vh Units
Viewport units are relative to the visible viewport:
- 1vw = 1% of viewport width
- 1vh = 1% of viewport height
- vmin: Minimum of vw and vh
- vmax: Maximum of vw and vh
For example, on a 750px-wide viewport, 1vw = 7.5px, and 1px ≈ 0.1333vw.
Pros: Pure CSS solution, no JS dependency.
Cons: Limited compatibility (Android < 4.4 unsupported).
4. rem + vw/vh Hybrid
Combine rem with vw/vh to retain compatibility and simplify calculations. For a 750px design draft:
- Set the ideal viewport meta tag.
- Define the root font size in vw to align with a 100px base (1rem = 100px):
html {
font-size: 13.33333333vw;
}
A 200px × 137px element converts to:
.element {
width: 2rem;
height: 1.37rem;
}
This eliminates decimal pixel errors and removes JS dependencies.
5. Media Queries (@media)
Define different styles for specific screen resolutions to implement responsive layouts, ideal for large gaps between PC, tablet, and mobile.
@media screen and (min-width: 375px) {
.container {
padding: 1rem;
}
}
@media screen and (max-width: 750px) {
.container {
padding: 0.5rem;
}
}
Pros: Enables targeted layouts for different devices, not just scaling.
Cons:
- High effort—requires multiple design drafts and breakpoints.
- Disruptive user experience at breakpoints (sudden layout shifts).
App Types for Reference
Mobile apps fall into four main categories:
- Native App: OS-dependent, high-interaction, standalone apps (e.g., Instagram) requiring installation. Pros: Fast, interactive, good user experience. Cons: High development/maintenance cost, platform-specific.
- Web App (H5): Browser-based apps using HTML/CSS/JS, accessed via URLs (no installation). Pros: Cross-platform, low cost, instant access. Cons: Relies on network speed, slower loading.
- Hybrid App: Combines native frameworks with web content (e.g., 58.com listings). Pros: Balances native performance and web flexibility. Cons: Complexity in integrating native and web components.
- Mini Program: Lightweight apps hosted within super apps (e.g., WeChat Mini Programs). Pros: Low friction, built-in user base. Cons: Platform limitations.