响应式布局-媒体查询media基本操作和一般适配方案

📖媒体查询media是CSS3中引入的功能，可以根据设备的特性，如屏幕宽度、设备类型和分辨率等，动态调整网页样式和布局。开发中我们可能会接触各种设备和屏幕尺寸，通过响应式布局优化用户体验的效果。 阅读文章可以学会

• 🥰媒体查询基本知识
• 🎉media实操
• 🔨项目的一般适配方案

前置知识

用一张图概括media语法

运算符

• not : 取反运算符
  • 如果满足media query则不生效，否则生效
  • 如果出现在以逗号分隔的查询列表中，它将仅否定应用了该查询的特定查询
  • 必须指定媒体类型
• only : only 运算符
  • 仅在整个查询匹配时才用于应用样式
  • 必须指定媒体类型
• , (逗号) 类似逻辑或运算符
  • 用于将多个媒体查询合并为一个规则
  • 如果列表中的任何查询为 true，则整个 media 语句均返回 true
• and : 与运算符
  • 用于将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为 true 时则该条媒体查询为 true
  • 还用于将媒体功能与媒体类型结合在一起

媒体类型 media type

• all 用于所有设备
• screen 用于电脑屏幕，平板电脑，智能手机等
• print 用于打印机和打印预览
• speech 应用于屏幕阅读器等发声设备 还有一些例如aural、braille、embossed、nandheld等都已废弃

其实我们大多就只使用screen这个类型，其他基本接触不到，结合运算符，其实大多情况下，下面三条语句等同

@media only screen and (query){
}

@media all and (query){
}

@media (query){
}

再举一个print例子

@media print {
    body {
        color: blue;
    }
}

常见的query

(max/min)-(width/height)

举例 (max-width: 400px) 表示如果宽度小于400px，应用重载样式（当然其他判断条件也要成立）

下面三个查询语句效果相同

/* @media  (max-width: 400px){} */ 
/* @media  all and (max-width: 400px){} */
@media only screen and (max-width: 400px) {
    h2 {
        font-size: 0.9rem;
    }
    p {
        font-weight: 600;
    }
    body {
        color: blue;
    }
}

(min-width: 600px) 表示如果宽度大于600px，应用重载样式

/* @media  (min-width: 600px){} */
/* @media  all and (min-width: 600px){} */
@media only screen and (min-width: 600px) {
    h2 {
        font-size: 0.9rem;
    }
    p {
        font-weight: 600;
    }
    body {
        color: blue;
    }
}

max/min - height 和上面实现类似

orientation 方向

landscape（横向） 注意观察长和宽的值 当长 > 宽就是横向

@media (orientation:landscape) {
    body {
        color: blue;
    }
}

• portrait（竖向）类似

aspect-ratio 纵横比

和上面orientation类似,但是数值更具体一些

@media (min-aspect-ratio: 8/5) {
    body {
        color: red;
    }
}
@media (max-aspect-ratio: 3/2) {
    body {
        color: blue;
    }
}
@media (aspect-ratio: 1/1) {
    body {
        color: green;
    }
}

上面语句表示

• 当aspect-ratio > 8/5 时 显示红色
• aspect-ratio < 3/2 显示蓝色
• 3/2 < aspect-ratio < 8/5 显示默认颜色
• aspect-ratio == 1 / 1 显示绿色

一般解决方案

移动端响应式设计容器的预定义媒体查询 xs、sm、md、lg、xl、2xl分别表示extra small、small、medium、large、extra large、2 extra large

.container {
  width: 100%;
  margin: 0 auto;
}

/* xs */
@media (min-width: 475px) {
  .container {
    max-width: 475px;
  }
}

/* sm */
@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

/* md */
@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

/* lg */
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

/* xl */
@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

/* 2xl */
@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

pc端响应式设计容器的预定义媒体查询

.container {
  max-width: 1536px;
  margin:0 auto;
}

/* 2xl */
@media (max-width: 1536px) {
  .container {
    max-width: 1280px;
  }
}

/* xl */
@media (max-width: 1280px) {
  .container {
    max-width: 1024px;
  }
}

/* lg */
@media (max-width: 1024px) {
  .container {
    max-width: 768px;
  }
}

/* md */
@media (max-width: 768px) {
  .container {
    max-width: 640px;
  }
}

/* sm */
@media (max-width: 640px) {
  .container {
    max-width: 475px;
  }
}

/* xs */
@media (max-width: 475px) {
  .container {
    width: 100%;
  }
}

响应效果

参考

• developer.mozilla.org/en-US/docs/...
• stackoverflow.com/questions/6...