青少年编程与数学 02-005 移动Web编程基础 05课题、rem布局与媒体查询

🕗 发布于 2024-12-28 08:55 青少年编程前端媒体编程与数学

青少年编程与数学 02-005 移动Web编程基础 05课题、rem布局与媒体查询

一、rem单位
二、媒体查询
三、less基本语法
四、less嵌套
五、less运算
六、rem适配方案
七、应用示例

课题摘要:本文介绍了rem单位和媒体查询在移动Web编程中的应用。rem单位是相对于根元素字体大小的CSS长度单位，适合响应式布局和保持元素间比例一致性。媒体查询允许根据不同设备特性应用不同CSS样式，是响应式设计的关键技术。LESS是一种扩展CSS功能的动态样式语言，支持变量、混合、函数等特性，使得CSS代码更高效、可复用。文章还探讨了LESS嵌套、运算和适配方案，提供了使用LESS和媒体查询设计移动端页面的示例，展示了如何创建响应式布局。

一、rem单位

REM单位是CSS中的一种相对长度单位，其全称为“root em”，即相对于根元素（通常是<html>元素）的字体大小。以下是对REM单位的详解：

1. 定义和计算

定义：REM单位是相对于根元素（html或:root）的字体大小的单位。如果根元素的字体大小是16px，那么1rem就等于16px。
计算：计算REM单位值很简单，只需要将根元素字体大小乘以一个数字。例如，如果根元素字体大小为16px，那么1rem就等于16px。如果根元素字体大小变为20px，1rem也会相应变为20px。

2. 应用场景

响应式布局：REM单位非常适合响应式布局中的字体调整。你只需要修改根元素html的字体大小，页面中所有基于REM的元素都会随之调整大小。这样，你只需一次设置，就能让页面在不同分辨率的设备上保持一致的比例。
字体大小：使用REM单位定义字体大小可以确保字体大小始终与根元素字体大小成比例。这在创建响应式设计时很有用，因为它可以确保字体大小在不同设备上都能清楚易读。
边距和内边距：使用REM单位定义边距和内边距可以确保元素之间的间距始终与根元素字体大小成比例。这在创建响应式设计时很有用，因为它可以确保元素之间的间距在不同设备上都能保持一致。
元素宽度和高度：使用REM单位定义元素宽度和高度可以确保元素尺寸始终与根元素字体大小成比例。这在创建响应式设计时很有用，因为它可以确保元素尺寸在不同设备上都能保持一致。

3. 优点

响应性：REM单位的本质是响应性的，这意味着它会根据根元素字体大小的改变而改变。这对于创建响应式设计至关重要，因为它确保了元素尺寸始终与根元素字体大小成比例。
一致性：与EM单位不同，REM单位相对于根元素的字体大小，而不是父元素，这使得在嵌套元素中使用REM时更加一致，避免了嵌套造成的复杂性。

4. 缺点

兼容性：虽然现代浏览器都支持REM单位，但在一些旧版本的浏览器中可能不支持，需要提供后备方案。

5. 实现响应式布局的方案

媒体查询+REM：使用媒体查询，随屏幕宽度的变化，调整根元素的font-size，同时使用REM单位。

通过上述详解，可以看出REM单位在现代Web设计中的重要性，特别是在响应式布局和跨设备一致性方面。

二、媒体查询

媒体查询（Media Queries）是CSS3中的一个重要特性，它允许开发者根据不同的设备特性（如屏幕尺寸、分辨率、方向等）来应用不同的CSS样式规则。媒体查询使得开发者能够创建更加灵活和响应式的网页设计，以适应不同的设备和环境。

基本语法

媒体查询的基本语法如下：

@media not|only mediatype and (expressions) {
  /* CSS规则 */
}

not 和 only 是可选的关键字，用于控制媒体查询的严格性。
- not：表示不应用在指定的媒体类型。
- only：表示只应用在指定的媒体类型，忽略不支持媒体查询的旧版浏览器。
mediatype：指定媒体类型，如screen、print、speech等。
expressions：是一系列条件表达式，用于进一步细化媒体查询的条件，如max-width、min-height等。

常用媒体类型

screen：用于电脑显示器、平板电脑、智能手机等屏幕设备。
print：用于打印预览和打印。
speech：用于屏幕阅读器等语音合成设备。

常用表达式

width：设备的可视宽度。
height：设备的可视高度。
orientation：设备的方向（portrait或landscape）。
resolution：设备的分辨率。
min-width、max-width、min-height、max-height：设备的最小或最大宽度和高度。

示例

/* 基础样式 */
body {
  background-color: lightblue;
}

/* 当屏幕宽度小于600px时 */
@media (max-width: 600px) {
  body {
    background-color: lightgreen;
  }
}

/* 当屏幕宽度在600px到800px之间时 */
@media (min-width: 600px) and (max-width: 800px) {
  body {
    background-color: lightcoral;
  }
}

/* 当设备是打印设备时 */
@media print {
  body {
    background-color: lightgray;
  }
}

在这个示例中，我们根据不同的屏幕尺寸和设备类型应用了不同的背景颜色。

媒体查询是实现响应式设计的关键技术之一，它允许开发者根据不同的设备特性来调整网页的布局和样式，从而提供更好的用户体验。

三、less基本语法

LESS 是一种动态样式语言，它扩展了 CSS 的功能，使其更加灵活和可维护。LESS 由 Alexis Sellier 在 2009 年创建，并于 2011 年成为开源项目。它允许开发者使用变量、混合（mixins）、函数、继承等编程特性来编写 CSS 代码，这些特性使得编写 CSS 更加高效和可复用。

主要特性

变量（Variables）：
LESS 允许你定义变量来存储值，这些值可以在样式表中重复使用，使得维护和更新变得更加容易。
```
@color: #4D926F;
@padding: 20px;

.header {
  color: @color;
  padding: @padding;
}
```
混合（Mixins）：
混合是 LESS 中的一个功能，允许你定义一个 CSS 规则集，然后在多个地方使用这个规则集。这类似于函数的概念，可以减少代码重复。
```
.centered() {
  text-align: center;
  margin: 0 auto;
}

.header, .footer {
  .centered();
}
```

函数（Functions）：
LESS 提供了一些内置函数，如颜色操作、字符串处理等，也可以自定义函数。

@base-color: #f06d06;
@base-dark-color: darken(@base-color, 10%);

.header {
  color: @base-color;
  border-color: @base-dark-color;
}

嵌套规则（Nested Rules）：
LESS 允许你将 CSS 规则嵌套在其他规则内部，这使得代码结构更加清晰，并且减少了重复的父选择器。
```
#header {
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}
```
继承（Extend/&）：
LESS 提供了 & 符号和 .extend 关键字，允许你扩展一个选择器的样式到另一个选择器。
```
.error {
  border: 1px solid #c00;
  background-color: #fdd;
}
.error.intrusion {
  & {
    font-size: 1.5em;
  }
}
```

操作和颜色处理：
LESS 允许你对颜色和其他属性进行数学运算，如加法、减法、乘法、除法等。

@base: #f04615;
@width: 0.5;
@height: 1.5;

.logo {
  width: (@width * 100)%;
  height: (@height * 100)%;
  background-color: @base;
}

编译和使用

LESS 本身不是浏览器可以直接解析的，它需要被编译成 CSS。你可以使用 LESS 的命令行工具、Node.js 包、Grunt 或 Gulp 等构建工具，或者在线编译器来将 LESS 代码转换为 CSS。

总结

LESS 提供了一种更加强大和灵活的方式来编写 CSS，使得样式代码更加模块化、可维护和可扩展。它通过引入编程语言的特性，使得样式开发更加接近现代软件开发的实践。

四、less嵌套

在 LESS 中实现响应式设计主要依赖于媒体查询（Media Queries）和LESS的嵌套规则。以下是如何在LESS中使用这些特性来创建响应式设计：

1. 使用媒体查询

在LESS中，你可以使用媒体查询来为不同的屏幕尺寸定义不同的样式。这可以通过在LESS文件中直接编写媒体查询来实现。

// 基础样式
.page {
  padding: 20px;
  font-size: 14px;
}

// 大屏幕样式
@media (min-width: 1200px) {
  .page {
    font-size: 16px;
  }
}

// 平板屏幕样式
@media (min-width: 768px) and (max-width: 979px) {
  .page {
    font-size: 15px;
  }
}

// 小屏幕样式
@media (max-width: 767px) {
  .page {
    font-size: 13px;
    padding: 10px;
  }
}

2. 嵌套媒体查询

LESS允许你将媒体查询嵌套在其他选择器内部，这样可以减少重复的选择器代码。

.page {
  padding: 20px;
  font-size: 14px;

  @media (min-width: 1200px) {
    font-size: 16px;
  }

  @media (min-width: 768px) and (max-width: 979px) {
    font-size: 15px;
  }

  @media (max-width: 767px) {
    font-size: 13px;
    padding: 10px;
  }
}

3. 使用变量控制断点

你可以使用LESS的变量来定义断点，这样可以在多个地方重用这些值，使得维护更加简单。

@screen-small: 767px;
@screen-medium: 992px;
@screen-large: 1200px;

.page {
  padding: 20px;
  font-size: 14px;

  @media (min-width: @screen-small) {
    font-size: 13px;
    padding: 10px;
  }

  @media (min-width: @screen-medium) {
    font-size: 15px;
  }

  @media (min-width: @screen-large) {
    font-size: 16px;
  }
}

4. 混合和函数

你还可以使用LESS的混合（mixins）和函数来创建更复杂的响应式逻辑。

.resize-text(@min-font-size, @max-font-size, @min-width, @max-width) {
  font-size: @min-font-size;
  @media (min-width: @min-width) {
    font-size: @max-font-size;
  }
}

.page {
  padding: 20px;
  .resize-text(14px, 16px, 1200px, 1600px);
}

通过这些方法，你可以在LESS中有效地实现响应式设计，使得你的网站或应用能够适应不同设备的屏幕尺寸。

五、less运算

在 LESS 中，运算是处理数值的强大工具，允许你在属性值中进行数学计算。LESS 支持加法（+）、减法（-）、乘法（*）、除法（/）和取模（%）运算。这些运算可以应用于数字、颜色值和其他单位的计算。

基本运算

以下是一些基本的 LESS 运算示例：

@width: 50;
@height: 30;

.width-calc {
  width: @width + @height; // 80
}

.height-calc {
  height: @width - 5; // 45
}

.area-calc {
  area: @width * @height; // 1500
}

.percentage-calc {
  percentage: (@width * 100) / 50; // 100%
}

颜色运算

LESS 也提供了一些内置函数来进行颜色的运算，比如 lighten、darken、saturate、desaturate 和 fadein、fadeout 等。

@base-color: #333;
@light-color: lighten(@base-color, 20%); // 将颜色变亮
@dark-color: darken(@base-color, 20%); // 将颜色变暗

@saturated-color: saturate(@base-color, 10%); // 增加饱和度
@desaturated-color: desaturate(@base-color, 10%); // 减少饱和度

@faded-color: fadeout(@base-color, 50%); // 将颜色变透明

运算符优先级

在 LESS 中，运算符的优先级遵循数学中的常规规则，即先乘除后加减。如果你需要改变运算的顺序，可以使用括号来明确指定。

@result: 5 * (8 + 2); // 50

单位转换

LESS 允许你在运算中混合使用不同的单位，它会自动进行单位转换。

@base: 5px;

.margin {
  margin: @base * 2 + 3em; // 13em (10px + 3em)
}

在这个例子中，10px 被转换为 em 单位，然后与 3em 相加。

注意事项

当你在属性值中使用运算时，确保结果是一个有效的 CSS 值。
在进行颜色运算时，确保使用的颜色值是合法的 CSS 颜色值。
运算结果可能会有精度问题，因为 LESS 会将结果四舍五入到最接近的整数。

通过使用 LESS 的运算功能，你可以创建更动态和灵活的样式，减少硬编码的值，使代码更加简洁和可维护。

六、rem适配方案

要使用 LESS、媒体查询和 rem 单位设计移动端页面，你可以遵循以下步骤：

1. 设置根元素的字体大小

首先，你需要设置 HTML 根元素的字体大小，这将作为 rem 单位的基准。通常，这个值会根据设计稿的宽度和设备宽度的比例来设置。

@ui_width: 750; // 设计稿宽度，例如750px
@num: 15; // 设计稿宽度分成的份数，例如15份

html {
  font-size: @ui_width / @num + px; // 默认情况下的字体大小
}

2. 使用媒体查询调整字体大小

接下来，使用媒体查询根据不同的屏幕尺寸调整根元素的字体大小。这样，当屏幕尺寸变化时，使用 rem 单位的元素尺寸也会相应变化。

@media screen and (min-width: 320px) {
  html {
    font-size: 320 / @num + px;
  }
}
@media screen and (min-width: 360px) {
  html {
    font-size: 360 / @num + px;
  }
}
// 以此类推，为不同的屏幕尺寸设置不同的 font-size

3. 使用 rem 单位定义元素尺寸

在你的 LESS 样式中，使用 rem 单位来定义元素的尺寸。这样，当根元素的字体大小变化时，这些元素的尺寸也会自动调整。

.element {
  width: 10rem; // 相对于根元素字体大小的宽度
  height: 5rem; // 相对于根元素字体大小的高度
}

4. 嵌套媒体查询

你可以在 LESS 中使用嵌套规则来组织媒体查询，使代码更加清晰。

.element {
  width: 10rem;
  height: 5rem;

  @media screen and (min-width: 768px) {
    width: 12rem;
    height: 6rem;
  }
}

5. 使用 LESS 函数和混合

LESS 提供了函数和混合（mixins），你可以使用它们来简化响应式设计的代码。

// 定义一个混合，用于创建响应式元素
.responsive-element(@base-size) {
  width: @base-size;
  height: @base-size / 2;

  @media screen and (min-width: 768px) {
    width: @base-size * 1.2;
    height: (@base-size * 1.2) / 2;
  }
}

// 使用混合创建响应式元素
.element {
  .responsive-element(10rem);
}

通过上述步骤，你可以使用 LESS、媒体查询和 rem 单位来设计一个适应不同屏幕尺寸的移动端页面。这种方法可以确保你的页面在不同设备上都能保持良好的布局和可读性。

七、应用示例

以一个公司——MyKcs的移动端网站主页为例，来说明如何使用LESS、媒体查询和rem单位设计移动端页面。我们将创建一个简单的页面布局，包括头部（logo和导航）、主要内容区域和底部版权信息。

1. 设置项目结构

首先，我们假设项目结构如下：

/MyKcs-Mobile
  /css
    - main.less
  /img
    - logo.png
  index.html

2. HTML结构

index.html 的基本结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet/less" type="text/css" href="css/main.less">
  <script src="js/less.min.js"></script>
  <title>MyKcs - 移动版</title>
</head>
<body>
  <header>
    <div class="logo"></div>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">联系</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>欢迎来到MyKcs</h1>
    <p>我们致力于创造最先进的成长管理方法。</p>
  </main>
  <footer>
    <p>© 2024 MyKcs. All rights reserved.</p>
  </footer>
</body>
</html>

3. LESS代码

css/main.less 的LESS代码如下：

// 定义设计稿宽度和根字体大小
@design-width: 750px;
@base-font-size: 16px;

// 计算根字体大小
@root-font-size: (@design-width / 2) + px;

html {
  font-size: @root-font-size;
}

body {
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

// 头部样式
header {
  background: #333;
  color: #fff;
  padding: 1rem;

  .logo {
    background: url(../img/logo.png) no-repeat center;
    background-size: contain;
    width: 50%;
    height: 2rem;
  }

  nav {
    ul {
      list-style: none;
      padding: 0;

      li {
        display: inline;
        margin-right: 1rem;

        a {
          color: #fff;
          text-decoration: none;
        }
      }
    }
  }
}

// 主要内容区域样式
main {
  padding: 1rem;
  text-align: center;

  h1 {
    font-size: 2rem;
    margin: 0;
  }

  p {
    font-size: 1.2rem;
    color: #666;
  }
}

// 底部样式
footer {
  background: #222;
  color: #fff;
  text-align: center;
  padding: 1rem;
  font-size: 1rem;

  p {
    margin: 0;
  }
}

// 媒体查询，适应不同屏幕尺寸
@media screen and (max-width: 768px) {
  header {
    .logo {
      width: 30%;
      height: 1.5rem;
    }

    nav {
      ul {
        li {
          display: block;
          margin: 0.5rem 0;
        }
      }
    }
  }

  main {
    h1 {
      font-size: 1.8rem;
    }

    p {
      font-size: 1rem;
    }
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  header {
    .logo {
      width: 40%;
      height: 1.8rem;
    }
  }

  main {
    h1 {
      font-size: 2.2rem;
    }

    p {
      font-size: 1.4rem;
    }
  }
}

4. 编译LESS

你需要使用LESS编译器将main.less编译成main.css。你可以使用在线编译器或者安装LESS的命令行工具。

5. 引入LESS.js

在HTML文件中，我们引入了LESS.js，这样在浏览器中也可以解析LESS代码。确保你下载了LESS.js库，并将其放在合适的路径下。

总结

通过上述步骤，我们创建了一个简单的移动端页面，并使用LESS、媒体查询和rem单位来实现响应式设计。这种方法可以确保页面在不同设备上都能保持良好的布局和可读性。你可以根据实际需求进一步扩展和优化这个示例。

原文地址：https://blog.csdn.net/qq_40071585/article/details/144757303

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：实战设计模式之策略模式
下一篇：【日常开发】Git Stash使用技巧

springcloud篇2-feign、gateway
说明：（1）日志级别NONE-没有日志BASIC-记录请求的开始和结束时间HEADERS-记录请求的开始和结束时、请求头和响应头FULL-记录请求的开始和结束时、请求头和响应头、请求体和响应体但该方式
阅读更多2024-12-28
JavaScript（三）：数组
当传入一个数字时，创建一个指定长度的空数组，数组的元素为undefined。JavaScript中，数组的元素可以是不同的数据类型，也可以嵌套其他数组。：从数组中提取出一个新的子数组（不修改原数组），
阅读更多2024-12-28
向量组学习
向量组的秩及其线性组合。
阅读更多2024-12-28
Web安全攻防入门教程——hvv行动详解
Web安全攻防是一个动态变化的领域，攻防技术日新月异。在学习Web安全的过程中，掌握基础的安全理论和常见的攻击类型、漏洞防御技术是最基本的要求。通过不断的学习和实践，你能够提升自己的安全攻防能力，保护
阅读更多2024-12-28
神经网络-DenseNet
DenseNet（密集连接卷积神经网络，Densely Connected Convolutional Networks）是一种深度卷积神经网络结构，由 Gao Huang 等人于 2017 年提出。
阅读更多2024-12-28
Llama + Dify，在你的电脑搭建一套AI工作流
最近字节在推Coze，你可以在这个平台制作知识库、制作工作流，生成一个具有特定领域知识的智能体。那么，有没有可能在本地也部署一套这个东西呢？这样敏感数据就不会泄露了，断网的时候也能使用AI。刚好最近L
阅读更多2024-12-28
Python（六）面向对象编程
self。
阅读更多2024-12-28
教师管理系统
教学管理系统
阅读更多2024-12-28
Python-实现tuple和list的转换方式
在Python中，tuple（元组）和list（列表）是两种常见的数据结构，它们之间可以相互转换。
阅读更多2024-12-28
大模型笔记！以LLAMA为例，快速入门LLM的推理过程
导读本文借助llama这个模型快速入门LLM的推理过程，技术细节很多都是通用的，也适合其他的LLM。本篇也可以作为CV快速入门NLP简易指南。本文借助llama这个模型快速入门LLM的推理过程，很多技
阅读更多2024-12-28

青少年编程与数学 02-005 移动Web编程基础 05课题、rem布局与媒体查询

青少年编程与数学 02-005 移动Web编程基础 05课题、rem布局与媒体查询

一、rem单位

1. 定义和计算

2. 应用场景

3. 优点

4. 缺点

5. 实现响应式布局的方案

二、媒体查询

基本语法

常用媒体类型

常用表达式

示例

三、less基本语法

主要特性

编译和使用

总结

四、less嵌套

1. 使用媒体查询

2. 嵌套媒体查询

3. 使用变量控制断点

4. 混合和函数

五、less运算

基本运算

颜色运算

运算符优先级

单位转换

注意事项

六、rem适配方案

1. 设置根元素的字体大小

2. 使用媒体查询调整字体大小

3. 使用 rem 单位定义元素尺寸

4. 嵌套媒体查询

5. 使用 LESS 函数和混合

七、应用示例

1. 设置项目结构

2. HTML结构

3. LESS代码

4. 编译LESS

5. 引入LESS.js

总结

相关文章