响应式设计意味着网页可以根据屏幕大小自动缩放。
[En]
Responsive design means that a web page can automatically scale according to the size of the screen it is displayed on.
响应式设计使得对笔记本和手机用户更加友好。
分辨率的计算:宽度 * 高度,最常见的屏幕分辨率是 1920px * 1080px。
响应式设计三大技术:
在响应式设计中,像素值通常被称为"断点(breakpoint)"。断点指的是网页的内容和布局会自适应并尽可能提供最好的用户体验。
断点可以在三种栅格下发挥作用:
媒体查询是 CSS3 中引入的一项新技术,它可以根据不同的视窗大小调整内容的布局。 视窗是指浏览器中,用户可见的网页内容。 视窗会随访问网站的设备不同而改变。
媒体查询由媒体类型组成。如果媒体类型与显示网页的设备类型匹配,则应用相应的样式。在媒体查询中使用各种选择器和样式。
[En]
The media query is composed of media types. If the media type matches the device type displaying the web page, the corresponding style is applied. Use various selectors and styles in media queries.
```css
@media (max-height: 800px) {
p {
font-size: 10px;