In diesem Artikel lernen Sie CSS-Medienabfragen (Media Quires) kennen, stellen die Syntaxdefinition von Medienabfragen im Detail vor, erlernen die Verwendungsfähigkeiten von Medienabfragen anhand von drei spezifischen Layoutbeispielen und führen in einige Kenntnisse über SCSS- und CSS-Attribute ein.
Sass: Sass Basics (sass-lang.com)
SCSS ist ein Präprozessor für CSS, der leistungsfähiger ist als normales CSS. [Empfohlenes Lernen: CSS-Video-Tutorial]
[Empfohlenes Lernen: „Vscode-Einführungs-Tutorial“]
npm install -g sass sass input.scss output.css ::单次编译 sass --watch scss/index.scss css/index.css ::多次编译 <link> ::写在HTML里
Es wurde abgelehnt, den Stil von „http://127.0.0.1:5500/CSS Media Queries/css/style.css“ anzuwenden, da sein MIME-Typ („text/html“) kein unterstützter Stylesheet-MIME-Typ und streng ist Die MIME-Prüfung ist aktiviert.
Lösung: 404 Nicht gefunden, die angegebene Dateiadresse ist falsch.
Das Seitenverhältnis des Bildes bleibt unverändert, zoomen Sie auf das Bild selbst, um es vollständig anzuzeigen, sodass der Container einen leeren Bereich hat
Das Bildseitenverhältnis bleibt unverändert, verteilt sich über die gesamte Breite und Höhe des Containers und der überschüssige Teil des Bildes wird abgeschnitten
Das Bildseitenverhältnis VerhältnisÄnderungen , auf die gleiche Größe skalieren wie die Breite und Höhe des Div.
Mit CSS-Medienabfragen können Sie responsive Websites für alle Bildschirmgrößen vom Desktop bis zum Mobilgerät erstellen.
@media screen and (max-width: 768px){
.container{
// 你的代码
}
}Medienabfragen beginnen mit der @media-Anweisung. Der Zweck besteht darin, dem Browser mitzuteilen, dass wir eine Medienabfrage angegeben haben. Art der Medienabfrage und Burger, das sind zwei Nachfragebedingungen.
@media screen
@media screen and (max-width : 768px) {
.container{
// 在screen媒体类型,屏幕宽度@media (min-width : 480px) and (max-width : 768px) {
.container{
// 在屏幕宽度为 480px 和 768px 之间这部分代码将被触发
}
}让我们试着写一个响应式页面 。新建main.js、media.html、style.scss，即时编译并watch style.scss。
// 当改变窗口大小、窗口加载时触发 screen
window.onresize = screen;
window.onload = screen;
// 一个函数获取当前屏幕宽度并将内容设置在ID为size的元素上
function screen() {
Width = window.innerWidth;
document.getElementById("size").innerHTML
= "Width : " + Width + " px"
}首先我们先建立一个media.html。然后导入刚刚写的main.js。导入style.css，是scss即时编译的css文件。
nbsp;html> <title></title> <meta> <meta> <link> <script></script> <div> <div> 程序员勇往直前，当导入main.js后，这句话会被替换掉 </div> </div>
SCSS创建四个变量分别保存十六进制RGB
$color-1 : #cdb4db ; // 手机端 $color-2 : #fff1e6 ; // 平板端 $color-3 : #52b788 ; // 笔记本端 $color-4 : #bee1e6 ; // 台式大屏
.container {
display: grid;
place-items: center;
background-color: $color-1;
height: 100vh;
}place-items 是 align-items 、 justify-items 的简写。
@media screen and (max-width : 500px) {
.container {
background-color: $color-1;
}
}$color-1 : #cdb4db; // 手机端
$color-2 : #fff1e6; // 平板端
$color-3 : #52b788; // 笔记本端
$color-4 : #bee1e6; // 台式大屏
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
body {
font-size: 35px;
font-family: sans-serif;
}
}
.container {
//元素居中
display: grid;
place-items: center;
background-color: $color-1;
height: 100vh;
}
#size {
position: absolute;
top: 60%;
left: 50%;
transform: translateX(-50%);
color: red;
font-size: 35px;
}
.text {
// 还没添加内容
}
.container {
background-color: white;
height: 100vh;
display: grid;
place-items: center;
}
@media screen and (max-width : 500px) {
.container {
background-color: $color-1;
}
}@media screen and (min-width : 500px){
.container{
background-color: $color-1;
}
}与max-width相反。宽度>=500px时代码生效。
根据四种类型，我们将有四个媒体查询。
给scss添加新的变量
$mobile : 576px; $tablet : 768px; $laptop : 992px; $desktop : 1200px;
在添加媒体查询时，需要遵循正确的数据，从最大宽度到最小宽度。
@media screen and (max-width: $desktop){
.container{
background-color: $color-4;
}
}
@media screen and (max-width: $laptop){
.container{
background-color: $color-3;
}
}
@media screen and (max-width: $tablet){
.container{
background-color: $color-2;
}
}
@media screen and (max-width : $mobile){
.container{
background-color: $color-1;
}
}现在改变屏幕宽度将显示不同的背景颜色。
nbsp;html> <title></title> <meta> <meta> <div> <div></div> <div>Lucyna Kushinada</div> <div> <div> Home </div> <div> Portfolio </div> <div> Contacts </div> </div> <div> <div> <div></div> <div> <div>Hello ?</div> <div>I'm <span>Lucy</span> </div> <div>A Netrunner From</div> <div>Night City</div> </div> </div> </div> <div> <div> <der vollst leitfaden zu css-medienabfragen qures> </der> </div> <div> <der vollst leitfaden zu css-medienabfragen qures> </der> </div> <div> <der vollst leitfaden zu css-medienabfragen qures> </der> </div> <div> <der vollst leitfaden zu css-medienabfragen qures> </der> </div> </div> </div>
scss需要编译成css再导入到html中，我们先修改全局默认样式。
* {
margin: 0px 5px;
padding: 0px;
box-sizing: border-box;
body {
font-family: sans-serif;
}
}如果你不会Flexbox属性请看 我的Vue之旅、01 深入Flexbox布局完全指南 - 小能日记
先把所有样式类与子级结构写好。嵌套在样式类中的&__logo是.header__logo的快捷方式
.header{
&__logo{}
&__menu{}
}
.main{
&__image{}
&__text{}
}
.footer{
[class ^="footer__"]{}
}然后添加样式，.container采用flex布局，按列布局。.header__menu也采用flex布局的方式。
.container{
height: 100vh;
display: flex;
flex-direction: column;
}
.header{
display: flex;
flex-direction: row;
border: 2px solid red;
height: 10%;
&__logo{}
&__menu{
display: flex;
flex-direction: row;
}
}
.main{
border: 2px solid black;
height: 80%;
}
.footer{
border: 2px solid green;
height: 10%;
}我们修改 .header
.header {
display: flex;
flex-direction: row;
border: 2px solid red;
height: 10%;
// 元素垂直居中
align-items: center;
// 元素均匀分布
justify-content: space-between;
&__logo {
font-size: 4vw;
}
&__menu {
display: flex;
flex-direction: row;
font-size: 2.5vw;
// 让各个元素产生一定间隔距离
gap: 15px;
}
}再修改 .main
.main {
// 图片和文字块排版会采用行形式
display: flex;
flex-direction: row;
border: 2px solid black;
height: 80%;
&__image {
// 添加图片
background-image: url("./images/Portrait.jpg");
// 宽度为main宽度的50%
width: 50%;
// 缩放至图片自身能完全显示出来，足够大的容器会有留白区域
background-size: contain;
// 不重复平铺图片
background-repeat: no-repeat;
background-position: left center;
}
&__text {
// 宽度为main宽度的50%
width: 50%;
}
}给文字加样式
&__text {
// 宽度为main一半宽度
width: 50%;
// 让每行字按列排列
display: flex;
flex-direction: column;
// 居中
justify-content: center;
align-items: center;
gap: 15px;
&-1 {
font-size: 10vw;
}
&-2,
&-3,
&-4 {
font-size: 5vw;
}
}
span {
color: red;
}
}接下来给图片添加样式
.footer{
// 类匹配器,能够选择一个类的集合,如style class 为footer__1、footer__2
[class^="footer__"] {
Der vollständige Leitfaden zu CSS-Medienabfragen (Media Qures) {
width: 5.3vw;
}
}
}
.footer{
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 20px;
margin-right: 10%;
}我们还需要添加媒体查询
@media (max-width: 650px) {
.header {
justify-content: center;
&__logo {
font-size: 40px;
}
// 隐藏menu
&__menu {
display: none;
}
}
.main {
flex-direction: column;
justify-content: center;
align-items: center;
&__image {
// 图片大小
height: 200px;
width: 200px;
background-size: 100%;
// 圆形图片
border-radius: 100%;
background-position: center;
margin-bottom: 5%;
}
// 修改字体样式
&__text {
width: 100%;
&-1 {
// 让hello不显示
display: none;
}
&-2,
&-3,
&-4 {
font-size: 30px;
}
}
}
.footer {
// 元素按中心对齐
justify-content: center;
margin: 0px;
// gap: 20px; 注意这个没有改,默认还是生效的
[class^="footer__"] {
// 重新修改图片大小适应移动端
Der vollständige Leitfaden zu CSS-Medienabfragen (Media Qures) {
width: 45px;
height: 45px;
}
}
}
}* {
margin: 0px 5px;
padding: 0px;
box-sizing: border-box;
body {
font-family: sans-serif;
}
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
}
.header {
display: flex;
flex-direction: row;
height: 10%;
// 元素垂直居中
align-items: center;
// 元素均匀分布
justify-content: space-between;
&__logo {
font-size: 4vw;
}
&__menu {
display: flex;
flex-direction: row;
font-size: 2.5vw;
// 让各个元素产生一定间隔距离
gap: 15px;
}
}
.main {
// 图片和文字块排版会采用行形式
display: flex;
flex-direction: row;
height: 80%;
&__image {
// 添加图片
background-image: url("./images/Portrait.png");
// 宽度为main宽度的50%
width: 50%;
// 缩放至图片自身能完全显示出来，足够大的容器会有留白区域
background-size: contain;
// 不重复平铺图片
background-repeat: no-repeat;
background-position: left center;
}
&__text {
// 宽度为main一半宽度
width: 50%;
// 让每行字按列排列
display: flex;
flex-direction: column;
// 居中
justify-content: center;
align-items: center;
gap: 15px;
&-1 {
font-size: 6vw;
}
&-2,
&-3,
&-4 {
font-size: 5vw;
}
}
span {
color: red;
}
}
.footer {
[class^="footer__"] {
Der vollständige Leitfaden zu CSS-Medienabfragen (Media Qures) {
width: 5.3vw;
}
}
}
.footer {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 20px;
margin-right: 10%;
[class^="footer__"] {
Der vollständige Leitfaden zu CSS-Medienabfragen (Media Qures) {
width: 5.3vw;
}
}
}
@media (max-width: 650px) {
.header {
justify-content: center;
&__logo {
font-size: 40px;
}
// 隐藏menu
&__menu {
display: none;
}
}
.main {
flex-direction: column;
justify-content: center;
align-items: center;
&__image {
// 图片大小
height: 200px;
width: 200px;
background-size: 100%;
// 圆形图片
border-radius: 100%;
background-position: center;
margin-bottom: 5%;
}
// 修改字体样式
&__text {
width: 100%;
&-1 {
// 让hello不显示
display: none;
}
&-2,
&-3,
&-4 {
font-size: 30px;
}
}
}
.footer {
// 元素按中心对齐
justify-content: center;
margin: 0px;
// gap: 20px; 注意这个没有改,默认还是生效的
[class^="footer__"] {
// 重新修改图片大小适应移动端
Der vollständige Leitfaden zu CSS-Medienabfragen (Media Qures) {
width: 45px;
height: 45px;
}
}
}
}我们会用到第一个例子中的 main.js 函数来显示窗口宽度。
nbsp;html> <title></title> <meta> <meta> <link> <script></script> <div> <div> <div>A</div> <div>B</div> <div>C</div> </div> <div> <div>D</div> <div>E</div> <div>F</div> </div> <div> <div>G</div> <div>H</div> <div>I</div> </div> </div> <div></div>
* {
margin: 0px;
padding: 0px 10px;
box-sizing: border-box;
body {
font-family: sans-serif;
font-size: 55px;
}
}
#size {
position: absolute;
// 设置为绝对定位
top: 60%;
left: 50%;
// 水平居中
transform: translateX(-50%);
color: red;
font-size: 40px;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
gap: 30px;
}
[class ^="row-"] {
display: flex;
flex-direction: row;
gap: 30px;
}
[class ^="box-"] {
background-color: #c4c4c4;
border: 2px solid black;
width: (100%)/3;
// 设置为当前视窗大小的三分之一
height: (100vh)/3;
// 元素居中
display: grid;
place-items: center;
}
@media (max-width: 650px) {
[class ^="row-"] {
flex-direction: column;
}
[class ^="box-"] {
width: 100%;
}
}Das obige ist der detaillierte Inhalt vonDer vollständige Leitfaden zu CSS-Medienabfragen (Media Qures). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
