媒体查询和LESS、SASS

媒体查询

响应式布局 针对不同屏幕显示不同效果

媒体查询可以控制在不同屏幕宽度显示的效果

1、通过 @media 关键字定义媒体查询

2、min-width 屏幕最小宽度

3、max-width 屏幕最大宽度

4、给定范围时通过 and 连接

可以用外部和内部样式表

外部可以同时关联多个

  <link rel="stylesheet" href="./index600.css" media="(min-width:1000px)">
    <link rel="stylesheet" href="./index1000.css" media="(min-width:600px) and (max-width:1000px)">
    .box{
    width: 600px;
    height: 200px;
    display: flex;
    flex-wrap: wrap;
  
}
.box>div:nth-child(1){
    width: 200px;
    height: 100px;
    background-color: red;
}
.box>div:nth-child(2){
    width: 200px;
    height: 100px;
    background-color: yellow;
}

内部

<style>
         /* 屏幕宽度不超过600px时 */
        @media(max-width:600px){
            .box{
width: 200