媒体查询、响应式布局

最新推荐文章于 2026-04-14 16:47:40 发布

原创最新推荐文章于 2026-04-14 16:47:40 发布 · 944 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

一、媒体查询

介绍：可以通过css查询出来屏幕宽度

作用：根据不同的屏幕宽度展示不同的效果

屏幕宽度的分类

>1200 大屏电脑

996-1200 中小屏电脑

768-996 pad

<768 手机

css2里的媒体查询写在link标签里

    <link rel="stylesheet" href="./1.css" media="screen and (min-width:1200px)">
    <link rel="stylesheet" href="./2.css" media="screen and (min-width:996px) and (max-width:1200px)">
    <link rel="stylesheet" href="./3.css" media="screen and (min-width:768px) and (max-width:996px)">
    <link rel="stylesheet" href="./4.css" media="screen and (max-width:768px)">
    
    
    
    手机里的横屏和竖屏
    <link rel="stylesheet" href="1.css" media="screen and (orientation:landscape)">  横屏
    <link rel="stylesheet" href="3.css" media="screen and (orientation:portrait)">   竖屏

css3 里的媒体查询写在css文件里

/* 
    >1200 大屏电脑    5
    996-1200 中小屏电脑   4
    768-996  pad       3
    <768     phone      2
*/
@media screen and (min-width:1200px){
    p{
        column-count: 5;
        background-color: red; 
     }     
}

@media screen and (min-width:996px) and (max-width:1200px) {
    p{
        column-count: 4;
        background-color: green; 
     }
}

@media screen  and (min-width:768px) and (max-width:996px){
    p{
        column-count: 3;
        background-color: pink; 
     }
    
}



@media screen and (max-width:768px){
    p{
        column-count: 2;
        background-color: blue; 
     }
}

两种方案二选一

电脑端优先大屏幕先执行

比如  当前屏幕是1300px（执行最上边）    当前屏幕是600px（执行到最后）

最上边  充当 >1200  


@media screen and (max-width:1200px){    
 li{
     width: 25%;
 }
}

@media screen and (max-width:996px){
 li{
     width: 33.33%;
 }
}

@media screen and (max-width:768px){
    /* 第三次 */
 li{
     width: 50%;
 }
}

手机端优先小屏幕先执行

当前屏幕是1300px(应用最后一个)  当前屏幕是600px（应用最上边的）

最上边   充当<768


/* 768-996 */
@media screen and (min-width:768px) {
  
    li{
        width: 33.33%;
    }
}

/* 996-1200 */
@media screen and (min-width:996px) {
   
    li{
        width: 25%;
    }
}
/* >1200 */
@media screen and (min-width:1200px) {
    li{
        width:20%;
    }
}

二、响应式布局

2.1核心技术

媒体查询

弹性盒子

百分比布局

2.2 响应式布局的原理

原理：媒体查询

2.3 响应式布局的优缺点

优点：

1、减少工作量，设计、代码、内容只需要写一份。多出来一些css样式和js脚本
2、节省时间、节约成本
3、每个设备都能得到良好的设计

缺点：

1、会加载更多的样式和js脚本
2、设计比较难精准控制（细节处理的不太好）

2.4、响应式的使用场景

展示性的企业站（苹果官网、星巴克官网..）、个人博客、后台管理系统

标签

#servlet #html #javascript