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

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-widthminwidth等类似。

各属性对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特性接受minmax前缀,因此,可以派生出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(方向)等。

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

媒体查询支持逻辑操作符,如andnotonly,可以将多个媒体特性进行组合,以更精确地匹配目标设备。例如:

  • 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.rhkb.cn/news/439866.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何在算家云搭建CosyVoice(文生音频)

一、CosyVoice简介 CosyVoice 是一个开源的超强 TTS&#xff08;‌文本转语音&#xff09;‌模型&#xff0c;‌它支持多种生成模式&#xff0c;‌具有极强的语音自然可控性。‌ 具有以下特点&#xff1a; 语音合成 &#xff1a;能够将文本转换为自然流畅的语音输出。多语种…

CSS 盒子属性

1. 盒子模型组成 1.1 边框属性 1.1.1 四边分开写 1.1.2 合并线框 1.1.3 边框影响盒子大小 1.2 内边距 注意&#xff1a; 1.3 外边距 1.3.1 嵌套块元素垂直外边距的塌陷 1.4 清除内外边距 1.5 总结

k8s-集群部署1

k8s-集群部署1 一、基础环境准备二、docker环境准备三、k8s集群部署1.kubeadm创建集群2.使用kubeadm引导集群 总结 一、基础环境准备 首先&#xff0c;需要准备三个服务器实例&#xff0c;这里我使用了阿里云创建了三个实例&#xff0c;如果不想花钱&#xff0c;也可以在VM上创…

多输入多输出预测 | NGO-BP北方苍鹰算法优化BP神经网络多输入多输出预测(Matlab)

多输入多输出预测 | NGO-BP北方苍鹰算法优化BP神经网络多输入多输出预测&#xff08;Matlab&#xff09; 目录 多输入多输出预测 | NGO-BP北方苍鹰算法优化BP神经网络多输入多输出预测&#xff08;Matlab&#xff09;预测效果基本介绍程序设计往期精彩参考资料 预测效果 基本介…

SCUC博客摘录「 储能参与电能市场联合出清:SCUC和SCED模型应用于辅助服务调频市场(IEEE39节点系统)」2024年10月6日

2.1 SCUC模型在本方法中&#xff0c;首先利用SCUC模型确定机组出力计划和储能充放电计划。SCUC模型是电力系统经济调度的重要工具&#xff0c;通过优化发电机组出力计划和调度&#xff0c;实现电力系统的经济性和可靠性。在考虑储能的情况下&#xff0c;SCUC模型需要考虑储能的…

一个真实可用的登录界面!

需要工具&#xff1a; MySQL数据库、vscode上的php插件PHP Server等 项目结构&#xff1a; login | --backend | --database.sql |--login.php |--welcome.php |--index.html |--script.js |--style.css 项目开展 index.html&#xff1a; 首先需要一个静态网页&#x…

机器学习(5):机器学习项目步骤(二)——收集数据与预处理

1. 数据收集与预处理的任务&#xff1f; 为机器学习模型提供好的“燃料” 2. 数据收集与预处理的分步骤&#xff1f; 收集数据-->数据可视化-->数据清洗-->特征工程-->构建特征集和数据集-->拆分数据集、验证集和测试集 3. 数据可视化工作&#xff1f; a. 作用&…

基于SpringBoot+Vue的在线投票系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…

JDBC 概述

JDBC 概述 JDBC的基本概念与功能JDBC的工作原理JDBC的组件与类JDBC的类型与特性JDBC的应用场景 JDBC&#xff08;Java Database Connectivity&#xff09;即Java数据库连接&#xff0c;是Java编程语言用于与数据库进行连接和操作的API&#xff08;应用程序编程接口&#xff09;…

C++面试速通宝典——7

150. 数据库连接池的作用 数据库连接池的作用包括以下几个方面&#xff1a; 资源重用&#xff1a;连接池允许多个客户端共享有限的数据库连接&#xff0c;减少频繁创建和销毁连接的开销&#xff0c;从而提高资源的利用率。 统一的连接管理&#xff1a;连接池集中管理数据库连…

python交互式命令时如何清除

在交互模式中使用Python&#xff0c;如果要清屏&#xff0c;可以import os&#xff0c;通过os.system()来调用系统命令clear或者cls来实现清屏。 [python] view plain copy print? >>> import os >>> os.system(clear) 但是此时shell中的状态是&#xff1a;…

Java 面向对象设计一口气讲完![]~( ̄▽ ̄)~*(上)

目录 Java 类实例 Java面向对象设计 - Java类实例 null引用类型 访问类的字段的点表示法 字段的默认初始化 Java 访问级别 Java面向对象设计 - Java访问级别 Java 导入 Java面向对象设计 - Java导入 单类型导入声明 按需导入声明 静态导入声明 例子 Java 方法 J…

msvcp140.dll丢失的解决方法,详细解读6种解决方法

在使用电脑时&#xff0c;我们可能会遇到提示缺少msvcp140.dll的错误信息。这个提示意味着我们的电脑中缺少MSVCP140.dll这个文件&#xff0c;它是某些程序运行所必需的。如果我们遇到这个问题&#xff0c;应该如何解决呢&#xff1f;本文将详细解析如何解决msvcp140.dll丢失的…

Study-Oracle-10-ORALCE19C-RAC集群搭建

一路走来,所有遇到的人,帮助过我的、伤害过我的都是朋友,没有一个是敌人。 ORACLE --RAC 搭建理念:准备工作要仔细,每个参数及配置都到仔细核对。环境准备完成后,剩下的就是图像化操作,没啥难度,所以图形化操作偷懒不续写了。 一、硬件信息及配套软件 1、硬件设置 RAC…

springboot系列--web相关知识探索二

一、映射 指的是与请求处理方法关联的URL路径&#xff0c;通过在Spring MVC的控制器类&#xff08;使用RestController注解修饰的类&#xff09;上使用注解&#xff08;如 RequestMapping、GetMapping&#xff09;来指定请求映射路径&#xff0c;可以将不同的HTTP请求映射到相应…

【React】事件机制

事件机制 react 基于浏览器的事件机制自身实现了一套事件机制&#xff0c;称为合成事件。比如&#xff1a;onclick -> onClick 获取原生事件&#xff1a;e.nativeEvent onClick 并不会将事件代理函数绑定到真实的 DOM节点上&#xff0c;而是将所有的事件绑定到结构的最外层…

Mysql数据库约束

前言 数据库是用户数据的最后一道保护屏障&#xff0c;所以数据库存在大量的约束&#xff0c;保证数据库中数据的完整性和可预期性。数据库中&#xff0c;数据类型本身就是一种约束&#xff0c;除此在外还有&#xff1a; null/not null&#xff0c;default&#xff0c; comment…

【大模型 AI 学习】大模型 AI 部署硬件配置方案(本地硬件配置 | 在线GPU)

最近想部署一个开源深度学习项目&#xff0c;但是小编的笔记本电脑是8G的集成显存&#xff0c;且没有GPU&#xff0c;性能肯定是不够的。于是小编在小po站上粗浅了解了一下当前: 1. 大模型 AI本地硬件配置和 2. 云上申请GPU算力的两种方式。简单记录一下&#xff1a; 参考视频…

openEuler 24.03 (LTS) 部署 K8s(v1.31.1) 高可用集群(Kubespray Ansible 方式)

写在前面 实验需要一个 CNI 为 flannel 的 K8s 集群之前有一个 calico 的版本有些旧了,所以国庆部署了一个v1.31.1 版本 3 * master 5 * work时间关系直接用的工具 kubespray博文内容为部署过程以及一些躺坑分享需要科学上网理解不足小伙伴帮忙指正 &#x1f603;,生活加油 99…

Android2024.2.1升级错误

提示 Gradle 版本不兼容&#xff0c;升级后就报错了 。 1.gradle安装包镜像 distributionBaseGRADLE_USER_HOME distributionPathwrapper/dists //distributionUrlhttps\://services.gradle.org/distributions/gradle-8.5-bin.zip distributionUrlhttps://mirrors.cloud.tencen…