Cpp五条

这个屌丝很懒，什么也没留下！

热门标签

前端之媒体查询第十一天

作者：Cpp五条 | 2024-03-29 10:12:41

踩

前端之媒体查询第十一天

媒体查询是一种CSS技术，用于根据用户设备的特征（如屏幕宽度、分辨率、设备类型等）来应用不同的样式规则。通过媒体查询，可以确保网站在不同设备上呈现出最佳的布局和样式，提供更好的用户体验。

媒体查询语法使用@media规则。下面是一个简单的媒体查询的示例：

@media screen and (max-width: 600px) { /* 在屏幕宽度小于等于600像素时应用的样式 */ body { background-color: lightblue; } }

上述代码表示在屏幕宽度小于等于600像素时应用样式规则。可以通过修改媒体查询的条件，如屏幕宽度、设备类型、屏幕方向等，来应用不同的样式。

媒体查询还可以使用逻辑运算符进行组合，以满足更复杂的条件。例如：

@media screen and (min-width: 600px) and (max-width: 1200px) { /* 在屏幕宽度大于等于600像素且小于等于1200像素时应用的样式 */ body { font-size: 16px; } }

通过媒体查询，可以针对不同的设备和屏幕尺寸提供不同的样式，从而实现响应式设计和适应性布局。这有助于提升网站的可用性和用户体验，并确保在各种设备上都能良好地展示。

01-rem单位

rem 是CSS中的一种长度单位，表示相对于根元素（HTML文档的<html>元素）的字体大小。例如：


<!DOCTYPE html>
<html>
<head>
<style>
  html {
    font-size: 16px;
  }
  p {
    font-size: 2rem; /* 2倍根元素的字体大小 */
  }
</style>
</head>
<body>
 
<p>这是一个段落。</p>
 
</body>
</html>

在这个例子中，根元素的字体大小为16px，而<p>元素的字体大小设置为2rem，即2倍根元素的字体大小，即32px。

02-媒体查询

媒体查询是CSS3中的一种技术，用于根据不同的设备特性（如屏幕尺寸、分辨率等）应用不同的样式。例如：


<!DOCTYPE html>
<html>
<head>
<style>
  /* 设置整个页面背景颜色为浅蓝色 */
  body {
    background-color: lightblue;
  }
 
  /* 使用媒体查询针对屏幕宽度小于或等于600px的设备进行样式重写 */
  @media screen and (max-width: 600px) {
    /* 当屏幕宽度小于或等于600px时，将整个页面的背景颜色更改为黄色 */
    body {
      background-color: yellow;
    }
  }
</style>
</head>
<body>
 
<!-- 页面标题 -->
<h1>这是一个标题</h1>
 
<!-- 页面中的一个段落 -->
<p>这是一个段落。</p>
 
</body>
</html>

在这个例子中，当屏幕宽度小于或等于600px时，背景颜色将变为黄色；否则，背景颜色为浅蓝色

03-媒体查询案例修改背景颜色

好的，下面是一个使用媒体查询修改背景颜色的例子：


    
<!DOCTYPE html>
<html>
<head>
<style>
  body {
    background-color: lightblue; /* 设置背景颜色为浅蓝色 */
  }
 
  @media screen and (max-width: 600px) {
    body {
      background-color: yellow; /* 当屏幕宽度小于或等于600px时，设置背景颜色为黄色 */
    }
  }
</style>
</head>
<body>
 
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
 
</body>
</html>

在这个例子中，当屏幕宽度小于或等于600px时，背景颜色将变为黄色；否则，背景颜色为浅蓝色。

04-媒体查询+rem实现元素动态变化

在CSS中，我们可以结合媒体查询（Media Queries）和相对单位rem来实现元素尺寸随着浏览器视口大小动态变化。下面是一个简单的例子：


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  /* 设置根元素字体大小为16px，以便后续计算rem */
  html {
    font-size: 16px;
  }
 
  .container {
    width: 80%;
    margin: auto;
    background-color: lightblue;
    padding: 2rem;
  }
 
  /* 媒体查询：当屏幕宽度小于等于600px时，调整html的font-size，进而影响所有使用rem单位的元素尺寸 */
  @media screen and (max-width: 600px) {
    html {
      font-size: 14px; /* 将字体大小减小至14px，这样容器的padding也会相应减小 */
    }
  }
 
  .box {
    width: 30rem; /* 使用rem作为宽度单位 */
    height: 15rem;
    background-color: tomato;
    margin-bottom: 2rem;
  }
</style>
</head>
<body>
 
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
</div>
 
</body>
</html>

在这个例子中，.container 和 .box 的尺寸都采用了 rem 单位，并且通过设置 html 根元素的基础字体大小（初始值为16px），使得页面中的元素能根据基础字体大小的变化而动态调整自身的尺寸。

当屏幕宽度小于等于600px时，媒体查询生效，将根元素的字体大小调整为14px，这会导致所有使用 rem 作为单位的元素尺寸按比例缩小，从而实现响应式布局效果。

05-引入资源


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 当我们屏幕大于等于 640px以上的，我们让div 一行显示2个 */
        /* 当我们屏幕小于640 我们让div一行显示一个 */
        /* 一个建议： 我们媒体查询最好的方法是从小到大 */
        /* 引入资源就是 针对于不同的屏幕尺寸 调用不同的css文件 */
    </style>
    <link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
    <link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">
</head>
 
<body>
    <div>1</div>
    <div>2</div>
</body>
 
</html>

06-CSS的缺点

CSS的一个主要缺点是其固有的层叠和继承机制可能导致样式冲突和难以调试。例如：


<style>
  .parent {
    color: blue;
  }
 
  .child {
    color: red; /* 这个样式可能与父元素的样式发生冲突 */
  }
</style>
 
<body>
  <div class="parent">
    <p>我是蓝色文本（来自父元素样式）</p>
    <p class="child">我希望我是红色文本，但我也可能是蓝色（取决于CSS优先级）</p>
  </div>
</body>

在这个例子中，.child 类旨在将文本颜色设置为红色，但如果 .parent 中的颜色声明具有更高的优先级或者没有其他更高优先级的规则覆盖它，则子元素中的文本可能会保持蓝色，而不是预期的红色。解决这种问题通常需要了解并控制CSS选择器的优先级，或使用更具体的选择器来明确指定样式。

难以调试的布局问题

另一个例子是复杂的布局问题，尤其是涉及到盒模型、浮动、定位以及响应式设计时：


<style>
  .box {
    width: 50%;
    float: left; /* 浮动可能导致意外的布局问题 */
  }
  
  .sidebar {
    width: 30%;
    padding: 20px; /* 在content-box模式下，padding会增加总宽度，可能导致盒子溢出 */
  }
</style>
 
<body>
  <div class="container">
    <div class="box">内容区域</div>
    <div class="sidebar">侧边栏</div>
  </div>
</body>

在上述代码中，如果未正确处理浮动带来的影响，可能会导致容器内的元素排列不理想。另外，如果不使用 box-sizing 属性来改变盒模型计算方式，给元素添加内边距（如.sidebar中的padding）时，浏览器默认的内容区域加上内边距会导致实际占用空间超出预期的50%+30%，从而引发布局错乱。这些问题有时很难通过直观检查发现，并且需要深入理解CSS的工作原理才能有效调试和修复。

07-less的使用

Less 是一种 CSS 预处理器，它允许您使用变量、嵌套规则、混合（Mixins）、函数等更高级的特性来编写和组织样式代码。下面是一个简单的 Less 例子：


// 定义一个基础样式
.body {
    font-family: Arial, sans-serif;
    color: #333;
 
    // 嵌套一个子元素选择器
    h1 {
        font-size: 2em;
        line-height: 1.5;
        
        // 再次嵌套一个伪类选择器
        &:hover {
            color: #0099cc;
        }
    }
 
    // 嵌套一个类选择器
    .container {
        width: 80%;
        margin: 0 auto;
        
        // 嵌套一个 ID 选择器
        #main-content {
            padding: 20px;
            background-color: #f7f7f7;
        }
    }
}
 
// 当 Less 被编译为 CSS 后，上述代码将转换为类似以下的 CSS：
.body {
    font-family: Arial, sans-serif;
    color: #333;
}
.body h1 {
    font-size: 2em;
    line-height: 1.5;
}
.body h1:hover {
    color: #0099cc;
}
.body .container {
    width: 80%;
    margin: 0 auto;
}
.body .container #main-content {
    padding: 20px;
    background-color: #f7f7f7;
}

在这个例子中，我们首先定义了两个颜色变量 @primary-color 和 @secondary-color，然后在各个类中使用这些变量以保持颜色的一致性。同时，我们创建了一个名为 .border-radius 的 Mixin，用于添加圆角边框，并且可以传递自定义的半径值。最后，在.button 类中调用了这个 Mixin 来应用样式。当 Less 文件被编译为 CSS 时，所有这些变量和 mixin 都会被展开并替换为实际的 CSS 样式。

08-less嵌套

Less 提供了嵌套（Nesting）的特性，允许我们将相关的 CSS 选择器按照层级关系进行组织，提高代码的可读性和管理性。以下是一个 Less 嵌套的例子：


// 定义一个基础样式
.body {
    font-family: Arial, sans-serif;
    color: #333;
 
    // 嵌套一个子元素选择器
    h1 {
        font-size: 2em;
        line-height: 1.5;
        
        // 再次嵌套一个伪类选择器
        &:hover {
            color: #0099cc;
        }
    }
 
    // 嵌套一个类选择器
    .container {
        width: 80%;
        margin: 0 auto;
        
        // 嵌套一个 ID 选择器
        #main-content {
            padding: 20px;
            background-color: #f7f7f7;
        }
    }
}
 
// 当 Less 被编译为 CSS 后，上述代码将转换为类似以下的 CSS：
.body {
    font-family: Arial, sans-serif;
    color: #333;
}
.body h1 {
    font-size: 2em;
    line-height: 1.5;
}
.body h1:hover {
    color: #0099cc;
}
.body .container {
    width: 80%;
    margin: 0 auto;
}
.body .container #main-content {
    padding: 20px;
    background-color: #f7f7f7;
}

在这个例子中，我们首先定义了一个 .body 类，并在其中嵌套了 h1 标签的选择器和对应的伪类 :hover。接着，在 .body 类内部又嵌套了一个 .container 类和其内部的 #main-content ID 选择器。通过这种方式，我们可以清晰地看到各个选择器之间的层次关系，使得CSS样式更加结构化、易于维护。

09-less运算

Less 是一种 CSS 预处理器，它扩展了 CSS 的功能，允许你编写更简洁、更易于维护的样式代码。在 Less 中，你可以进行数学运算，比如变量定义、加减乘除等操作。下面是一个 Less 运算的例子：


// 定义颜色变量和尺寸变量
@primary-color: #1abc9c;
@base-unit: 10px;
 
// 进行颜色混合运算（这里仅演示 Less 支持运算，实际 Less 没有直接的颜色混合运算）
// 若要实现颜色混合，请使用 Mixin 或其他高级功能
@mixed-color: darken(@primary-color, 10%); // 假设这是一个调暗原色10%的操作
 
// 进行尺寸的数学运算
.container-width {
    width: @base-unit * 12; // 计算出宽度为 120px
    margin-left: (@base-unit / 2); // 计算出左边距为 5px
}
 
// 编译后的 CSS
/* CSS Output */
.container-width {
    width: 120px;
    margin-left: 5px;
}

在这个例子中，我们首先定义了两个变量：@primary-color 和 @base-unit。然后，虽然 Less 并不直接支持颜色运算（如示例中的 darken()，但我们可以借助 Less 内置的函数来改变颜色），我们模拟进行了一个颜色变化的操作。

接着，我们展示了如何对尺寸变量进行数学运算，通过乘法和除法计算容器的宽度和左边距。当 Less 被编译成 CSS 时，这些运算会被解析成具体的数值。

10-rem适配方案

以下是一个使用 rem 适配方案的例子：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* 首先，设置根元素的字体大小为设备宽度的一个比例 */
        html {
            font-size: 16px; /* 这里假设设计稿是按照750px宽度设计，基准字体大小为16px */
            
            /* 使用媒体查询动态调整根元素字体大小以适应不同屏幕尺寸 */
            @media (max-width: 320px) { /* 对于小屏幕设备如iPhone 5（假设宽度为320px） */
                font-size: calc(16px * 320 / 750); /* 计算出对应的font-size */
            }
            @media (min-width: 321px) and (max-width: 480px) {/* 中等屏幕尺寸范围 */
                font-size: calc(16px * (device-width / 750)); /* 使用device-width计算实际font-size */
            }
            @media (min-width: 481px) {/* 大屏幕尺寸 */
                font-size: 16px; /* 当屏幕宽度大于480px时，可保持16px作为基准字体大小 */
            }
        }
 
        /* 然后在CSS中定义页面元素的样式，使用rem单位 */
        .example-element {
            width: 20rem; /* 假设设计稿上这个元素的宽度是200px */
            height: 10rem; /* 假设设计稿上这个元素的高度是100px */
            background-color: lightblue;
            padding: 1rem;
        }
    </style>
</head>
<body>
    <div class="example-element">这是一个用rem进行响应式适配的元素</div>
</body>
</html>

在这个例子中：

我们首先设置了HTML根元素（html）的字体大小，并且根据不同的屏幕宽度通过媒体查询动态调整该值。这样可以确保当屏幕尺寸变化时，所有基于rem单位的元素尺寸也会相应地缩放。
.example-element 类中的宽度和高度都使用了 rem 单位。当根元素字体大小改变时，这个元素的尺寸会自动按比例缩放。
这样一来，无论在何种分辨率或屏幕尺寸的设备上，.example-element 都能根据设计稿上的相对比例进行适配展示。

11-响应式布局原理

响应式布局的原理是利用CSS3的媒体查询（Media Queries）根据不同的设备视口宽度来应用不同的样式规则，从而使得网站或页面能够自动适应不同尺寸和方向的屏幕。以下是一个简单的响应式布局示例：


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  /* 基础样式 */
  .container {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
  }
 
  .content {
    display: flex; /* 使用Flexbox布局 */
    flex-wrap: wrap; /* 允许子元素换行 */
  }
 
  .item {
    flex-basis: calc(50% - 10px); /* 设置每个项目的基础宽度为容器的50%减去间隙 */
    margin-bottom: 20px;
    background-color: #f1c40f;
    padding: 10px;
  }
 
  /* 媒体查询：针对屏幕宽度小于600px的情况 */
  @media screen and (max-width: 600px) {
    .item {
      flex-basis: 100%; /* 当屏幕变小时，每个项目占据整个宽度 */
    }
  }
</style>
</head>
<body>
 
<div class="container">
  <div class="content">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
  </div>
</div>
 
</body>
</html>

在这个例子中：

在大屏幕设备上（大于600px），.item 类的元素将按照 Flexbox 布局水平排列，并且每两个 .item 占据一行。
当屏幕宽度缩小到600px或更小时，媒体查询生效，.item 的 flex-basis 属性值变为100%，这意味着所有 .item 都会堆叠在垂直方向上，以适应窄屏设备。

通过这种方式，响应式布局确保了无论用户是在桌面、平板还是手机上查看网页，内容都能够适应各种屏幕尺寸并保持良好的可读性和用户体验。

12-响应式导航


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
        }
        
        .container {
            width: 750px;
            margin: 0 auto;
        }
        
        .container ul li {
            float: left;
            width: 93.75px;
            height: 30px;
            background-color: green;
        }
        
        @media screen and (max-width: 767px) {
            .container {
                width: 100%;
            }
            .container ul li {
                width: 33.33%;
            }
        }
    </style>
</head>
 
<body>
    <div class="container">
        <ul>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
        </ul>
    </div>
</body>
 
</html>

到这里就把HTML和css学习结束了，大家练习一下就可以学习js了

感谢支持，请各位美女点赞

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/335280