二十五、响应式布局 - 媒体查询-优快云博客

本文链接：https://blog.youkuaiyun.com/gaoya7305/article/details/131888297

响应式布局允许网页根据设备或窗口大小调整布局，确保在不同设备上呈现良好效果。关键在于媒体查询，它能针对不同设备或状态设置样式。媒体查询支持多种设备类型，如all（所有设备）、print（打印）、screen（带屏幕设备）等，可使用逗号表示或关系。文章提供了示例代码展示如何使用媒体查询定义不同设备下的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、响应式布局介绍

我们发现很多网页，在用户拉动边框缩放可视区的时候，内部控件都会随着大小有变动，这个就是在自适应屏幕 - 响应式布局

响应式布局
        -  网页可以根据不同的设备或窗口大小呈现出不同的效果。
        - 使用响应式布局，可以使一个网页适用于所有设备（但是大公司不常用，因为手机端和网页无法做到很完美的相互适配）。
        - 响应布局的关键就是 媒体查询 。
        - 通过媒体查询，可以为不同的设备，或设备不同状态来分别设置样式。

特别注意：
- 电脑，手机都有屏幕 - 他们是属于一种设备；
- 网页有时候需要打印机 - 打印机又是一种设备（打印机没有屏幕）；
- 根据这个设备的不同，打印的时候一个样式，屏幕上看是另外一个样式；
- 如果同一种设备，都是屏幕，但是可以是不同状态。比如：有些屏幕大，有些屏幕小，有些屏幕是横的，有些屏幕是竖的

二、媒体查询

1. 媒体查询语法介绍

语法： @media 查询规则{}
            媒体类型(设备类型)：
               all    所有设备
               print  打印设备
               screen 带屏幕的设备（电脑，手机）
               speech 屏幕阅读器（这种设备是不带屏幕的）
               - 可以使用逗号（,）连接多个媒体类型，这样他们之间就是一个或的关系
              -  可以在媒体类型前添加一个only,表示只有,比如only screen(表示只有在屏幕的时候才会运用这个效果)， only不写也不影响，所以only的使用主要是为了兼容一些老版本浏览器。当发现有这个only，老版本浏览器，他就会忽略你这里设置的所有样式。

2.具体写法

 <style>
        /* 这句话意思是无论你在什么设备下，你的背景颜色都是绿色 */
         @media all{
            body{
                background-color: #bfa;
            }
        } 
		 @media screen{
            body{
                background-color: #bfa;
            }
        } 

        /* 表示在打印机打印的时候，或者屏幕的时候，都会运用到这个样式， 逗号表示或的意思 */
         /* @media print, screen{
            body{
                background-color: #bfa;
            }
        } */

        /* 一般我们都要么只写screen,或者all,或者only screen(表示只有在屏幕的时候才会运用这个效果) */
    </style>