我的Vue之旅、04 CSS媒体查询完全指南（Media Quires） |
您所在的位置：网站首页 › 查一下花瓶的样式 › 我的Vue之旅、04 CSS媒体查询完全指南（Media Quires） |
我的Vue之旅、04 CSS媒体查询完全指南（Media Quires）
|
什么是SCSS
Sass: Sass Basics (sass-lang.com) SCSS 是 CSS 的预处理器，它比常规 CSS 更强大。 可以嵌套选择器，更好维护、管理代码。 可以将各种值存储到变量中，方便复用。 可以使用 Mixins 混合重复代码，方便复用。 scss导入html 方法一 VSCODE 插件
Refused to apply style from 'http://127.0.0.1:5500/CSS媒体查询/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. 解决方法： 404 Not Found，提供的文件地址有误。 CSS属性 background-size contain;图片宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域
图片宽高比不变，铺满整个容器的宽高，而图片多出的部分则会被截掉
图片宽高比改变，缩放至和div宽高一致的尺寸。
CSS媒体查询允许您创建从桌面到移动设备的所有屏幕尺寸的响应式网站。
媒体查询以@media声明开头。目的是告诉浏览器我们已指定媒体查询。 媒体查询类型 all 所有媒体设备 print 打印设备 screen 电脑、平板、手机屏幕 speech 屏幕阅读器 @media screen 为什么要加and在肯德基买东西，你想要炸鸡和汉堡，这是两个需求条件。 现在你已经确定了一个条件，即 screen 媒体查询类型。你要指定其他条件，比如想要规定在某一个屏幕范围内，那么就可以用 and 来连接。 @media screen and (max-width : 768px) { .container{ // 在screen媒体类型,屏幕宽度=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.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__"] { img { 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__"] { // 重新修改图片大小适应移动端 img { 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__"] { img { width: 5.3vw; } } } .footer { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 20px; margin-right: 10%; [class^="footer__"] { img { 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__"] { // 重新修改图片大小适应移动端 img { width: 45px; height: 45px; } } } }
我们会用到第一个例子中的 main.js 函数来显示窗口宽度。 card.html A B C D E F G H I
|
【本文地址】
今日新闻 |
推荐新闻 |