HTML+CSS进阶用法 (下)——移动端适配、媒体查询和响应式布局

天下无贼！

于 2024-08-16 08:15:00 发布

阅读量1.1k

点赞数 8

分类专栏：前端必备技能文章标签： html css 媒体

本文链接：https://blog.csdn.net/qq_65034569/article/details/141203435

版权

前端必备技能专栏收录该内容

15 篇文章 1 订阅

订阅专栏

欢迎来到移动端适配方案的介绍！随着移动互联网的快速发展，越来越多的用户通过手机和平板电脑访问网站。为了确保网站能够在各种设备上呈现出最佳的视觉效果和用户体验，我们需要采取有效的适配策略。本篇文章将带你了解几种常用的适配方法，包括宽度适配、等比适配、媒体查询以及使用 flexible.js 和 vw 布局。让我们一起探索如何构建响应式网页，使其能够完美适应不同屏幕尺寸！

移动端

适配方案

宽度适配

百分之布局

百分比布局是一种常见的响应式布局方式，它通过将元素的宽度设置为父元素宽度的百分比来实现。这种方式非常适合创建可伸缩的布局。

示例代码：

.container {
  width: 100%; /* 容器宽度为100%，即占据父元素的全部宽度 */
}

.item {
  width: 50%; /* 子元素宽度为容器的一半 */
}

Flex布局

Flex布局是一种现代的布局方法，可以轻松地调整元素的位置和大小以适应不同的屏幕尺寸。

示例代码：

.container {
  display: flex; /* 容器变为Flex容器 */
  justify-content: space-between; /* 内容在主轴上均匀分布 */
  align-items: center; /* 内容在交叉轴上居中对齐 */
}

.item {
  flex: 1; /* 子元素占满可用空间 */
}

等比适配

rem适配

rem单位，是相对单位
rem单位是相对于HTML标签的字号计算结果
1rem=1HTML字号大小

rem标准：目前rem布局方案中，将网页等分成10份，HTML标签的字号为视口宽度的1/10。

示例代码：

html {
  font-size: 10vw; /* 字体大小为视口宽度的10% */
}

.container {
  width: 50rem; /* 宽度为根元素字体大小的50倍 */
}

⚠️还有一种方案就是使用less预处理来实现，我也有一篇关于less的教程，大家可以看一看🤗。

一天搞定前端必备开发技能 (2)——less和Sass预处理器的使用_less sass的使用-CSDN博客

rem布局

媒体查询

作用：媒体查询能够检测视口的宽度，然后编写差异化的CSS样式，当某个条件成立，执行对应的CSS样式

语法：

@media (媒体特性){
	选择器{
		CSS样式
	}
}

案例：

@media (width:375px){
		body{
			background-color:pink;
		}
}

flexible

flexible.js是阿里巴巴的手淘开发出的一个用来适配移动端的js库。

核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。

引入文件

<script src="flexible的地址路径"></script>

vw布局

也是一个相对单位，相对视口的尺寸计算结果。

vw：viewportwidth【1vw=1/100视口宽度】

vh：viewportheight【1vh=1/100视口高度】

注意⚠️：并不是vw就给宽度，vh就给高度赋值，这两个是相对单位，宽度和高度都是可以用的。

单位使用要统一！！！
div{
  width: 50vh;
  height:30vh;
  background-color:skyblue;
}
div2{
  width: 50vw;
  height:30vw;
  background-color:skyblue;
}
//这里❌是错误的，要统一使用
div3{
  width: 50vw;
  height:30vh;
  background-color:skyblue;
}

vw比 vh使用更多，主要是因为：

页面布局：大多数网页布局更侧重于宽度的适应性。
设备适应性：不同设备的屏幕高宽比不同，vw 更容易适应这些变化。
文本排版：vw 有助于保持文本的行宽一致，提供更好的阅读体验。

响应式网页

响应式网页是一种使网站能够适应不同设备屏幕尺寸的设计方法。它的主要目的是确保网站在各种设备上都能提供良好的用户体验，无论用户是在台式机、笔记本电脑、平板电脑还是智能手机上浏览。

核心就是通过媒体查询来查询网页宽度或者高度。

媒体查询实现响应式

媒体查询范围值

min-width：最小宽度
max-height：最大宽度

//当宽度小于700的时候就是红色
@media (max-width:768px){
  html{
  	background-color:red;
  	}
}

//当宽度大于700的时候就是蓝色
@media (min-width:768px){
  html{
  	background-color:blue;
  	}
}

媒体查询书写顺序

媒体查询的书写顺序很重要，以确保正确的样式应用。通常，媒体查询应按照从小屏幕到大屏幕的顺序编写，以确保样式能够正确地覆盖和应用。

书写顺序：

从小到大：从最小的屏幕尺寸开始，逐步过渡到较大的屏幕尺寸。
从宽泛到具体：先定义适用于最大范围的样式，再逐步添加更具体的条件。

案例：

/* 默认样式，适用于所有设备 */
body {
  background-color: white;
  font-size: 16px;
}

/* 小屏幕设备（如手机） */
@media (max-width: 600px) {
  body {
    background-color: pink;
    font-size: 14px;
  }
}

/* 中等屏幕设备（如平板电脑） */
@media (min-width: 601px) and (max-width: 1024px) {
  body {
    background-color: lightblue;
    font-size: 16px;
  }
}

/* 大屏幕设备（如桌面显示器） */
@media (min-width: 1025px) {
  body {
    background-color: lightgreen;
    font-size: 18px;
  }
}

媒体查询完整写法

语法：

//完整版：
@media 关键词 媒体类型 and （媒体特性）{CSS代码}
//简写：
@media (媒体特性){CSS代码}

关键词/逻辑操作符

and
only
not

媒体类型：

媒体特性：

媒体查询外部引入

语法：

<linkrel="stylesheet"media="逻辑符 媒体类型 and（媒体特性)" href="xx.css">

案例：

html文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>简单的响应式案例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>欢迎来到我的网站</h1>
    <p>这是一个简单的响应式网页示例。</p>
  </div>
</body>
</html>

css文件

/* 默认样式 */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

h1 {
  font-size: 2em;
}

p {
  font-size: 1em;
}

/* 响应式样式 */
@media (max-width: 600px) {
  h1 {
    font-size: 1.5em;
  }

  p {
    font-size: 0.9em;
  }
}

Bootstrap框架

Bootstrap是由Twitter公司开发维护的前端UI框架，它提供了大量编写好的CSS样式，允许开发者结合一定HTML结构及JavaScript，快速编写功能完善的网页及常见交互效果。

中文官网：https://www.bootcss.com/

Bootstrap的使用

引入文件

<linkrel="stylesheet"href="./Bootstrap/css/bootstrap.min.css">

调用类名

<div class="bootstrap的类名">
	内容
</div>

通过本文的学习，我们已经了解了几种主流的移动端适配方案，包括百分比布局、Flex布局、rem适配、媒体查询以及 flexible.js 和 vw 布局的应用。这些方法各有优势，可以根据项目的具体需求灵活选择。记住，优秀的响应式设计不仅能够提升用户体验，还能增加网站的流量和用户留存率。希望这些知识能够帮助你在未来的项目中实现更加出色的响应式设计。感谢阅读，期待你在实践中运用这些技巧，创造出更多令人赞叹的作品！