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

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

参考数据标准：

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

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

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

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

小案例：PC端的样式

移动端的样式

内容代码：

    

        

            

                
                

                    
电脑换新就要快
                    
全新第六代因特尔@酷睿™处理器家族，以强大性能与智能技术，释放您的双手带来前所未有的人机交互方式。快来体验自由无拘无束！
                
            
        
        

            
欢迎来到全新的和世界，在这里，你将会体验到前所未有的视觉盛宴，come on ！ let's GO
        
    

媒体查询：

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