HTML与CSS学习Day03（移动端适配）

你会魔法吗✧(≖ ◡ ≖✿)

已于 2024-08-19 14:48:22 修改

阅读量716

点赞数 5

分类专栏： HTML+CSS+JS 文章标签： html css 学习

于 2024-08-19 12:13:33 首次发布

本文链接：https://blog.csdn.net/m0_74154295/article/details/141145122

版权

HTML+CSS+JS 专栏收录该内容

13 篇文章 8 订阅

订阅专栏

五、移动端适配

5.1 目的

HTML 的移动适配方案是为了确保网页能够在各种移动设备（如智能手机、平板电脑等）上良好显示和运行。

多样化的屏幕尺寸：
移动设备的屏幕尺寸和分辨率各不相同，从小屏手机到大屏平板，网页需要在这些设备上都能正确显示。
用户体验：
用户在移动设备上浏览网页时，操作方式与桌面端不同（如触屏操作），适配方案能够提供更好的用户体验，使内容更容易访问和阅读。
响应式设计：
HTML 的响应式设计（通过 CSS 实现）可以使网页根据设备的屏幕尺寸自动调整布局、字体大小、图片大小等，从而避免内容超出屏幕或字体太小的问题。
搜索引擎优化（SEO）：
搜索引擎更倾向于推荐在移动设备上表现良好的网站。移动适配可以提高网页的搜索排名，增加流量。
网络带宽和性能：
移动设备通常使用移动网络，带宽和速度可能有限。通过优化内容加载速度和减少资源消耗，移动适配方案可以提高页面的加载速度，减少流量消耗，提升用户满意度。
跨平台兼容性：
HTML 的移动适配能够确保网页在不同操作系统（如 iOS、Android）和浏览器（如 Safari、Chrome）上都能正常显示。

5.2 视口

在Web开发中，视口（Viewport）是用户在网页上可见的区域。视口的概念对于移动设备尤其重要，因为它们的屏幕尺寸和分辨率与桌面计算机有很大的不同。理解和正确设置视口是实现响应式设计的关键步骤之一。

视口的类型

布局视口（Layout Viewport）
- 当网页加载时，浏览器会创建一个默认的布局视口，这个视口通常比移动设备的屏幕宽很多，目的是为了不需要修改就能在手机上查看为桌面设计的网站。例如，许多浏览器的默认布局视口宽度为980px。
视觉视口（Visual Viewport）
- 视觉视口是用户实际看到的部分。当用户缩放页面时，视觉视口的大小会改变，但布局视口的大小通常保持不变。
理想视口（Ideal Viewport）
- 理想视口是指网页在移动设备上以最佳方式显示时的视口大小。理想视口的宽度等于设备的物理屏幕宽度，这样用户在不需要水平滚动的情况下就能看到全部内容。

设置视口

为了控制视口的行为，可以在HTML文档的<head>部分使用<meta>标签来设置视口属性。最常见的视口设置是：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这行代码的意义如下：

width=device-width：将布局视口的宽度设置为等于设备的物理宽度。
initial-scale=1.0：设置页面初始缩放比例为1，这意味着网页的初始大小应该正好等于视口的大小。

视口的重要性

正确设置视口对于移动设备上的用户体验至关重要。如果没有正确设置视口，用户可能需要缩放和滚动才能阅读内容，这会导致不便捷的浏览体验。此外，一个适当配置的视口还有助于改善网站的可访问性和搜索引擎优化（SEO）。

总之，视口是响应式Web设计中的一个核心概念，它使得网页能够适应不同设备的屏幕尺寸，从而提供更好的用户体验。

5.3 为什么选择375x667作为基准？

在制作移动端网页时，选择的分辨率大小通常是基于设备的CSS像素分辨率，而不是物理分辨率。这是因为CSS像素分辨率考虑了设备像素比（DPR），更适合用于响应式设计。

从你提供的表格中，我们可以看到iPhone 6/7/8的CSS像素分辨率是375x667。这是一个常用的基准分辨率，因为它代表了一个中等大小的视口，适合大多数中等屏幕尺寸的手机。

为什么选择375x667作为基准？

普遍性：这个分辨率在多种设备上较为常见，不仅仅是iPhone，很多其他品牌的智能手机也有类似的CSS像素分辨率。
中等尺寸：它既不是最小的屏幕尺寸，也不是最大的，因此设计时可以确保在大多数设备上都有不错的用户体验。
响应式设计友好：以这种中等尺寸为基准，可以通过媒体查询向上或向下调整样式，以适应更大或更小的屏幕。

5.4 示例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式设计示例</title>
<style>
    /* 基本样式 */
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 20px;
        line-height: 1.6;
        color: #333;
    }

    .content {
        max-width: 800px;
        margin: auto;
        background-color: #f4f4f4;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    h1 {
        color: #444;
    }

    /* 小屏幕设备 */
    @media (max-width: 374px) {
        body {
            font-size: 8px;
            background-color: orangered;
        }
    }

    /* 中等屏幕设备，例如 iPhone 6/7/8 */
    @media (min-width: 375px) and (max-width: 667px) {
        body {
            font-size: 16px;
            background-color: greenyellow;
        }
    }

    /* 大屏幕设备 */
    @media (min-width: 668px) {
        body {
            font-size: 28px;
            background-color: lightskyblue;
        }
    }
</style>

</head>
<body>
    <div class="content">
        <h1>欢迎来到我的网站</h1>
        <p>这是一个响应式设计的示例，适应不同屏幕尺寸的设备。</p>
    </div>
</body>
</html>

在这里插入图片描述

5.5 适配方案

宽度自适应：
	百分比布局
	Flex布局
等比适配;
 	REM
 	VW

5.5.1 rem适配方案

在CSS中，rem（Root EM）是一个相对长度单位，它是相对于根元素（即HTML元素）的字体大小来计算的。

这意味着`1rem`等于HTML元素的字体大小。

使用rem单位可以帮助实现更一致的布局和更容易的字体大小控制，尤其是在响应式设计中。

（1）如何工作：

HTML元素的字体大小：通常在CSS中，我们会在HTML元素上设置一个基础字体大小。例如：
```
html {
    font-size: 16px;
}
```
在这个例子中，1rem将等于16px。
计算其他元素的字体大小：当你在其他元素上使用rem单位设置字体大小时，它会根据HTML元素的字体大小来计算。例如：
```
p {
    font-size: 1.5rem; /* 等于 24px，如果HTML字体大小是16px */
}
```

目标: 计算68px是多少个rem?(设计稿适配375px视口)
N * 37.5 = 68
N = 68 / 37.5
rem单位的尺寸
Ø rem单位的尺寸 = px单位数值 / 基准根字号

（2）优点：

易于维护：只需更改HTML元素的字体大小，页面上的所有使用rem单位的元素都会相应地调整大小。
提高可访问性：用户可以在浏览器设置中调整默认字体大小，rem单位会根据用户的设置自动调整，使网站更加无障碍。
响应式友好：可以通过简单的媒体查询来调整HTML元素的字体大小，从而影响整个页面的布局和字体大小。

（3）示例：

html {
    font-size: 100%; /* 默认大小通常是16px */
}

@media (max-width: 600px) {
    html {
        font-size: 14px; /* 在小屏幕上减小字体大小 */
    }
}

@media (min-width: 1200px) {
    html {
        font-size: 18px; /* 在大屏幕上增加字体大小 */
    }
}

这样，使用rem单位的所有元素都会根据屏幕大小自动调整字体大小，实现更好的用户体验和页面可读性。

在这里插入图片描述

5.5.2 媒体查询

媒体查询（Media Queries）是CSS3中的一个功能，允许内容的呈现根据不同的设备特性如屏幕尺寸、分辨率、颜色能力等进行调整。这是响应式网页设计（Responsive Web Design, RWD）的核心技术之一，使得网页可以适应不同的浏览设备，无论是桌面显示器、笔记本、平板还是手机。

基本语法

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

@media not|only mediatype and (expressions) {
  CSS-Code;
}

not|only: 可选关键字。not 用于排除某些设备，only 用于指定某些设备，但通常被省略以增加兼容性。
mediatype: 媒体类型，如 screen（屏幕）、print（打印机）等。
expressions: 检测设备特性的表达式，如 min-width、max-width、orientation（方向）等。

示例

1. 根据屏幕宽度应用样式：

@media (min-width: 600px) {
  body {
    background-color: lightblue;
  }
}

这个媒体查询表示：当屏幕宽度至少为600像素时，背景色变为浅蓝色。

2. 组合多个条件：

@media (min-width: 600px) and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

这里，背景色变化只在屏幕宽度至少600像素且设备处于横向模式时发生。

3. 使用多个媒体查询：

@media (max-width: 599px) {
  body {
    background-color: yellow;
  }
}

@media (min-width: 600px) {
  body {
    background-color: lightblue;
  }
}

不同的屏幕宽度区间使用不同的背景色。

使用场景

媒体查询主要用于以下几个方面：

布局调整：根据不同屏幕尺寸调整网页布局，如栅格系统的列数。
字体大小：提高小屏设备的可读性，或在大屏设备上增加字体大小。
显示与隐藏内容：在不同设备上显示或隐藏某些元素，以优化用户体验。
资源优化：为不同设备加载不同分辨率的图片或不同类型的资源。

5.5.3 less

（1）AI 出

Less 是一种动态样式语言，属于 CSS 预处理器的一种，它扩展了 CSS 的功能，包括变量、嵌套、混合（Mixins）、运算功能以及函数等，使得 CSS 更加强大和富有表现力。Less 文件的后缀为 .less。

主要特性

变量：可以存储一个值或一系列值，然后在整个样式表中重复使用这些值。
```
@primary-color: #4D926F;
h1 {
  color: @primary-color;
}
```

嵌套：Less 允许 CSS 规则嵌套在另一规则内部，这使得按照 HTML 的结构来组织 CSS 规则变得简单。

.nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li { display: inline-block; }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

混合（Mixins）：可以将一组属性从一个规则集包含或混入到另一个规则集中。

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered;
}

函数和运算：Less 允许在你的样式表中使用运算，这对于创建复杂的网格布局或者在不同的样式之间进行计算时非常有用。
```
@width: 10px;
@padding: 5px;
.box {
  width: @width + @padding;
}
```
作用域：Less 中的变量和混合可以根据定义它们的作用域进行使用。
```
@var: red;
#page {
  @var: white;
  #header {
    color: @var;  // white
  }
}
```

编译过程

由于浏览器不识别 Less 代码，因此需要将 .less 文件编译成标准的 CSS 文件。这个编译过程可以通过 Less 的命令行工具实现，或者使用构建工具（如 Webpack 或 Gulp）中的插件来处理。

使用场景

Less 适用于大型、复杂的项目中，其中 CSS 代码量大，需要频繁使用变量和混合以保持代码的可维护性和可重用性。通过使用 Less，开发者可以更高效地编写样式代码，减少重复代码，提高项目的整体样式的可维护性。

总之，Less 为开发者提供了一种更有效、更灵活的方式来编写 CSS，使得管理和维护大型样式表变得更加容易。

（2）WebStrom上怎么使用

现在网络资源中下载好npm下载

点击设置，搜索less，点击下面的位置的+
在这里插入图片描述
然后参数，或者给以去官网看看参数的设置，同包下的文件夹怎么设置的

$FileName$ $FileNameWithoutExtension$.css --source-map

$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

在这里插入图片描述
导入: @import “文件路径”;

导出
写法：在 less 文件的第一行添加 // out: 存储URL
提示：文件夹名称后面添加 /

禁止导出写法：在 less 文件第一行添加: // out: false

5.5.4 vw 、vh

vw（视口宽度单位）和vh（视口高度单位）是CSS中的视口百分比长度单位，它们相对于视口的尺寸来定义长度。

vw（Viewport Width）

1vw等于视口宽度的1%。
例如，如果浏览器窗口的宽度是1000px，那么1vw等于10px。

vh（Viewport Height）

1vh等于视口高度的1%。
例如，如果浏览器窗口的高度是500px，那么1vh等于5px。

使用场景

这两个单位非常有用于创建响应式设计，因为它们允许元素的大小直接根据视口的大小变化而变化，而不需要额外的媒体查询。这使得设计在不同尺寸的设备上更加一致和流畅。

示例

div {
    width: 50vw;  /* div宽度为视口宽度的50% */
    height: 50vh; /* div高度为视口高度的50% */
    background-color: lightblue;
}

在这个例子中，div会占据视口宽度的50%和视口高度的50%，无论视口的实际尺寸如何变化，div的大小都会相应地调整。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vw</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 50vw;
            height: 30vw;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">

    </div>
</body>

</html>

优点

灵活性：vw和vh提供了一种简单的方法来创建大小随视口变化的布局元素，特别是在需要填充整个屏幕或几乎整个屏幕的情况下。
简化响应式设计：可以减少使用媒体查询的需要，因为元素大小会自动根据视口大小调整。

注意事项

滚动条影响：在某些浏览器中，100vh可能不会准确地等于视口高度，因为它可能不包括水平滚动条的高度。
过度使用：虽然vw和vh单位非常有用，但过度使用可能会导致布局在极小或极大的屏幕上出现问题。在这些情况下，可能仍然需要媒体查询来微调布局。

通过合理使用vw和vh单位，可以有效地增强网页设计的响应性和灵活性。

六、Bootstrap

Bootstrap
在这里插入图片描述

你会魔法吗✧(≖ ◡ ≖✿)

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML与CSS学习Day03（移动端适配）

此外，一个适当配置的视口还有助于改善网站的可访问性和搜索引擎优化（SEO）。Less 是一种动态样式语言，属于 CSS 预处理器的一种，它扩展了 CSS 的功能，包括变量、嵌套、混合（Mixins）、运算功能以及函数等，使得 CSS 更加强大和富有表现力。HTML 的响应式设计（通过 CSS 实现）可以使网页根据设备的屏幕尺寸自动调整布局、字体大小、图片大小等，从而避免内容超出屏幕或字体太小的问题。总之，视口是响应式Web设计中的一个核心概念，它使得网页能够适应不同设备的屏幕尺寸，从而提供更好的用户体验。
复制链接

扫一扫