CSS | 响应式布局之媒体查询(media-query)详解

news2024/11/28 20:58:51

media type(媒体类型)是CSS 2中的一个非常有用的属性，通过media type我们可以对不同的设备指定特定的样式，从而实现更丰富的界面。media query(媒体查询)是对media type的一种增强，是CSS 3的重要内容之一。随着移动互联网的发展，media query开始得到大家的重视。

👋🏻 media type(媒体类型) 

media type(媒体类型列)列表

让我们先了解一下media type，其实这个大家会比较熟悉一点，我们通常会用到的media type会是all 和screen，然后是print，一些网站会专门通过print类型为页面的打印格式提供更友好的界面。
其实，media type有很多种：

类型解释
all所有设备
braille盲文
embossed盲文打印
handheld手持设备
print文档打印或打印预览模式
projection项目演示，比如幻灯
screen彩色电脑屏幕
speech演讲
tty固定字母间距的网格的媒体，比如电传打字机
tv电视

media type的几种使用方法

我们可以通过几种方法来声明media type：

方法一

通过<link>标签声明媒体类型

<link href="style.css" media="screen print" ...
方法二

使用@import语句导入CSS文件

@import url("style.css") screen;
方法三

在<style>标签内使用@import

<style media="screen">
   @import url("style.css");
</style>
方法四

使用@media规则直接在CSS中定义媒体查询

@media screen {
   selector{rules}
}

当然，这几种方法各有利弊，而我们常用的是第一种和最后一种方法。

media type的浏览器支持

  • IE5.5/6/7不支持在@import中使用媒体类型media type，这限制了其在这些旧版本浏览器中的应用‌
  • Safari/firefox只支持all，screen，print三种类型(包括iphone)
  • Opera 完全支持
  • Opera mini  支持handheld，未指定则使用screen
  • Windows Mobile系统中的IE支持handheld，其它支持不明…

👋🏻 media query(媒体查询)

正如前文所说，media query是CSS 3对media type的增强，事实上我们可以将media query看成是media type+css属性判断。

请注意，下面提到的一些关键字等内容，有些是在media type中就可用的，但是放到media query中将能更好的发挥其作用，所以我就在适当的地方引入。

css属性判断可以只是某个CSS属性的名称，也可以是属性+值：

<link rel="stylesheet" media="screen and (animation)” herf=“...”

如果设备支持CSS动画，那么就能执行这个外部样式表文件。

@media screen and (max-width:240px) {
  body {
    font-size: medium;
  }
}

如果设备的浏览器的最大宽度是240px，则页面将使用中号字体。

PS：属性和值之间是用冒号连接的，而不是等号，这与正常的CSS的写法一致。

媒体查询语句结构

我们可以将上述语句称为媒体查询语句，这样也更能理解一些。从上面的例子也可以看出，媒体查询语句一般由媒体类型media type + 一到多个CSS属性判断组成，而多个CSS属性判断可以用关键字and连接：

and 操作符用来把多个媒体属性组合起来，合并到同一条媒体查询中。只有当每个属性都为
真时，这条查询的结果才为真。

@media screen and (min-width:1024px) and (max-width:1280px) {
    body{font-size:medium;}
}

其中media type是可选的，可以省略，默认是全部（all）。

在Media Query中如果没有明确指定Media Type，那么其默认为all。

@media (color:4){
    ...
}

属性值也可以为空 

@media (color){
    ...
}

当然，请注意，有属性值和没有属性值的情况代表的意义是不一样的，所以上面的这两条规则不是等价的。

如果你在未指定值的情况下创建媒体功能查询，则该样式将全部被应用，只要该查询的值不为零即可。例如，上面媒体查询不带值的属性color将适用于任何带有彩色屏幕的设备。

而针对多个媒体类型的CSS规则，可以用逗号来隔开：

@media handheld and (min-width:360px),screen and (min-width:480px){
    body{font-size:large;}
}
@media screen and (min-width:800px),print and (min-width:7in){
    body{font-size:small;}
}

media query(媒体查询)支持的属性

事实上，media query支持的属性和我们常用的CSS属性是不太一样的，它们是一些特别定义的条目：

属性值是否接受Min/Max前缀描述
color整数yes每种色彩的字节数
color-index整数yes色彩表中的色彩数
device-aspect-ratio整数/整数yes宽高比例
device-heightlengthyes设备屏幕的输出高度
device-widthlengthyes设备屏幕的输出宽度
grid整数no是否是基于格栅的设备
heightlengthyes渲染界面的高度
monochrome整数yes单色帧缓冲器中每像素字节
resolution分辨率(“dpi/dpcm”)yes分辨率
scanProgressive interlacednotv媒体类型的扫描方式
widthlengthyes渲染界面的宽度
orientationPortrait/landscapeno横屏或竖屏

从这些属性中我们可以看出，media query就是为了更好的适配各种设备而生的。

参考：media query 语法格式中的设备特性

浏览器的扩展

webkit是最早实现media query支持的浏览器内核之一，同时它也根据自己的需要搞了一些特有的扩展属性，最常用的有：

  • transform-2d 只用于支持使用 -webkit-transform实现2D变换的浏览器
  • transform-3d 只用于支持使用 -webkit-transform实现3D变换的浏览器
  • transition 只用于支持使用-webkit-transition实现变换效果的浏览器
  • animation 只用于支持使用-webkit-animation实现动画的浏览器

max与min

细心的同学可能已经注意到前面用到的这两个关键词，他们是要配合支持它们的属性使用的，它们的意义与我们常用的max-width和minwidth等类似。

各属性对max和min的支持在前面的属性列表中有给出，这里是一个详细的列表：

heightmin-heightmax-height
device-widthmin-device-widthmax-device-width
device-heightmin-device-heightmax-device-height
aspect-ratiomin-aspect-ratiomax-aspect-ratio
device-aspect-ratiomin-device-aspect-ratiomax-device-aspect-ratio
colormin-colormax-color
color-indexmin-color-indexmax-color-index
Monochromemin-monochromemax-monochrome
Resolutionmin-resolutionmax-resolution

not/only

媒体类型还支持 not和only关键字，它们可以用来更方便的定位某个媒体设备：

not：排除某种指定的媒体类型

not 操作符用来对一条媒体查询的结果进行取反，换句话来说就是用于排除符合表达式的设备。

@media not print and (color){
}
<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" />

only：指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器

only 操作符表示仅在媒体查询匹配成功的情况下应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用。

@media only screen and (color){
}

其实，only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。

其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式，因为其先读only而不是screen；另外不支持Media Qqueries的浏览器，不论是否支持only，样式都不会被采用。 

注意：若使用了 not 或 only 操作符，必须明确指定一个媒体类型。 

media query的浏览器支持

  • IE 9以下不支持
  • Firefox 3.5+(Gecko 1.9.1+)支持
  • Opera 9.5+完全支持
  • Opera mini 5支持
  • webkit 支持大部分属性(safari 3.0的内核版本是522，iPhone 1代的safari的内核版本是524，webkit大概从这个时候开始支持media query，但是对部分属性比如projection支持不好)
  • iPhone OS 3.2之前的版本不支持orientation属性，iPad和iPhone 4支持该属性。
  • iPhone Safari不支持orientation(iPhone 4支持)

现在我们可以梳理一下 media query 的使用流程：

👉🏻 准备工作1：设置Meta标签

首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

这段代码的几个参数解释：

  • width = device-width：宽度等于当前设备的宽度
  • initial-scale：初始的缩放比例（默认设置为1.0）  
  • minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）    
  • maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）   
  • user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

👉🏻 准备工作2：加载兼容文件JS

因为IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

👉🏻 准备工作3：设置IE渲染方式默认为最高(这部分可以选择添加也可以不添加)

现在有很多人的IE浏览器都升级到IE9以上了，所以这个时候就有又很多诡异的事情发生了，例如现在是IE9的浏览器，但是浏览器的文档模式却是IE8:

为了防止这种情况，我们需要下面这段代码来让IE的文档模式永远都是最新的：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

不过又有一个更给力的写法：

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

怎么这段代码后面加了一个chrome=1，这个Google Chrome Frame（谷歌内嵌浏览器框架GCF），如果有的用户电脑里面装了这个chrome的插件，就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算，无比给力，不过如果用户没装这个插件，那这段代码就会让IE以最高的文档模式展现效果。这段代码还是建议大家用上，不过不用也是可以的。

👉🏻 进入CSS3 Media

CSS3 media query的一般写法：

@media screen and (max-width: 960px){
    body{
        background: #000;
    }
}

其中css2的媒体查询：

<link rel="stylesheet" type="text/css" media="screen" href="style.css">

我们想知道移动设备是不是纵向放置的显示屏，可以这样写：

<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css">

我们把第一段的代码也用CSS2来实现，让它一样可以让页面宽度小于960的执行指定的样式文件：

<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">

但是上面这个方法，最大的弊端是他会增加页面http的请求次数，增加了页面负担，我们用CSS3把样式都写在一个文件里面才是最佳的方法。 

下面的写法是实现尺寸等于480px：

@media (max-device-height:480px) and (-webkit-min-device-pixel-ratio:2){
    //自己添加的样式
}

其中对于-webkit-min-device-pixel-ratio作如下解释：

-webkit-min-device-pixel-ratio为1.0：

  1. 所有非Retina的Mac
  2. 所有非Retina的iOS设备
  3. Acer Iconia A500
  4. Samsung Galaxy Tab 10.1
  5. Samsung Galaxy S

-webkit-min-device-pixel-ratio为1.3：

  1. Google Nexus 7

-webkit-min-device-pixel-ratio为1.5：

  1. Google Nexus S
  2. Samsung Galaxy S II
  3. HTC Desire
  4. HTC Desire HD
  5. HTC Incredible S
  6. HTC Velocity
  7. HTC Sensation

-webkit-min-device-pixel-ratio为2.0：

  1. iPhone 4
  2. iPhone 4S
  3. iPhone 5
  4. iPad (3rd generation)
  5. iPad 4
  6. 所有Retina displays 的MAC
  7. Google Galaxy Nexus
  8. Google Nexus 4
  9. Google Nexus 10
  10. Samsung Galaxy S III
  11. Samsung Galaxy Note II
  12. Sony Xperia S
  13. HTC One X  

番外：移动设备显示尺寸大全

@media screen and ( min-width: 212px){/*213px显示屏样式 LG Optimus One*/}
@media screen and ( min-width: 319px){/*320px显示屏样式 苹果4/4S/5C/5S黑莓Z30 */}
@media screen and ( min-width: 359px){/*360px显示屏样式 索尼Z1*/}
@media screen and ( min-width: 383px){/*384px显示屏样式 黑莓Z10 谷歌 Nexus 6 LG Optimus G*/}
@media screen and ( min-width: 399px){/*399px显示屏样式 三星galaxyNote*/}
@media screen and ( min-width: 414px){/*414px显示屏样式 苹果6plus*/}
@media screen and ( min-width: 423px){/*424px显示屏样式 LG 4X */}
@media screen and ( min-width: 479px){/*480px显示屏样式 索尼MT27i Xperia sola*/}
@media screen and ( min-width: 539px){/*640px显示屏样式 摩托罗拉Droid3/4/Razr Atrix 4g*/}
@media screen and ( min-width: 639px){/*640px显示屏样式*/}
@media screen and ( min-width: 640px){/*640px以上显示屏样式*/}

👋🏻 实例：

现在让我们来看一些典型的例子：

检测iPhone safari

<link media="only screen and (max-device-width: 480px)" href="style.css">

这是apple官方网站推荐的一种定位iPhone safari浏览器的方法，在iPhone一代和2代的时代，这条规则的确能够正确的判断出iPhone的浏览器，但是后来出现了Android的大屏幕手机，比如Nexus One和HTC desire，这条规则也能适配这些480px宽度的机器。

android手机的多分辨率问题

android系统的开放性导致其终端的多样性，那么对于各种各样的android手机来说，屏幕分辨率的差异导致针对android手机的页面重构复杂性增加，那么我们可以用media query为每种分辨率提供特定样式：

/* for 240 px width screen */
@media only screen and (max-device-width:240px){
    selector{
    }
}
 
/* for 360px width screen */
@media only screen and (min-device-width:241px) and (max-device-width:360px){
    selector{
    }
}
 
/* for 480 px width screen */
@media only screen (min-device-width:361px)and (max-device-width:480px){
    selector{
    }
}

device-aspect-ratio

语法：device-aspect-ratio：<ratio>

取值：<ratio>：指定比率

说明： 定义输出设备的屏幕可见宽度与高度的比率。如常讲的显示器屏幕比率：4/3, 16/9, 16/10

版本支持：IE9以及以上的浏览器开始支持

device-aspect-ratio可以用来适配特定屏幕长宽比的设备，这也是一个很有用的属性，比如，我们的页面想要对长宽比为4:3的普通屏幕定义一种样式，然后对于16:9和16:10的宽屏，定义另一种样式，比如自适应宽度和固定宽度：

/* for 4:3 screen */
@media only screen and (device-aspect-ratio:4/3){
    selector{
    }
}
 
/* for 16:9 and 16:10 screen */
@media only screen and (device-aspect-ratio:16/9) and (device-aspect-ratio:16/10){
    selector{
    }
}

示例：

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8" />
    <title>
      media features device-aspect-ratio_CSS参考手册_web前端开发参考手册系列
    </title>
    <style>
      @media screen and (device-aspect-ratio: 16/10) {
        body {
          color: #f00;
        }
      }
    </style>
  </head>

  <body>
    <div class="test">
      当你将输出设备屏幕分辨率为16:10时，本行文字显示为红色
    </div>
    <script></script>
  </body>
</html>

device-aspect-ratio特性接受min和max前缀，因此，可以派生出min-device-aspect-ratio和max-device-aspect-ratio两个媒体特性。

例如，判断屏幕横屏

@media screen and (min-aspect-ratio: 13/8) {
    ...
}

O’Reilly区分iPhone和iPad的方法

O’Reilly为其网站制作了针对iPad和iPhone设备的不同版本，从而提供最适合相关设备阅读的界面，他们的做法就是使用media query：

<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css">
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css">

小结：媒体查询的基本语法

媒体查询通过在CSS中使用@media规则来实现，可以包含一种或多种媒体特性，如宽度（width）、高度（height）或方向（orientation）。一个基本的媒体查询可能如下所示：

@media (media-type and|not|only (media-feature)) { /* 在这里编写相应的样式 */ }

其中，media-type表示媒体类型，如screen（屏幕）、print（打印）等；media-feature是媒体特性，如width（宽度）、height（高度）、orientation（方向）等。

‌媒体查询的逻辑操作符‌：

媒体查询支持逻辑操作符，如and、not、only，可以将多个媒体特性进行组合，以更精确地匹配目标设备。例如：

  • and：相当于“且”，表示多个条件同时满足。
  • not：相当于“非”，用于排除某个媒体类型。
  • only：用于指定某个特定的媒体类型，但通常可以省略。

‌示例代码‌：

1‌. 根据屏幕宽度调整样式‌：

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

 这条规则意味着当屏幕宽度小于或等于600像素时，背景颜色变为浅蓝色。

2‌. 根据屏幕方向调整样式‌：

@media screen and (orientation: landscape) {
  body {
    background-color: yellow;
  }
}

这条规则表示当屏幕为横向时，背景颜色变为黄色。

3‌. 根据设备类型调整样式‌：

@media print {
  body {
    background-color: white;
  }
}

这条规则表示在打印时，背景颜色变为白色。

参考资料

响应式之媒体查询技术_媒体查询-儒雅烤地瓜的CSDN博客

媒体查询支持ie浏览器各版本的写法_ie 媒体查询-CSDN博客

媒体查询(media)-CSDN博客 | 媒体查询(@media语法、案例)详解 - CSDN博客

媒体查询@media - 简书 | 响应式布局之媒体查询(media-queries) - 简书

JS 媒体查询的基本用法 _ 51CTO博客 | 媒体查询(media query) - 看云 | 媒体查询总结 - 博客园

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2186619.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

中国靠谱热门交友软件app排行榜前十名测评

中国靠谱热门交友软件app排行榜前十名测评

在信息飞速发展的时代&#xff0c;交友软件层出不穷。究竟哪些才是靠谱又热门的呢&#xff1f;这份交友软件 app 排行榜将为你揭晓&#xff0c;带你走进不同的社交天地&#xff0c;开启精彩交友之旅。 咕哇找搭子小程序&#xff1a;这是一个实名制的找搭子交友平台&#xff0c;…
阅读更多...
基于ssm的学生社团管理系统 社团分配系统 社团活动调度平台 学生社团管理 信息化社团管理开发项目 社团活动管理 社团预约系统（源码+文档+定制）

基于ssm的学生社团管理系统 社团分配系统 社团活动调度平台 学生社团管理 信息化社团管理开发项目 社团活动管理 社团预约系统（源码+文档+定制）

博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为云、阿里云、InfoQ等平台…
阅读更多...
时尚科技融合：Spring Boot下的“衣依”服装销售平台

时尚科技融合：Spring Boot下的“衣依”服装销售平台

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常适…
阅读更多...
虚拟机三种网络模式详解

虚拟机三种网络模式详解

在电脑里开一台虚拟机&#xff0c;是再常见不过的操作了。无论是用虚拟机玩只有旧版本系统能运行的游戏&#xff0c;还是用来学习Linux、跑跑应用程序都是很好的。而这其中&#xff0c;虚拟机网络是绝对绕不过去的。本篇文章通俗易懂的介绍了常见的虚拟网络提供的三种网络链接模…
阅读更多...
小红书AI配音神器：3秒变声百种风格

小红书AI配音神器：3秒变声百种风格

小红书AI配音神器&#xff1a;3秒变声百种风格 小红书推出黑科技FireRedTTS&#x1f3a4;&#xff0c;3秒克隆你的声音✨&#xff0c;支持搞怪、温柔等多种风格&#x1f389;&#xff01;只需几秒参考音频&#xff0c;轻松生成个性化语音&#xff0c;短视频配音神器&#x1f3…
阅读更多...
把白底照片变蓝色用什么软件免费 批量更换证件照底色怎么弄

把白底照片变蓝色用什么软件免费 批量更换证件照底色怎么弄

作为专业的修图师&#xff0c;有时候也会接手证件照修图和换底色工作&#xff0c;这种情况下&#xff0c;需要换底色的照片也许达到上百张。为了提高工作效率&#xff0c;一般需要批量快速修图&#xff0c;那么使用什么软件工具能够给各式不同的照片批量更换背景色呢&#xff1…
阅读更多...
Python并发编程(1)——Python并发编程的几种实现方式

Python并发编程(1)——Python并发编程的几种实现方式

更多精彩内容&#xff0c;请关注同名公众&#xff1a;一点sir&#xff08;alittle-sir&#xff09; Python 并发编程是指在 Python 中编写能够同时执行多个任务的程序。并发编程在任何一门语言当中都是比较难的&#xff0c;因为会涉及各种各样的问题&#xff0c;在Python当中也…
阅读更多...
【Unity AI】基于 WebSocket 和 讯飞星火大模型

【Unity AI】基于 WebSocket 和 讯飞星火大模型

文章目录 整体AIManagerDialogueManagerUIManagerModelManagerAudioManagerSaveManager 详细部分AIUI动画音频 整体 AIManager 负责配置讯飞的appId&#xff0c;生成鉴权URL&#xff0c;通过WebSocket向服务器请求并返回数据&#xff08;分为最终返回和流式返回&#xff09; …
阅读更多...
C++基础（6）——模板初阶

C++基础（6）——模板初阶

目录 1.泛型编程 2.函数模板 2.1函数模板的概念 2.2 函数模板格式 2.3 函数模板的原理 2.4 函数模板的实例化 2.4.1隐式实例化&#xff1a;让编译器根据实参推演模板参数的实际类型 2.4.2显式实例化&#xff1a;在函数名后的<>中指定模板参数的实际类型 2.5 模板…
阅读更多...
C++ WebDriver扩展

C++ WebDriver扩展

概述 WebDriver协议基于HTTP&#xff0c;使用JSON进行数据传输&#xff0c;定义了client与driver之间的通信标准。无论client的实现语言&#xff08;如Java或C#&#xff09;&#xff0c;都能通过协议中的endpoints准确指示driver执行各种操作&#xff0c;覆盖了Selenium的所有功…
阅读更多...
Redis入门第五步：Redis持久化

Redis入门第五步：Redis持久化

欢迎继续跟随《Redis新手指南&#xff1a;从入门到精通》专栏的步伐&#xff01;在本文中&#xff0c;我们将深入探讨Redis的持久化机制&#xff0c;这是确保数据在服务器重启后不会丢失的关键功能。了解如何配置和使用不同的持久化方法&#xff0c;对于构建可靠的应用程序至关…
阅读更多...
数据库（MySQL）：使用命令从零开始在Navicat创建一个数据库及其数据表（二）

数据库（MySQL）：使用命令从零开始在Navicat创建一个数据库及其数据表（二）

前言 在上一节中&#xff0c;主要介绍了 Navicat Premium 17 的使用以及创建一个基础的表格。当时只设置了给数据表补充字段&#xff0c;没有设置给数据表删除字段。现在补充一下。 ALTER TABLE student ADD test int(4); 给名为 student 的数据表添加 test 列&#xf…
阅读更多...
CI/CD中的自动化测试：在持续集成/持续部署流程中引入网页自动化测试

CI/CD中的自动化测试：在持续集成/持续部署流程中引入网页自动化测试

目录 引言 一、CI/CD流程概述 1.1 什么是CI/CD 1.2 CI/CD流程的主要阶段 1.3 CI/CD的优点 二、自动化测试基础 2.1 自动化测试概述 2.2 自动化测试的作用 2.3 自动化测试的主要类型 三、Web自动化测试工具 3.1 Selenium 3.1.1 Selenium WebDriver常用API 3.1.2 示例…
阅读更多...
ChatGPT+R语言助力生态环境数据统计分析！回归与混合效应模型、多元统计分析、结构方程模型（SEM）（lavaan）、Meta分析、贝叶斯回归等

ChatGPT+R语言助力生态环境数据统计分析！回归与混合效应模型、多元统计分析、结构方程模型（SEM）（lavaan）、Meta分析、贝叶斯回归等

从生态环境领域数据特点及统计方法介绍、GPT入门到GPT辅助R语言基础&#xff1b;数据准备及ggplot 绘图基础&#xff1b;回归和混合效应模型&#xff08;包含方差分析、协方差分析&#xff09;&#xff1b;多元统计分析&#xff08;排序、聚类和分组差异检验&#xff09;&#…
阅读更多...
AI 搜索引擎工具集合

AI 搜索引擎工具集合

&#x1f423;个人主页 可惜已不在 &#x1f424;这篇在这个专栏AI_可惜已不在的博客-CSDN博客 &#x1f425;有用的话就留下一个三连吧&#x1f63c; 目录 前言 AI 搜索引擎 前言 在信息爆炸的时代&#xff0c;A 搜索引擎应运而生。它以强大的人工智能技术为支撑&#xff0…
阅读更多...
攻防世界---＞

攻防世界---＞

做题笔记。 下载 查壳。 64ida打开。 先运行一下程序&#xff1a; 这里可以得到 输入为16个字符。超过会退出。 ida看&#xff1a; 查找字符&#xff1a; 最开始&#xff0c;做的时候&#xff0c;很懵&#xff0c;因为太多函数了。 静下心&#xff0c;只追踪我们需要的函数。…
阅读更多...
FreeRTOS篇13：延时函数

FreeRTOS篇13：延时函数

一.什么是延时函数&#xff1f; 二.延时函数分类 相对延时&#xff1a;vTaskDelay 绝对延时&#xff1a;vTaskDelayUntil 三.vTaskDelay 与 HAL_Delay 的区别 vTaskDelay 作用是让任务阻塞&#xff0c;任务阻塞后&#xff0c;RTOS系统调用其它处于就绪状态的优先级最高的…
阅读更多...
4S店4S店客户管理系统小程序(lw+演示+源码+运行）

4S店4S店客户管理系统小程序(lw+演示+源码+运行）

社会的发展和科学技术的进步&#xff0c;互联网技术越来越受欢迎。手机也逐渐受到广大人民群众的喜爱&#xff0c;也逐渐进入了每个用户的使用。手机具有便利性&#xff0c;速度快&#xff0c;效率高&#xff0c;成本低等优点。 因此&#xff0c;构建符合自己要求的操作系统是非…
阅读更多...
C++设计模式之观察者模式

C++设计模式之观察者模式

一、观察者模式概念 观察者模式（Observer Pattern）是一种行为设计模式，它定义了对象之间的一对多依赖关系，当一个对象状态发生变化时，所有依赖于它的对象都会得到通知并自动更新。这种模式通常用于实现分布式事件处理系统，当一个对象（称为“主题”或“发布者”）改变状…
阅读更多...
CMU 10423 Generative AI：lec14（Vision Language Model：CLIP、VQ-VAE）

CMU 10423 Generative AI：lec14（Vision Language Model：CLIP、VQ-VAE）

文章目录 1 概述2 CLIP (Used in GPT-V)3 VQ-VAE (Used in Gemini)**VQ-VAE 详细笔记****VQ-VAE 的模块组成与数据流** **1. 输入数据****2. 编码器&#xff08;Encoder&#xff09;****2.1 编码器的作用****2.2 数据流与维度变化****2.3 编码器输出** **3. 量化器&#xff08;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023