当前位置： 首页 > news >正文

移动端适配

news 2025/7/7 1:25:57

​
是看的b站一个老哥的视频，做的汇总，讲的嘎嘎棒。视频链接：b站链接

视口viewport

  • pc端视口就是可视化的窗口，不包含浏览器工具栏
  • 但是移动端，不太一样，布局的视口和可见的视口是不太一样的
    • 移动端的网页窗口往往比较小，我们希望一个大的网页在移动端可以完成的显示
    • 所以在默认情况下，移动端的布局视口是大于视觉视口的

在这里插入图片描述

移动端，可以将视口划分为三种情况

  1. 布局视口(layout viewport)
  2. 视觉视口(visual layout)
  3. 理想视口(ideal layout)

布局视口

相对于980px布局的这个视口，称之为布局视图。默认宽度就是980px

首先要把这行代码去掉，不然看不了布局视口

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • 浏览器默认的布局视口其实是宽980px的大盒子，我们只关心宽，因为高可能会很高，还可以滚动

在这里插入图片描述

  • 浏览器查看移动端，浏览器会等比例的把980px缩成手机大小。所以你一开始设置的宽高，移动端的时候还是这个宽高，但是给人的感觉却是小了不小

代码验证：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> --><title>Document</title><style>.box {width: 100px;height: 100px;background-color: pink;}</style>
</head><body><div class="box"></div>
</body></html>

pc端效果

在这里插入图片描述

移动端效果

在这里插入图片描述

布局视口总图解：

在这里插入图片描述

但是这种效果，明显不是我们想要的，我们想要的是相对与设备大小，而不是相对于980px

所以我们需要修改布局视口的宽度，以适应我们的需求

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

  • 通过content来指定布局视口的宽度

    • 这个属性只针对移动端，对pc端无效

    • 默认宽度一般都980px，content='width=980px'

    • 宽度越大，布局视口就越大，同比缩小到移动端上，则元素就看起来越小。反之则越大

    • 我们希望布局视口就是根绝设备的宽度来，设备宽度多少，则布局视口宽度就是多少

    • 所以就用到了device-width这个值，它就是设备宽度

视觉视口

就是移动端可见区域(屏幕)

在这里插入图片描述

理想视口

布局视口的宽，就等于移动设备的宽，就是理想视口。这样我们就能保证，给元素设定多少px，就是多少px

  • 也就是这行代码
<meta name="viewport" content="width=device-width, initial-scale=1.0">

元信息meta，name为viewport时，可以设置的属性

如图

在这里插入图片描述

真实移动端开发，会这样写

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0,maximum-scale=1.0">

移动端适配方案

  • 上面的viewport只是解决了视口问题。但是我们想要根据屏幕大小，让元素能有不同的宽高表现，则就需要适配。常见的适配方案，有以下几种

rem+媒体查询

rem是相对单位，相对于html标签的font-size字体大小。1rem = 1个html的字号大小

  • 核心就是用媒体查询，根绝屏幕大小给html设置不同的font-size字号大小，然后元素只需要给rem即可
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport"content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0,maximum-scale=1.0"><title>Document</title><style>@media only screen and (min-width: 320px) {html {font-size: 14px;}}@media only screen and (min-width: 480px) {html {font-size: 16px;}}@media only screen and (min-width: 540px) {html {font-size: 17px;}}@media only screen and (min-width: 640px) {html {font-size: 18px;}}@media only screen and (min-width: 720px) {html {font-size: 19px;}}@media only screen and (min-width: 750px) {html {font-size: 20px;}}* {padding: 0;margin: 0;}.app {width: 100%;height: 100%;}.box {display: flex;justify-content: space-between;}.box .left {width: 10rem;height: 10rem;background-color: pink;}.box .right {width: 10rem;height: 10rem;background-color: pink;}</style>
</head><body><div class="app"><div class="box"><div class="left">1</div><div class="right">2</div></div></div>
</body></html>

推荐一个好用的插件，可以直接把px转换为对应的rem或vw

在这里插入图片描述

  • 点击设置图标，进入设置页面

在这里插入图片描述

在设置页面进行rem设置

在这里插入图片描述

  • 如果给的是设计图是375的，这里就填37.5。如果是750，就写75

rem+flexible.js

  • 实时监听屏幕尺寸，然后根绝屏幕尺寸来动态的设置html字号的大小

简写版的，理解flexible用，真实开发千万别用这个

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport"content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0,maximum-scale=1.0"><title>Document</title><script>// 获取html元素const htmlEl = document.documentElement// 动态根据屏幕设置html字号大小function setRemUtil() {// 获取屏幕宽度let screenWidth = htmlEl.clientWidth// html元素的字号大小let htmlFontSize = screenWidth / 15console.log(htmlFontSize)// 设置给html字号htmlEl.style.fontSize = htmlFontSize + 'px'}// 进来的时候就调用一下，如果不调用，就会按16px走setRemUtil()// 监听屏幕尺寸变化window.addEventListener('resize', setRemUtil)</script><style>* {padding: 0;margin: 0;}.app {width: 100%;height: 100%;}.box {display: flex;justify-content: space-between;}.box .left {width: 5rem;height: 5rem;background-color: pink;}.box .right {width: 5rem;height: 5rem;background-color: pink;}</style>
</head><body><div class="app"><div class="box"><div class="left">1</div><div class="right">2</div></div></div>
</body></html>

完整版

flexible.js

;(function flexible(window, document) {var docEl = document.documentElementvar dpr = window.devicePixelRatio || 1// adjust body font sizefunction setBodyFontSize() {if (document.body) {document.body.style.fontSize = 12 * dpr + 'px'} else {document.addEventListener('DOMContentLoaded', setBodyFontSize)}}setBodyFontSize()// set 1rem = viewWidth / 15function setRemUnit() {var rem = docEl.clientWidth / 15docEl.style.fontSize = rem + 'px'}setRemUnit()// reset rem unit on page resizewindow.addEventListener('resize', setRemUnit)window.addEventListener('pageshow', function (e) {if (e.persisted) {setRemUnit()}})// detect 0.5px supportsif (dpr >= 2) {var fakeBody = document.createElement('body')var testElement = document.createElement('div')testElement.style.border = '.5px solid transparent'fakeBody.appendChild(testElement)docEl.appendChild(fakeBody)if (testElement.offsetHeight === 1) {docEl.classList.add('hairlines')}docEl.removeChild(fakeBody)}
})(window, document)

xxx.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport"content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0,maximum-scale=1.0"><title>Document</title><script src="./flexible.js"></script><style>* {padding: 0;margin: 0;}.app {width: 100%;height: 100%;}.box {display: flex;justify-content: space-between;}.box .left {width: 5rem;height: 5rem;background-color: pink;}.box .right {width: 5rem;height: 5rem;background-color: pink;}</style>
</head><body><div class="app"><div class="box"><div class="left">1</div><div class="right">2</div></div></div>
</body></html>

vw/vh(推荐)

vw就是把视口(屏幕)100等分，1vw = 1等份。vh同理。例如375的屏幕，1vw就是3.75px，到420的屏幕，1vw就是4.2px

可以使用上面的插件进行转换

在这里插入图片描述

  • 图线标注的地方，如果给的设计图是375的我们这里就写375。如果是750，就写750

然后我们就可以使用插件进行转换了

在这里插入图片描述

相关文章：

移动端适配

​ 是看的b站一个老哥的视频&#xff0c;做的汇总&#xff0c;讲的嘎嘎棒。视频链接&#xff1a;b站链接 视口viewport pc端视口就是可视化的窗口&#xff0c;不包含浏览器工具栏但是移动端&#xff0c;不太一样&#xff0c;布局的视口和可见的视口是不太一样的 移动端的网页…...

编程日记 2023/5/15 23:47:43

【FPGA】Verilog：时序电路应用 | 序列发生器 | 序列检测器

前言&#xff1a;本章内容主要是演示Vivado下利用Verilog语言进行电路设计、仿真、综合和下载 示例&#xff1a;序列发生器与序列检测器 ​ 功能特性&#xff1a; 采用 Xilinx Artix-7 XC7A35T芯片 配置方式&#xff1a;USB-JTAG/SPI Flash 高达100MHz 的内部时钟速度 存储器…...

编程日记 2023/5/15 23:47:39

Biomod2 （下）：物种分布模型建模

这里写目录标题1.给出一个线性回归模型并求出因子贡献度2.biomod22.1 pseudo-absences:伪不存在点&#xff08;PA&#xff09;2.1.1 random2.2.2 disk2.2.3 user.defined method3.使用网格划分区域3.1 计算质心4. 完整案例1.给出一个线性回归模型并求出因子贡献度 ##---------…...

编程日记 2023/5/15 23:47:34

Linux性能学习（2.2）：内存_进程线程内存分配机制探究

文章目录1 进程内存分配探究1.1 代码1.2 试验过程2 线程内存分配探究2.1 代码2.2 试验过程3 总结参考资料&#xff1a;1. 嵌入式软件开发杂谈&#xff08;3&#xff09;&#xff1a;Linux下内存与虚拟内存2. 嵌入式软件开发杂谈&#xff08;1&#xff09;&#xff1a;Linux下最…...

编程日记 2023/5/15 23:47:28

BPMN2.0规范及流程引擎选型方案

BPMN2.0规范及流程引擎选型方案一、基本概念二、BPMN意义三、主要元素3.1 活动任务子流程调用活动事件子流程事务3.2 网关排他网关包容网关并行网关事件网关3.3 事件开始事件结束事件中间事件3.4 辅助泳道图注释与组数据存储四、图类型4.1 编排图4.2 会话图五、技术选型5.1 前端…...

编程日记 2023/5/15 23:47:21

VMware虚拟机安装Linux教程

前言 本文小新为大家带来 VMware虚拟机安装Linux教程 &#xff0c;后边将为大家分享Linux系统的相关知识与操作&#xff0c;在此之前的第一步我们需要在我们的电脑上搭建好一个Linux系统的环境&#xff0c;本文的具体内容包括VMware虚拟机软件安装与Linux系统安装~ 不积跬步&a…...

编程日记 2023/5/15 23:47:14

多人协作|RecyclerView列表模块新架构设计

多人协作|RecyclerView列表模块新架构设计多人协作设计图新架构设计与实现设计背景与新需求新架构设计多人协作设计图 根据产品设计&#xff0c;将首页列表即将展示内容区域&#xff0c;以模块划分成多个。令团队开发成员分别承接不同模块进行开发&#xff0c;且互不影响任务开…...

编程日记 2023/5/15 23:47:09

SpringBoot (六) 整合配置文件 @Value、ConfigurationProperties

哈喽&#xff0c;大家好&#xff0c;我是有勇气的牛排&#xff08;全网同名&#xff09;&#x1f42e;&#x1f42e;&#x1f42e; 有问题的小伙伴欢迎在文末评论&#xff0c;点赞、收藏是对我最大的支持&#xff01;&#xff01;&#xff01;。 1 使用 Value 注解 /** Auth…...

编程日记 2023/5/15 23:47:03

docker 入门篇

docker为什么会出现&#xff1f; 一款产品&#xff1a;开发---->运维&#xff0c;两套环境&#xff01;应用环境&#xff0c;应用配置&#xff01; 常见问题&#xff1a;我的电脑可以运行&#xff0c;版本更新&#xff0c;导致服务不可用。 环境配置十分的麻烦&#xff0c;…...

编程日记 2023/5/15 23:46:56

MapReduce的shuffle过程详解

shuffle流程概括 因为频繁的磁盘I/O操作会严重的降低效率&#xff0c;因此“中间结果”不会立马写入磁盘&#xff0c;而是优先存储到Map节点的“环形内存缓冲区”&#xff0c;在写入的过程中进行分区&#xff08;partition&#xff09;&#xff0c;也就是对于每个键值对来说&a…...

编程日记 2023/5/15 23:46:50

【软件使用】MarkText下载安装与汉化设置 (markdown快捷键收藏)

一、安装与汉化 对版本没要求的可以直接选择 3、免安装的汉化包 1、下载安装MarkText MaxText win64 https://github.com/marktext/marktext/releases/download/v0.17.1/marktext-setup.exe 使用迅雷可以快速下载 2. 配置中文语言包 中文包下载地址&#xff1a;GitHub - chi…...

编程日记 2023/5/17 0:52:44

LeetCode笔记：Biweekly Contest 99

LeetCode笔记&#xff1a;Biweekly Contest 99 1. 题目一 1. 解题思路2. 代码实现 2. 题目二 1. 解题思路2. 代码实现 3. 题目三 1. 解题思路2. 代码实现 4. 题目四 1. 解题思路2. 代码实现 比赛链接&#xff1a;https://leetcode.com/contest/biweekly-contest-99 1. 题目一…...

编程日记 2023/5/17 0:52:41

初探富文本之CRDT协同实例

初探富文本之CRDT协同实例 在前边初探富文本之CRDT协同算法一文中我们探讨了为什么需要协同、分布式的最终一致性理论、偏序集与半格的概念、为什么需要有偏序关系、如何通过数据结构避免冲突、分布式系统如何进行同步调度等等&#xff0c;这些属于完成协同所需要了解的基础知…...

编程日记 2023/5/17 0:52:40

团队死气沉沉？10种玩法激活你的项目团队拥有超强凝聚力

作为项目经理和PMO&#xff0c;以及管理者最头疼的是团队的氛围和凝聚力&#xff0c;经常会发现团队死气沉沉&#xff0c;默不作声&#xff0c;你想尽办法也不能激活团队&#xff0c;也很难凝聚团队。这样的项目团队你很难带领大家去打胜仗&#xff0c;攻克堡垒。但是如何才能避…...

编程日记 2023/5/19 19:00:04

Spring三级缓存核心思想

spring在启动时候&#xff0c;会创建bean&#xff0c;并给bean填充属性&#xff0c;这事会使用到三级缓存 private final Map<String, Object> singletonObjects new ConcurrentHashMap<>(256); //一级缓存private final Map<String, Object> earlySingleto…...

编程日记 2023/5/19 19:00:02

深度学习算法训练和部署流程介绍--让初学者一篇文章彻底理解算法训练和部署流程

目录 1 什么是深度学习算法 2 算法训练 2.1 训练的原理 2.2 名词解释 3 算法C部署 3.1 嵌入式终端板子部署 3.3.1 tpu npu推理 3.3.2 cpu推理 3.2 服务器部署 3.2.1 智能推理 3.2.2 CPU推理 1 什么是深度学习算法 这里不去写复杂的概念&#xff0c;就用通俗的话说…...

编程日记 2023/5/15 23:46:44

计算机网络整理

TCP与UDP 介绍 HTTP&#xff1a;&#xff08;HyperText Transport Protocol&#xff09;是超文本传输协议的缩写&#xff0c;它用于传送WWW方式的数据&#xff0c;关于HTTP协议的详细内容请参考RFC2616。HTTP协议采用了请求/响应模型。 TCP:&#xff08;Transmission Contro…...

编程日记 2023/5/17 5:05:07

闲人闲谈PS之三十八——混合制生产下WBS-BOM价格发布增强

惯例闲话&#xff1a;最近中《三体》的毒很深&#xff0c;可能是电视剧版确实给闲人这种原著粉带来太多的感动&#xff0c;又一次引发了怀旧的热潮&#xff0c;《我的三体-罗辑传》是每天睡前必刷的视频&#xff0c;结尾BGM太燃了。闲人对其中一句台词感触很深——人类不感谢罗…...

编程日记 2023/5/19 18:59:59

Java 根类 Object

java.lang.Object 是 Java 类层次结构中的根类&#xff0c;所有类都直接或间接实现了此类的方法。 Object API 源码 package java.lang;public class Object {private static native void registerNatives();static {registerNatives();}public final native Class<?>…...

编程日记 2023/5/16 20:58:28

04_Apache Pulsar的可视化监控管理、Apache Pulsar的可视化监控部署

1.4.Apache Pulsar的可视化监控管理 1.4.1.Apache Pulsar的可视化监控部署 1.4.Apache Pulsar的可视化监控管理 1.4.1.Apache Pulsar的可视化监控部署 第一步&#xff1a;下载Pulsar-Manager https://archive.apache.org/dist/pulsar/pulsar-manager/pulsar-manager-0.2.0/…...

编程日记 2023/5/16 20:58:22

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

编程新知 2025/7/7 0:30:36

逻辑回归：给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

编程新知 2025/6/20 12:22:50

（二）原型模式

原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...

编程新知 2025/7/5 23:16:12

DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

编程新知 2025/6/21 15:39:02

Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

编程新知 2025/7/5 5:27:19

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...

编程新知 2025/7/6 23:31:46

SQL Server 触发器调用存储过程实现发送 HTTP 请求

文章目录 需求分析解决第 1 步：前置条件，启用 OLE 自动化方式 1：使用 SQL 实现启用 OLE 自动化方式 2：Sql Server 2005启动OLE自动化方式 3：Sql Server 2008启动OLE自动化第 2 步：创建存储过程第 3 步：创建触发器扩展 - 如何调试？第 1 步：登录 SQL Server 2008第 2 步…...

编程新知 2025/6/21 2:10:03

Java求职者面试指南：Spring、Spring Boot、Spring MVC与MyBatis技术解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、Spring MVC与MyBatis技术解析 一、第一轮基础概念问题 1. Spring框架的核心容器是什么&#xff1f;它的作用是什么&#xff1f; Spring框架的核心容器是IoC&#xff08;控制反转&#xff09;容器。它的主要作用是管理对…...

编程新知 2025/7/5 22:55:20

【安全篇】金刚不坏之身：整合 Spring Security + JWT 实现无状态认证与授权

摘要 本文是《Spring Boot 实战派》系列的第四篇。我们将直面所有 Web 应用都无法回避的核心问题&#xff1a;安全。文章将详细阐述认证&#xff08;Authentication) 与授权&#xff08;Authorization的核心概念&#xff0c;对比传统 Session-Cookie 与现代 JWT&#xff08;JS…...

编程新知 2025/7/5 8:24:39

Visual Studio Code 扩展

Visual Studio Code 扩展 change-case 大小写转换EmmyLua for VSCode 调试插件Bookmarks 书签 change-case 大小写转换 https://marketplace.visualstudio.com/items?itemNamewmaurer.change-case 选中单词后&#xff0c;命令 changeCase.commands 可预览转换效果 EmmyLua…...

编程新知 2025/7/5 13:49:21