响应式的原理是CSS3媒体查询，响应式的框架Bootstrap

原创已于 2024-07-29 16:56:22 修改 · 620 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

web

于 2024-07-19 23:01:46 首次发布

一、响应式原理

响应式的原理是CSS3媒体查询，响应式的框架Bootstrap

响应式网页实现的效果：起初响应式的出现是为了解决在不同分辨率的终端设备上，页面中的各个元素能够有较好的展示。

重点：

响应式页面原理：**根据浏览器窗口的宽度，来加载不同的样式代码css**，从而使元素在不同分辨率下有完好的展示效果（需要检测这个宽度）

二、css3中的媒体查询

目前移动端页面主流的处理方式是：pc端用响应式原理来书写，移动端做成自适应的效果（例如: [www.taobao.com](http://www.taobao.com) 和 m.taobao.com）

http://www.taobao.com

收缩不能自如，不能根据移动端自适效果

http://m.taobao.com

收缩能自如，能根据移动端自适效果

**Css3媒体查询是专门用来检测浏览器宽度，从而加载/渲染对应的css代码。**

媒体查询格式：

```css

@media (min-width:1000px){

/*当浏览器宽度**大于等于1000px**的时候渲染这里面的代码，例如：*/

div{ background-color: #ccc;}

}

```

注意：

@media 是查询关键字

(min-width:1000px) 是查询条件

大括号里面的代码是满足条件的时候渲染的样式代码

建议：媒体查询代码一般放在普通css代码之后

01-媒体查询体验：

<!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>
        *{margin: 0;padding: 0;}

        
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        
        /* 媒体查询的格式： */
        @media (min-width:1000px){
            /* 窗口宽度最小是1000px的时候才加载这里的代码*/
            /* 当浏览器宽度大于等于1000px的时候，加载这里的css代码 */
            div{
                width: 300px;
                background-color: green;
            }
        }
        
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果：

/* 窗口宽度最小是1000px的时候才加载这里的代码*/

/* 当浏览器宽度大于等于1000px的时候，加载这里的css代码 */

三、媒体查询的条件

(min-width:1000px) 大于等于1000px

<!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>
        *{margin: 0;padding: 0;}

        
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        
        /* 媒体查询的格式： */
        @media (min-width:1000px){
            /* 窗口宽度最小是1000px的时候才加载这里的代码*/
            /* 当浏览器宽度大于等于1000px的时候，加载这里的css代码 */
            div{
                width: 300px;
                background-color: green;
            }
        }
        
    </style>
</head>
<body>
    <div></div>
</body>
</html>

(max-width:1000px) 小于等于1000px

(orientation:landscape) 横屏

(orientation:portrait) 竖屏

媒体查询条件：


<!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>
        *{margin: 0;padding: 0;}
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        /* 媒体查询的格式： */
        /* @media(max-width:1000px){
            /* 窗口宽度最大是1000px的时候才加载这里的代码*/
            /* 当浏览器宽度小于等于1000px的时候，加载这里的css代码
            div{
                width: 300px;
                background-color: green;
            }
        }  */


        /* @media (orientation:landscape){
            /* 在横屏下加载这个样式 
            div{
                width: 300px;
                background-color: green;
            }
        } */

        /* @media (orientation:portrait){
            /* 在竖屏下加载这个样式 
            div{
                width: 300px;
                background-color: green;
            }
        } */
    </style>
</head>
<body>
    <div></div>
</body>
</html>

四、媒体查询的关键字

**And 两个条件存在的时候使用and关键字**

格式：

```css

@media **(min-width:600px) and (max-width:1000px)**{

/*在大于等于600px且小于等于1000px的时候，渲染这里的css代码：*/

div{ background-color: #f40;}

}

```

注意：没有分号，and两边都有空格符号

**only 和not的设备类型可以是：**

all 所有设备类型适用

print 适用于分页媒体（包括打印设备和其它将内容分离到多页的设备）和以打印预览模式在屏幕上查看的文档

screen 主要指计算机或移动设备屏幕

speech 应用于屏幕阅读器等发声设备

格式：

```css

@media only screen {

}

```

最常书写的格式：

```css

@media only screen and (min-width:1000px){

}

```

五、媒体查询书写位置

1、内嵌式（直接写在html中的style标签里面）

2、外链式（把@media写在一个css文件中）

3、把media作为link的标签属性，条件作为media的值来书写

```html

```

六、媒体查询项目实践

HTML代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div></div>
</body>
</html>

css代码：

*{margin: 0;padding: 0;}
div{
    width: 200px;
    height: 200px;
    background-color: pink;
    border: 1px solid #000;
}

@media (min-width:600px){
    div{
        width: 400px;
    }
}

@media (min-width:1000px){
    div{
        width: 600px;
    }
}
@media (min-width:1200px){
    div{
        width: 800px;
    }
}

七、真正媒体查询的写法link链入

HTML代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 小于600px的窗口加载第一套样式  style1.css-->
    <link rel="stylesheet" href="css/style1.css">
    <!-- 大于等于600px但小于1000px的窗口加载第一套和第二套样式 -->
    <link rel="stylesheet" href="css/style2.css" media="(min-width:600px)">
    <!-- 大于等于1000px但小于1200px的窗口加载第一套和第二套样式和第三套样式 -->
    <link rel="stylesheet" href="css/style3.css" media="(min-width:1000px)">
    <!-- 大于等于1200px的窗口加载四套样式 -->
    <link rel="stylesheet" href="css/style4.css" media="(min-width:1200px)">
</head>
<body>
    <div></div>
</body>
</html>

css/style1.css代码：

*{margin: 0;padding: 0;}
div{
    width: 200px;
    height: 200px;
    background-color: pink;
    border: 1px solid #000;
}

css/style2.css代码：

div{
    width: 400px;
}

css/style3.css代码：

div{
    width: 600px;
}

css/style4.css代码：

div{
    width: 800px;
}

注意：

或者：引入Bootstrap文档，Bootstrap的框架。

标签

#css3 #媒体 #前端 #javascript