css媒体查询之height

最新推荐文章于 2025-06-08 12:34:08 发布

原创最新推荐文章于 2025-06-08 12:34:08 发布 · 734 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

4 篇文章

订阅专栏

本文探讨了在网页设计中使用媒体查询调整不同高度范围内的样式，通过具体实例展示了如何实现页面高度变化时的不同视觉效果，提升用户体验。

几个典型的应用方式

@media (min-height:400px){ … }
@media screen and (height:600px){ … }
@import url(example.css) screen and (height:800px);

应用例子

!doctype html>
<html>
    <head>
        <title>Test media query of height</title>
        <style>
            @media all and (min-height:200px) and (max-height:250px){
                body{
                    background-color:green;
                }
            }
        </style>
    </head>
    <body>
       <h1>This is a test</h1>
    </body>
</html>