1. Why responsive markup is needed
The same site at the same address must render correctly on different devices: desktop, tablet, smartphone. The variety of screen sizes and their aspect ratios (4:3, 16:9, 18:9, 21:9) makes responsiveness mandatory.
More than 60% of modern site traffic comes from mobile devices.
Two approaches to responsiveness
| Approach | Essence |
|---|---|
| Separate mobile version | A separate domain (for example, m.example.com). For large services with a lot of functionality |
| Responsive markup | One domain, one HTML — different styles for different screen widths through media queries |
A separate mobile version makes sense only for very large portals where mobile users do not need a significant part of the functionality. In most cases — use responsive markup with media queries.
2. Desktop First vs Mobile First
| Approach | Principle | Media query |
|---|---|---|
| Desktop First | We start with the desktop version, then remove the excess for narrower screens | max-width |
| Mobile First (recommended) | We start with the mobile version, then add elements for wider screens | min-width |
Mobile First is better, because the mobile version is the base CSS without media queries, while the tablet and desktop versions supplement it. This means less CSS code and faster loading for mobile users.
3. Device types in media queries
| Type | Description |
|---|---|
screen |
Devices with a screen (monitors, tablets, smartphones) |
print |
Printing |
speech |
Voice devices (screen readers) |
all |
All device types (default) |
4. Loading separate CSS files for different devices
The media attribute of the <link> tag allows loading different CSS files depending on the device type or screen width:
<!-- Styles for screens only -->
<link rel="stylesheet" href="screen.css" media="screen">
<!-- Styles for printing only -->
<link rel="stylesheet" href="print.css" media="print">
<!-- Styles for tablets and wider (Mobile First) -->
<link rel="stylesheet" href="tablet.css" media="(min-width: 768px)">The advantage of splitting files: a mobile device will load only its own CSS, not all the code for desktop and tablet. This saves traffic and speeds up loading.
5. CSS for printing
The printed version of a page needs a different design:
- Remove the menu, ads, sidebars, background images
- Text color — black (colored text becomes pale or invisible when printed)
- Browsers usually remove the background automatically when printing to save ink
- Units of measurement on paper are absolute (cm, mm) — the sheet size is always known
/* print.css — styles for printing */
.navigation,
.sidebar,
.advertisement {
display: none;
}
body {
color: #000;
background: #fff;
}6. Media queries in CSS
The basic syntax of a media query inside a CSS file:
/* Styles are applied at a width of 500px and wider */
@media (min-width: 500px) {
.box {
background: red;
}
}Inside @media we write ordinary CSS rules. They are applied only when the media query condition is met.
| Condition | When it triggers | Approach |
|---|---|---|
min-width: 768px |
Screen width from 768px and up | Mobile First |
max-width: 767px |
Screen width up to 767px and below | Desktop First |
7. Common breakpoints
Commonly accepted width ranges for different device types:
| Device | Width |
|---|---|
| Mobile (portrait) | up to 767px |
| Tablet | 768px – 1024px |
| Small desktop | 1025px – 1439px |
| Large desktop | from 1440px |
These are approximate values. Specific breakpoints are determined by the layout design, not by a list of devices. Build your markup so that the content looks good at any width, not only on specific devices.
8. Device Pixel Ratio — pixel density
Modern mobile screens have a physical resolution 2–4 times higher than “CSS pixels”.
| Device | Physical resolution | CSS resolution | DPR |
|---|---|---|---|
| iPhone SE | 640 × 1136 | 320 × 568 | 2 |
| iPhone 14 Pro | 1179 × 2556 | 393 × 852 | 3 |
Thanks to DPR, a small screen can display smooth fonts and crisp images without shrinking elements to an unreadable size.
Media queries use CSS pixels, not physical ones. That is why
min-width:
768px will trigger the same way both on a tablet with DPR 2 and on a monitor with DPR 1.9. Testing responsive markup
The order of checks — from the fastest to the most reliable:
- Main browser — narrow the window, check visually
- Other browsers on the computer (Firefox, Safari, Edge)
- DevTools → Toggle Device Toolbar (F12 → devices icon) — emulation of different screen sizes
- Real devices — the most reliable method
Emulation ≠ a real device. The difference: the browser’s system elements (address bar, navigation panel) take up space; font rendering differs; some CSS properties have bugs on specific devices. The more important the project — the more real devices you need to check.
Remote debugging on real devices
- Chrome: connect an Android device via USB →
chrome://inspect - Safari: connect an iPhone/iPad via USB → Safari → Develop → [device]
10. Mobile First example with split files
<!-- Base styles — mobile version (without media queries) -->
<link rel="stylesheet" href="mobile.css">
<!-- Tablet: from 768px -->
<link rel="stylesheet" href="tablet.css" media="(min-width: 768px)">
<!-- Desktop: from 1025px -->
<link rel="stylesheet" href="desktop.css" media="(min-width: 1025px)">The styles are applied cascadingly: on desktop mobile.css + tablet.css + desktop.css all work. Each subsequent file supplements or overrides the previous one.
11. Summary table
| Topic | Key point |
|---|---|
| Media queries | @media (min-width: ...) or @media (max-width: ...) — conditional application of styles |
| Mobile First | Base CSS is the mobile version; media queries add styles for wider screens |
| Device types | screen, print, speech, all |
| Splitting CSS | The media attribute in <link> — loads only the needed CSS |
| Breakpoints | ~768px (tablet), ~1025px (desktop) — approximate, dictated by the design |
| Device Pixel Ratio | The ratio of physical pixels to CSS pixels; media queries work with CSS pixels |
| Testing | Browsers → DevTools → real devices; emulation ≠ reality |
