css响应原理 |html5 css3网页制作

@media screen and (max-width: 768px) {
/*在屏幕宽度小于等于 768px 时生效*/
body {
font-size: 16px;
background-color: #eee;
}
.header {
display: none;
}
}

上述代码是一个简单的 CSS 响应实现，当屏幕宽度小于等于 768px 时，网页会按照@media中的样式进行相应的处理。

@media是 CSS 中的一个关键字，表示创建针对不同情况使用不同样式的媒体查询。在上面的例子中，就是根据屏幕宽度使用不同的样式。

max-width代表屏幕宽度不大于 768px，也可以使用min-width代表屏幕宽度不小于某一值。

除了屏幕宽度，还可以使用orientation判断横竖屏，device-width设定设备宽度以及像素密度等等，达到更为精细的响应设计。

总体来说，CSS 响应原理主要是通过媒体查询实现的，它可以根据设备特点和用户操作获取设备宽度、高度、像素密度等信息，从而判断屏幕大小，在不同情况下使用不同的样式表达出更好的视觉效果。