css画面长度 |css 滚动条隐藏

.normal {
width: 960px;
height: 600px;
}
@media screen and (max-width: 768px) {
.normal {
width: 100%;
height: auto;
}
}

CSS 中最基本的画面长度属性就是 width 和 height，大家可以把它们设置为一个具体的像素值，例如上面的示例中，大家设置 .normal 的宽度为 960px，高度为 600px。

但是当大家的网站在移动端浏览时，这种设置的画面长度就显得不太合适了，因为移动端的分辨率与桌面端差别很大，过长过宽的画面长度会影响用户的浏览体验。

这时大家可以利用媒体查询（@media）来设置不同分辨率下的画面长度，如上面的代码所示。在 max-width 为 768px 的情况下，大家把 .normal 的宽度设置为 100%，因为移动端的屏幕宽度一般都比较小，这样可以使画面长度自适应屏幕宽度。

除了 width 和 height，还有一些其他的属性可以设置画面长度，例如 max-width、min-width、max-height 和 min-height，它们可以表示最大宽度、最小宽度、最大高度和最小高度。

除了上述的常规属性，CSS 还有一些比较新的属性可以设置画面长度，如 flex 和 grid 等等，这些属性可以非常方便地实现自适应布局。

总之，深入了解画面长度的各种属性，能够更好地实现响应式设计，提高用户体验。