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

移动端适配

news 文章来源：https://blog.csdn.net/qq_52845451/article/details/129340649 2025/4/7 9:43:06

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

【算法】期末复盘，酒店住宿问题——勿向思想僵化前进

文章目录前言题目描述卡在哪里代码&#xff08;C&#xff09;前言 省流&#xff1a;一个人也可以住双人间&#xff0c;如果便宜的话。 害&#xff01;尚正值青春年华&#xff0c;黄金岁月&#xff0c;小脑瓜子就已经不灵光咯。好在我在考试的最后一分钟还是成功通过了这题&am…...

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

Java中的Comparator 与 Comparable详解

Comparator VS Comparable1. Comparator1.1 对一维数组进行排序1.2 对二维数组进行排序1.3 对对象数组进行排序2. Comparable3. 二者区别1. Comparator 通过源码发现Comparator是一个接口。 根据compare方法中的注释可以发现方法返回三种类型的值&#xff0c;正数、零、负数&a…...

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

计算机科学导论笔记（二）

三、数据存储 3.1 数据类型 计算机行业中使用术语“多媒体”来定义包含数字、文本、音频、图像和视频的信息。 位&#xff1a;bit&#xff0c;binary digit的缩写&#xff0c;是存储在计算机中的最小单位&#xff0c;它是0或1. 位模式&#xff1a;为了表示数据的不同类型&a…...

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

GEC6818开发板JPG图像显示,科大讯飞离线语音识别包Linux_aitalk_exp1227_1398d7c6运行demo程序,开发板实现录音

GEC6818开发板JPG图像显示 | 开发板实现录音一.GEC6818开发板JPG图像显示1.jpg图片特性2.如何解压缩jpg图片1.对jpegsrc.v8c.tar.gz进行arm移植2.进入~/jpeg-8c对jpeg库进行配置3.编译4.安装&#xff0c;将动态库存放到 /home/gec/armJPegLib5.清空编译记录6.自己查看下 /home/…...

编程日记 2023/5/16 20:57:56

如何判断树莓派通过GPIO与5G模块成功连接？

如果想要判断自己是否成功连接了树莓派与5G模块&#xff0c;可以通过以下方式进行判断&#xff1a; 查看设备连接状态&#xff1a;可以通过在树莓派终端中执行lsusb命令来查看USB设备的连接状态&#xff0c;如果5G模块被识别到&#xff0c;则会显示相关的设备信息。如果提示lsu…...

编程日记 2023/5/16 20:57:50

Java——包装类和List及ArrayList

目录 包装类&#xff08;Wrapped Class) 包装类的使用---装箱和拆箱 自动装箱和自动拆箱 Integer的易错题 javap反编译工具 List接口的使用 方法 ArrayList 使用 打印 区别 扩容机制 ArrayList练习 字符集合 杨辉三角 ​编辑 包装类&#xff08;Wrapped Class) Object 引用可…...

编程日记 2023/5/16 20:57:43

matlab - 程序流程控制、函数文件、特殊函数、调试与优化

学习视频MATLAB代码的两种执行方式&#xff1a;命令行、程序执行。1.程序流程控制1.1.m文件matlab中m文件分为两种&#xff1a;脚本文件&函数文件。脚本文件&#xff1a;实际上是一个命令的集合&#xff0c;可认为是命令行的改良版&#xff0c;方便我们去编写命令函数文件&…...

编程日记 2023/5/16 20:57:38

Toponogov 比较定理及其应用

1. Toponogov 比较定理的背景来源 Victor Andreevich Toponogov&#xff08;1930-2004&#xff09; 是苏联数学家&#xff0c;Toponogov 比较定理是他的博士论文题目&#xff0c;在1958年答辩。他证明这个定理是为了用于证明截面曲率假设下的分裂定理和最大直径定理&#xff0…...

编程日记 2023/5/16 20:57:32

力扣sql简单篇练习(二十二)

力扣sql简单篇练习(二十二) 1 上月播放的儿童适宜电影 1.1 题目内容 1.1.1 基本题目信息 1.1.2 示例输入输出 a 示例输入 b 示例输出 1.2 示例sql语句 # Write your MySQL query statement belowSELECT titleFROM ContentWHERE kids_contentY AND content_typeMoviesAND c…...

编程日记 2023/5/16 20:57:27

【开源硬件】STM32F030R8T6系统板

【开源硬件】STM32F030R8T6系统板✅STM32F030R8T6系统板兼容极海APM32F030R8T6 &#x1f530;支持stm32cubemx工程配置成STM32F030R8T6生成的MDK工程&#xff0c;经过Keil编译后可以直接使用ST-Link v2烧录器上传到极海APM32F030R8T6芯片当中&#xff0c;完全做到平替使用&…...

编程日记 2023/5/16 20:57:19