Css Reative

响应式设计

响应式设计的三大原则:

移动优先。这意味着在实现桌面布局之前先构建移动版的布局。
@media规则。是用这个样式规则，可以为不同大小的视口定制样式。用这一语法，通常叫做媒体查询（media queries），写的样式只在特定条件下才会生效。
流式布局。这种方式允许容器根据视口宽度缩放尺寸。

移动优先

媒体查询

查询类型

  @media (min-width:20em) and (max-width: 35em) {....}

这种联合查询只在设备同时满足这两个条件时才生效。

如果设备只需要满足多个条件之一，可以用逗号分割

  @media (max-width: 20em),(min-width:35em) {....}

媒体类型

常见的两种媒体类型是screen 和print,使用方法为

  @media print {.....}

响应式表格处理

在移动设备的流式布局里，表格的问题特别多。如果表格的列太多，很容易超过屏幕宽度，需要将表格强制显示为一个普通的块级元素。

table {
 width: 100%;
}

@media (max-width: 30em) {
 table, thead, tbody, tr, th, td {
 display: block;
 } 
 thead tr {
 position: absolute;
 top: -9999px;
 left: -9999px;
 } 
 tr {
 margin-bottom: 1em;
 } 
}

响应式图片处理

不同视口大小使用不同的图片

.hero {
 padding: 2em 1em;
 text-align: center;
 background-image: url(coffee-beans-small.jpg);
 background-size: 100%;
 color: #fff;
 text-shadow: 0.1em 0.1em 0.3em #000;
}

@media (min-width: 35em) {
 .hero {
 padding: 5em 3em;
 font-size: 1.2rem;
 background-image: url(coffee-beans-medium.jpg);
 } 
} 
@media (min-width: 50em) {
 .hero {
 padding: 7em 6em;
 background-image: url(coffee-beans.jpg);
 } 
}

使用srcset提供对应的图片


<img alt="A white coffee mug on a bed of coffee beans"
 src="coffee-beans-small.jpg"
 srcset="coffee-beans-small.jpg 560w,
 coffee-beans-medium.jpg 800w,
 coffee-beans.jpg 1280w"
/>

现在大多数浏览器支持 srcset。不支持的浏览器会根据 src 属性加载相应的 URL。这种方式允许针对不同的屏幕尺寸优化图片。更棒的是，浏览器会针对高分辨率的屏幕做出调整。如果设备的屏幕像素密度是 2 倍，浏览器就会相应地加载更高分辨率的图片。

总结

优先实现移动端设计。
使用媒体查询，按照视口从小到大的顺序渐进增强网页。
使用流式布局适应任意浏览器尺寸。
使用响应式图片适应移动设备的带宽限制。
不要忘记给视口添加 meta 标签。

示例地址

示例:一个简单的响应式页面

最后修改于 2023-04-11