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

响应式网页设计中,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;
            }
        }

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值