媒体查询——>@media screen and (min-width: 768px)

最新推荐文章于 2025-06-05 18:40:00 发布

原创最新推荐文章于 2025-06-05 18:40:00 发布 · 1.1w 阅读

CC 4.0 BY-SA版权

响应式网页设计中，CSS3的媒体查询扮演关键角色。通过@media screen and (min-width: 768px)等条件，设计师可以为不同设备定义不同样式。例如，当屏幕宽度超过768px时，适用于平板设备，容器宽度设为750px；小于768px则适应手机，容器宽度自动调整。媒体查询帮助实现从超大PC显示器到移动端的流畅视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

响应式网页设计的时候，往往都需要运用到CSS3的媒体查询技术，实现在大PC端，普通PC端、平板端、移动端呈现不同的样式

参考数据标准：

当屏幕宽度>1200px（超大PC显示器-lg）：容器宽1170px

当屏幕宽度>992px（普通PC显示器-md）: 容器宽970px

当屏幕宽度>768px（平板显示器-sm）: 容器宽750px

当屏幕宽度<768px（手机显示器-xs）: 容器宽auto

小案例：PC端的样式

移动端的样式

内容代码：

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-8">
            <div class="masking-parent">
                <img src="images/intel.web.864.486.1.jpg" alt="" class="img-responsive">
                <div class="masking-text">
                    <h1>电脑换新就要快</h1>
                    <p>全新第六代因特尔@酷睿™处理器家族，以强大性能与智能技术，释放您的双手带来前所未有的人机交互方式。快来体验自由无拘无束！</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 hidden-sm hidden-xs">
            <h3>欢迎来到全新的和世界，在这里，你将会体验到前所未有的视觉盛宴，come on ！ let's GO</h3>
        </div>
    </div>
</div>

媒体查询：

        .masking-parent {
           position: relative;
           background: #0071c5;
        }
        @media screen and (min-width: 768px){
            .masking-parent .masking-text {
                position: absolute;
                bottom: 0px;
                color: #ffffff;
            }
        }