Media Query，也就是允许页面获取设备信息的查询。

    你的页面可以只通过CSS在适配桌面电脑的同时，不修改DOM再适配一份手机端的界面。这就是Media Query的作用。
    
    Media Query的CSS写法格式为：
    @media not|only mediaType and ((mediaFeature) and|or|not (mediaFeature)) {
        CSS-Code;
    }
    mediaType取值范围为：all（默认）、print（打印机环境）、screen（屏幕环境）、speech（屏幕阅读器环境）
    mediaFeature的常用设定有：

        color（每个像素的比特指，比如：8位、16位、32位）
        device-height（屏幕设备实际高度）
        device-width（屏幕设备实际宽度）
        height（窗口viewport的高度）
        width（窗口viewport的宽度）
        max-height（窗口viewport高度的最大值）
        max-width（窗口viewport宽度的最大值，最经常用到）
        min-height（窗口viewport高度的最小值）
        min-width（窗口viewport宽度的最小值，最经常用到）

        prefers-color-scheme（十分有效的自动切换皮肤的判断项，根据用户操作系统的系统偏好设置，选择使用对应的样式。值可以为dark或者light）
        
        light-level（当前环境光水平，可以根据用户电脑上的感光设备的感光值指定不同的CSS样式。值可以为正常环境normal、黑暗环境dim以及明亮环境washed）

    以下是一个应用Media Query到窄屏幕的例子：
    @Media (max-width: 1920pt) and (min-height: 768pt){
        .index-column-container{
            display: flex;
            flex-direction: column;
            align-items: baseline;
            justify-content:center;
            justify-items: center;
            width: 100%;
            font-size: 9pt;
            text-align: left;
            height: fit-content;
        }
    }
    ————www.v-signon.com学习者共勉