响应式网页设计的时候,往往都需要运用到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;
}
}