CSS-响应式布局

最新推荐文章于 2024-04-23 17:13:57 发布

巷子里有条狗

最新推荐文章于 2024-04-23 17:13:57 发布

阅读量245

点赞数

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/qq_40561863/article/details/129872367

版权

前端专栏收录该内容

50 篇文章 0 订阅

订阅专栏

响应式布局

概念：是指利用媒体查询技术来实现不同设备都有良好用户体验的一种布局方式。核心在于媒体查询
原理很简单，但是应用起来比较麻烦。
响应式布局适合不复杂的页面，如果页面很复杂，不建议使用。
例如：JQuery 22插件库 https://www.jq22.com/，苹果官网
好处：
- 支持不同屏幕，有很好的适应性
- 良好的用户体验
缺点：
- 大量css代码，开发难度比较大的，维护性下降

媒体查询

作用：检测当前设备是什么设备
媒体：

在网页中媒体指的是各种设备，比如：电脑，平板，手机，打印机
查询：

检测当前屏幕属于什么设备，以及属于哪种类型，根据这些信息采用对应css代码，能够在不同的屏幕上呈现不同的效果（不同的用户体验）

基本语法

在引入样式的时候，可以规定样式的作用范围

<!-- link引入样式时可以规定样式作用范围  print打印机  screen 电子屏幕彩色屏幕  -->
 <link rel="stylesheet" href="css/style.css" media="only print">

css样式中规定作用范围

@media 设备类型{
    当前设备满足要求后所使用的css代码
}

媒体类型

可以将不同的设备进行分类，可以针对不同的设备来执行不同的代码

值	设备类型
All	所有设备
Print	打印设备
Screen	电脑显示器，彩色屏幕（移动设备）
Braille	盲人用点字法触觉回馈设备
Embossed	盲文打印机
Handhelp	便携设备
Projection	投影设备
Speech	语音或者音频合成器
Tv	电视类型设备
Try	电传打印机或者终端

手机，ipad ，电脑等等设备类型都是screen

媒体特性

概念：是指媒体设别的特性，用来描述设备的特点；设备宽度、高度、识别是横屏还是竖屏
作用：可以通过媒体特性区分pc端还是手机端

常见的媒体特性

值	表达意思
width	网页显示区域完全等于设置的宽度=
height	网页显示区域完全等于设置的高度=
max-width	网页显示区域小于等于设置宽度<=
max-height	网页显示区域小于等于设置高度<=
min-width	网页显示区域大于等于设置的宽度>=
min-height	网页显示区域大于等于设置的高度>=
orientation:landscape	portrait (竖屏模式) \| landscape (横屏模式)

语法：

@media 设备类型 and （媒体特性：值）{
    设备满足条件会使用的css样式
}
例子：
/* 媒体特性需要用小括号包裹 */
/* and 代表并且的意思 */
@media screen and (width: 320px){
    .box {
        width: 400px;
        height: 400px;
        background-color: green;
    }
}
@media screen and (orientation:landscape) {

    .box{
        background-color: orange;
    }

}

and：代表并且的意思

媒体查询关键字

用于媒体特性的连接词，可以将多个媒体特性关联起来

and:并且的意思，即需要同时满足条件

语法：

@media 媒体类型 and （媒体特性：值） and （媒体特性：值）{
    作用的代码
}

@media screen and (min-width:750px) and (max-width:1200px){
    .box{
        background-color: pink;
    }
}

,:代表或者意思，注意是英文的逗号

语法：

@media 媒体类型 and （媒体特性：值）, 媒体类型 and （媒体特性：值）{
    css代码
}

 @media screen and (max-width:750px), screen and (min-width:1200px){
     .box{
         background-color: yellow;
     }
}

注意：,需要注意的是，两边的条件是相对独立的（包括媒体类型），满足其中一个条件即可。

not：代表非的意思，代表否定条件
- 语法：
```
@media not 媒体类型  and （媒体特性：值）{
    css代码
}
```
  - 注意：not否定的是条件，不会否定媒体类型
only:代表仅仅，只用于某个设备比如：only screen
- 代表唯一，一般放在媒体类型前面，就是一种修饰，强调
- only在使用过程中，目前浏览器没有太多的限制，但是在老版本的浏览器，针对某些版本，某些浏览器不支持媒体查询，用only排除。