CSS 미디어 쿼리에 대한 전체 가이드(Media Qures)
- 青灯夜游앞으로
- 2022-09-29 20:41:132633검색
이 글에서는 CSS 미디어 쿼리(Media Quires)를 배우고, 미디어 쿼리의 구문 정의를 자세히 소개하고, 세 가지 특정 레이아웃 예를 통해 미디어 쿼리의 사용 기술을 배우고, 일부 scss 및 css 속성 지식을 소개합니다.
SCSS란 무엇입니까
Sass: Sass Basics (sass-lang.com)
SCSS는 일반 CSS보다 더 강력한 CSS용 전처리기입니다. [추천 학습: css 비디오 튜토리얼]
- 선택기를 중첩하여 코드를 더 잘 유지하고 관리할 수 있습니다.
- 쉽게 재사용할 수 있도록 다양한 값을 변수에 저장할 수 있습니다.
- 믹스인을 사용하면 쉽게 재사용할 수 있도록 중복 코드를 혼합할 수 있습니다.
scss import html
Method one VSCODE 플러그인
[권장 학습: "vscode 입문 튜토리얼"]
Method two 매뉴얼 컴파일
npm install -g sass sass input.scss output.css ::单次编译 sass --watch scss/index.scss css/index.css ::多次编译 <link> ::写在HTML里
가능한 문제
MIME 유형('text/html')이 지원되는 스타일시트 MIME 유형이 아니고 엄격하기 때문에 'http://127.0.0.1:5500/CSS Media Queries/css/style.css'의 스타일 적용을 거부했습니다. MIME 확인이 활성화되었습니다.
해결 방법: 404 찾을 수 없음, 제공된 파일 주소가 잘못되었습니다.
CSS 속성 background-size
contain;
이미지 가로 세로 비율은 변경되지 않습니다. 완전히 표시되도록 이미지 자체를 확대하면 컨테이너에 빈 영역이 생깁니다
이미지 가로 세로 비율은 변경되지 않고 컨테이너의 전체 너비와 높이로 퍼지며, 이미지의 초과 부분은 잘립니다.
이미지 가로 세로 비율 ratiochanges
, div의 너비 및 높이와 동일한 크기로 조정됩니다.
CSS 미디어 쿼리를 사용하면 데스크톱에서 모바일까지 모든 화면 크기에 맞는 반응형 웹사이트를 만들 수 있습니다.
정의
@media screen and (max-width: 768px){
.container{
// 你的代码
}
}
- 미디어 쿼리 유형, 화면
- 가린 화면 범위, 최대 너비: 768px
- 스타일 변경, 쓰기 스타일은 여기
- 자세히
모든 미디어 장치
- 인쇄 인쇄 장치
- 스크린 컴퓨터, 태블릿, 휴대폰 화면
- 음성 스크린 리더
@media screen
@media screen and (max-width : 768px) {
.container{
// 在screen媒体类型,屏幕宽度쿼리 유형 건너뛰기<p></p>min-width 및 max-width를 사용하여 미디어 쿼리 유형을 건너뛸 수 있습니다. <h3 id="跳过查询类型"><pre class="brush:php;toolbar:false">@media (min-width : 480px) and (max-width : 768px) {
.container{
// 在屏幕宽度为 480px 和 768px 之间这部分代码将被触发
}
}여러 조건 요구 사항조건이 3보다 크거나 같으면 쉼표를 사용하여 연결할 수 있습니다. @media screen, (min-width : 480px) and (max-width : 768px) {
.container{
// 在screen媒体类型,屏幕宽度为 480px 和 768px 之间这部分代码将被触发
}
}
화면 중단점화면 중단점은 범위 내의 화면 너비 범주를 지정하는 데 사용됩니다. 현재 표준 화면 중단점이 없습니다. 케이스 코드 사용 및 다운로드 방법 알아보기
学习使用①初入响应式
让我们试着写一个响应式页面 。新建main.js、media.html、style.scss，即时编译并watch style.scss。
main.js
// 当改变窗口大小、窗口加载时触发 screen
window.onresize = screen;
window.onload = screen;
// 一个函数获取当前屏幕宽度并将内容设置在ID为size的元素上
function screen() {
Width = window.innerWidth;
document.getElementById("size").innerHTML
= "Width : " + Width + " px"
}media.html
首先我们先建立一个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元素
.container {
display: grid;
place-items: center;
background-color: $color-1;
height: 100vh;
}place-items 是 align-items 、 justify-items 的简写。
max-width 媒体查询
@media screen and (max-width : 500px) {
.container {
background-color: $color-1;
}
}?当前完整scss代码
$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;
}
}min-width 媒体查询
@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;
}
}现在改变屏幕宽度将显示不同的背景颜色。
学习使用②响应式个人介绍
profile.html
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> <css qures> </css> </div> <div> <css qures> </css> </div> <div> <css qures> </css> </div> <div> <css qures> </css> </div> </div> </div>
profile.scss
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__"] {
CSS 미디어 쿼리에 대한 전체 가이드(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__"] {
// 重新修改图片大小适应移动端
CSS 미디어 쿼리에 대한 전체 가이드(Media Qures) {
width: 45px;
height: 45px;
}
}
}
}?当前完整scss代码
* {
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__"] {
CSS 미디어 쿼리에 대한 전체 가이드(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__"] {
CSS 미디어 쿼리에 대한 전체 가이드(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__"] {
// 重新修改图片大小适应移动端
CSS 미디어 쿼리에 대한 전체 가이드(Media Qures) {
width: 45px;
height: 45px;
}
}
}
}学习使用③卡片布局
我们会用到第一个例子中的 main.js 函数来显示窗口宽度。
card.html
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>
card.scss
* {
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%;
}
}위 내용은 CSS 미디어 쿼리에 대한 전체 가이드(Media Qures)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 cnblogs.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제