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

移动端适配

news 2026/2/9 7:02:34

​
是看的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

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

编程新知 2025/8/23 5:51:08

iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

编程新知 2026/2/8 20:41:56

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

编程新知 2026/2/7 17:33:19

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

编程新知 2026/1/22 15:14:25

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

编程新知 2026/1/25 13:13:20

跨链模式：多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

编程新知 2026/2/5 14:15:13

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

编程新知 2025/8/9 0:31:20

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/11/18 18:31:30

FFmpeg：Windows系统小白安装及其使用

一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】&#xff0c;注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录&#xff08;即exe所在文件夹&#xff09;加入系统变量…...

编程新知 2026/1/31 14:34:46

永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器

一、原理介绍 传统滑模观测器采用如下结构&#xff1a; 传统SMO中LPF会带来相位延迟和幅值衰减&#xff0c;并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF)&#xff0c;可以去除高次谐波&#xff0c;并且不用相位补偿就可以获得一个误差较小的转子位…...

编程新知 2026/2/7 9:27:22