响应式设计关键技术：媒体查询与视口设置-CSDN博客

本文链接：https://blog.csdn.net/jijsn/article/details/126372527

响应式需要的技术：

1.设置视口标签

2.使用媒体查询

3.响应字体

4.响应图片

5.采用百分比

1、媒体查询

1、标签设置

meta标签的设置

1.虚拟窗口：创建虚拟窗口，自定义窗口的大小和缩放功能，能适应移动设备的屏幕大小

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2.使用高版本的IE内核浏览器或者Chrome浏览器

<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">

http-equiv = "X-UA-Compatible":

这个是针对ie8以上浏览器的一个属性，ie8以下无法识别。就是说ie8以上浏览器遇到这个属性会执行content的描述，大小写不敏感。

2、使用媒体查询适配对应样式

可以根据设备显示器的特性，来设置不同的css的样式

2、媒体查询的引入方式和语法

1、媒体查询的语法

媒体查询的语法：
        
         @media mediaType and (media feather) {
            选择器 {
                属性名：属性值
            }
        } 
多个条件：
       @media mediaType and (media feather) and (media feather){
            选择器 {
                属性名：属性值
            }
        } 

        mediaType：设备类型
        media feather：媒体特性表表达式


 1.mediaType设备类型：
     all:所有的多媒体设备
     print:打印机或打印预览
     screen：电脑屏幕、平板电脑、智能手机等
     speech：屏幕阅读器等发声设备

2.media feather:媒体特性表达式
      width：浏览器的宽度
      height:浏览器的高度
      max-width：最大宽度
      min-width:最小宽度
      device-width:设备宽度
      device-height:设备高度
      max-device-width:最大设备宽度
      min-device-width:最小设备宽度

      orientation:设备的窗口朝向
          1.横屏   宽度比高度大   orientation:landscape;
          2.竖屏   高度比宽度大   orientation:portrait;
     

3.操作符
- and(与、和)
  not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备)
  only: 用来定某种特别的媒体类型。

  /* 除了 speech 设备都可以用*/
    @media not speech {
      body {
        background-color: tomato;
      }
    }

    /* 只能在screen设备能用 */
    @media only screen {
      body {
        background-color: yellowgreen;
      }
    }

媒体查询小案例--只在打印设备显示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .txt {
            font-size: 30px;
            display: none;
        }

        /* 媒体查询 打印设备  在浏览器中鼠标右击，有打印两个字  点击就可以哦 */
        @media print {
            .txt {
                display: block;
            }
        }

        /* display: none; 隐藏元素
           display: block; 显示元素
        
         */
    </style>
</head>

<body>
    <p class="txt">你看不见我，只能在打印设备才能看的见我哦</p>

</body>

</html>