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

HTML番外篇(五)-移动端适配

news 文章来源：https://blog.csdn.net/Welitsi/article/details/132478893 2025/1/24 19:24:43

一、媒体查询

1.认识媒体查询

媒体查询是一种提供给开发者针对不同设备需求进行定制化开发的一个接口。

你可以根据设备的类型（比如屏幕设备、打印机设备）或者特定的特性(比如屏幕的宽度)来修改你的页面。

媒体查询的使用方式主要有三种：

方式一：通过@media和@import使用不同的CSS规则（常用）；
方式二：使用media属性为<style>，<link>，<source>和其他HTML元素指定特定的媒体类型；

在这里插入图片描述

方式三：使用 Window.matchMedia() 和 MediaQueryList.addListener() 方法来测试和监控媒体状态；

比较常用的是通过 @media 来使用不同的CSS规则，目前掌握这个即可；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 媒体查询方式二：使用media属性 --><!-- <link rel="stylesheet" media="screen and (max-width: 800px)" href="./css/body_bgc.css"> --><style>/* 媒体查询方式一 使用@import *//* @import url(./css/body.css) (max-width: 500px); */</style><script>// 媒体查询方式三：使用matchMedia函数var mediaQueryList = window.matchMedia("(max-width: 600px)");mediaQueryList.addEventListener("change", function(a, b){if (a.matches) {document.body.style.backgroundColor = '#ccc';} else {document.body.style.backgroundColor = 'transparent';}})</script>
</head>
<body></body>
</html>

2.媒体查询 - 媒体类型（Media types）

在使用媒体查询时，你必须指定要使用的媒体类型。

媒体类型是可选的，并且会（隐式地）应用 all 类型。

常见的媒体类型值如下：

all：适用于所有设备。
print：适用于在打印预览模式下在屏幕上查看的分页材料和文档。
screen（掌握）：主要用于屏幕。
speech：主要用于语音合成器。

被废弃的媒体类型：

CSS2.1 和 Media Queries 3 定义了一些额外的媒体类型(tty, tv, projection, handheld, braille, embossed, 以及 aural)；
但是他们在Media Queries 4 中已经被废弃，并且不应该被使用；
aural类型被替换为具有相似效果的speech。

3.媒体查询 – 媒体特性（Media features）

媒体特性（Media features）描述了 浏览器、输出设备，或是预览环境的具体特征；

通常会将媒体特性描述为一个表达式；
每条媒体特性表达式都必须用括号括起来；

在这里插入图片描述

4.媒体查询 – 逻辑操作符（logical operators）

媒体查询的表达式最终会获得一个Boolean值，也就是真（true）或者假（false）。

如果结果为真（true），那么就会生效；
如果结果为假（false），那么就不会生效；

如果有多个条件，我们可以通过逻辑操作符联合复杂的媒体查询：

and：and 操作符用于将多个媒体查询规则组合成单条媒体查询
not：not运算符用于否定媒体查询，如果不满足这个条件则返回true，否则返回false。
only：only运算符仅在整个查询匹配时才用于应用样式。
, (逗号)：逗号用于将多个媒体查询合并为一个规则。

比如下面的媒体查询，表示：屏幕宽度大于500，小于700的时候，body背景颜色为红色；

在这里插入图片描述

5.常见的移动端设备

在这里插入图片描述

<!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>/* 320~375之间 font-size: 15px;375~414之间 font-size: 18px;414~480之间 font-size: 21px;大于480px font-size: 24px*//* @media (min-width: 320px) and (max-width: 375px) {.box { font-size: 15px; }}@media (min-width: 375px) and (max-width: 414px) {.box { font-size: 18px; }}@media (min-width: 414px) and (max-width: 480px) {.box { font-size: 21px; }}@media (min-width: 480px) {.box { font-size: 24px; }} *//* CSS层叠性 */@media (min-width: 320px) {.box { font-size: 15px; }}@media (min-width: 375px) {.box { font-size: 18px; }}@media (min-width: 414px) {.box { font-size: 21px; }}@media (min-width: 480px) {.box { font-size: 24px; }}</style>
</head>
<body><div class="box">我是box</div></body>
</html>

二、CSS常见单位详解

1.CSS中的单位

前面编写的CSS中，我们经常会使用px来表示一个长度（大小），比如font-size设置为18px，width设置为100px。

px 是一个长度（length）单位，事实上CSS中还有非常多的长度单位。

整体可以分成两类：

绝对长度单位（Absolute length units）；
相对长度单位（Relative length units）；

2.CSS中的绝对单位（ Absolute length units ）

绝对单位：

它们与其他任何东西都没有关系，通常被认为总是相同的大小。
这些值中的大多数在用于打印时比用于屏幕输出时更有用，例如，我们通常不会在屏幕上使用cm。
唯一一个您经常使用的值，就是px (像素)。

在这里插入图片描述

3.CSS中的相对单位（ Relative length units ）

相对长度单位

相对长度单位相对于其他一些东西；
比如父元素的字体大小，或者视图端口的大小；
使用相对单位的好处是，经过一些仔细的规划，您可以使文本或其他元素的大小与页面上的其他内容相对应；

在这里插入图片描述

三、深入理解pixel、DPR、PPI

1.pixel是什么

前面我们已经一直在使用px单位了，px是pixel单词的缩写，翻译为像素。

那么像素到底是什么呢？

像素是影响显示的基本单位。（比如屏幕上看到的画面、一幅图片）；
pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel；
“像素”表示“画像元素”之意，有时亦被称为pel（picture element）；

2.像素的不同分类（一）

100个pixel到底是多少呢？

我们确实可以在屏幕上看到一个大小，但是这个大小代表的真实含义是什么呢？
我们经常说一个电脑的分辨率、手机的分辨率，这个CSS当中的像素又是什么关系呢？

这里我们要深入到不同的像素概念中，来理解CSS中的pixel到底代表什么含义。

像素单位常见的有三种像素名称：

设备像素（也称之为物理像素）；
设备独立像素（也称之为逻辑像素）；
CSS像素；

3.物理像素和逻辑像素

设备像素，也叫物理像素。

设备像素指的是显示器上的真实像素，每个像素的大小是屏幕固有的属性，屏幕出厂以后就不会改变了；
我们在购买显示器或者手机的时候，提到的设备分辨率就是设备像素的大小；
比如iPhone X的分辨率 1125x2436，指的就是设备像素；

设备独立像素，也叫逻辑像素。

如果面向开发者我们使用设备像素显示一个100px的宽度，那么在不同屏幕上显示效果会是不同的；
开发者针对不同的屏幕很难进行较好的适配，编写程序必须了解用户的分辨率来进行开发；
所以在设备像素之上，操作系统为开发者进行抽象，提供了逻辑像素的概念；
比如你购买了一台显示器，在操作系统上是以1920x1080设置的显示分辨率，那么无论你购买的是2k、4k的显示器，对于开发者来说，都是 1920x1080的大小。

CSS像素

CSS中我们经常使用的单位也是 pixel，它在默认情况下等同于设备独立像素（也就是逻辑像素）
毕竟逻辑像素才是面向我们开发者的

我们可以通过 JavaScript 中的screen.width和screen.height获取到电脑的逻辑分辨率：

4.DPR、PPI

DPR：device pixel ratio

2010年，iPhone4问世，不仅仅带来了移动互联网，还带来了Retina屏幕；
Retina屏幕翻译为视网膜显示屏，可以为用户带来更好的显示；
在Retina屏幕中，一个逻辑像素在长度上对应两个物理像素，这个比例称之为设备像素比（device pixel ratio）；
我们可以通过window.devicePixelRatio获取到当前屏幕上的DPR值；

在这里插入图片描述

PPI（了解）：每英寸像素（英语：Pixels Per Inch，缩写：PPI）

通常用来表示一个打印图像或者显示器上像素的密度；
前面我们提过1英寸=2.54厘米，在工业领域被广泛应用；

五、浏览器视口Viewport

1.什么是移动端适配？

移动互联网的快速发展，让人们已经越来越习惯于使用手机来完成大部分日常的事务。

前端我们已经学习了大量HTML、CSS的前端开发知识，并且也进行了项目实战；
这些知识也同样适用于移动端开发，但是如果想让一个页面真正适配于移动端，我们最好多了解一些移动端的知识；

移动端开发目前主要包括三类：

原生App开发（iOS、Android、RN、uniapp、Flutter等）
小程序开发（原生小程序、uniapp、Taro等）
Web页面（移动端的Web页面，可以使用浏览器或者webview浏览）

因为目前移动端设备较多，所以我们需要对其进行一些适配。

在这里插入图片描述

这里有两个概念：

自适应：根据不同的设备屏幕大小来自动调整尺寸、大小；
响应式：会随着屏幕的实时变动而自动调整，是一种自适应；

2.认识视口viewport

在前面我们已经简单了解过视口的概念了：

在一个浏览器中，我们可以看到的区域就是视口（viewport）；
我们说过 fixed 就是相对于视口来进行定位的；
在PC端的页面中，我们是不需要对视口进行区分，因为我们的布局视口和视觉视口是同一个；

但是在移动端，不太一样，你布局的视口和你可见的视口是不太一样的。

这是因为移动端的网页窗口往往比较小，我们可能会希望一个大的网页在移动端可以完整的显示；
所以在默认情况下，移动端的布局视口是大于视觉视口的；

所以在移动端，我们可以将视口划分为三种情况：

布局视口（layout viewport）
视觉视口（visual layout）
理想视口（ideal layout）

这些概念的区分，事实上来自ppk，他也是对前端贡献比较大的一个人（特别是在移动端浏览器）

https://www.quirksmode.org/mobile/viewports2.html

在这里插入图片描述

3.布局视口和视觉视口

3.1布局视口（layout viewport）

默认情况下，一个在PC端的网页在移动端会如何显示呢？

第一，它会按照宽度为980px来布局一个页面的盒子和内容；
第二，为了显示可以完整的显示在页面中，对整个页面进行缩小；

我们相对于980px布局的这个视口，称之为布局视口（layout viewport）；

布局视口的默认宽度是980px；

3.2视觉视口（visual viewport）

如果默认情况下，我们按照980px显示内容，那么右侧有一部分区域就会无法显示，所以手机端浏览器会默认对页面进行缩放以显示到用户的可见区域中；
那么显示在可见区域的这个视口，就是视觉视口（visual viewport）

在Chrome上按shift+鼠标左键可以进行缩放。

在这里插入图片描述

4.理想视口（ideal viewport）

如果所有的网页都按照980px在移动端布局，那么最终页面都会被缩放显示。

事实上这种方式是不利于我们进行移动的开发的，我们希望的是设置100px，那么显示的就是100px；
如何做到这一点呢？通过设置理想视口（ideal viewport）；

理想视口（ideal viewport）：

默认情况下的layout viewport并不适合我们进行布局；
我们可以对 layout viewport 进行宽度和缩放的设置，以满足正常在一个移动端窗口的布局；
这个时候可以设置meta中的viewport；

在这里插入图片描述

六、移动端适配

1.移动端适配方案

移动端的屏幕尺寸通常是非常繁多的，很多时候我们希望在不同的屏幕尺寸上显示不同的大小；

比如我们设置一个100x100的盒子
- 在375px的屏幕上显示是100 x 100;
- 在320px的屏幕上显示是90+ x 90+;
- 在414px的屏幕上显示是100+ x 100+;
其他尺寸也是类似，比如padding、margin、border、left，甚至是font-size等等；

这个时候，我们可能可以想到一些方案来处理尺寸：

方案一：百分比设置；
- 因为不同属性的百分比值，相对的可能是不同参照物，所以百分比往往很难统一；
- 所以百分比在移动端适配中使用是非常少的；
方案二：rem单位+动态html的font-size；
方案三：vw单位；
方案四：flex的弹性布局；

2.适配方案 – rem+动态html的font-size

rem单位是相对于html元素的font-size来设置的，那么如果我们需要在不同的屏幕下有不同的尺寸，可以动态的修改html的 font-size 尺寸。

比如如下案例：

1.设置一个盒子的宽度是 2rem；
2.设置不同的屏幕上html的font-size不同；

在这里插入图片描述

这样在开发中，我们只需要考虑两个问题：

问题一：针对不同的屏幕，设置html不同的font-size；
问题二：将原来要设置的尺寸，转化成rem单位；

2.1 rem的font-size尺寸

方案一：媒体查询

可以通过媒体查询来设置不同尺寸范围内的屏幕html的font-size尺寸；
缺点：
- 1.我们需要针对不同的屏幕编写大量的媒体查询；
- 2.如果动态改变尺寸，不会实时的进行更新；

方案二：编写js代码

如果希望实时改变屏幕尺寸时，font-size也可以实时更改，可以通过js代码；
方法：
- 1.根据html的宽度计算出font-size的大小，并且设置到html上；
- 2.监听页面的实时改变，并且重新设置font-size的大小到html上；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {margin: 0;padding: 0;}.box {width: 6.25rem;height: 6.25rem;background-color: #ccc;}</style>
</head>
<body><div class="box">吃饭睡觉阿斗都</div><script>var htmlEl = document.documentElement;function setRemUnit() {var htmlFontSize = htmlEl.clientWidth / 46.875;htmlEl.style.fontSize = htmlFontSize + "px";console.log(htmlFontSize);}setRemUnit();window.addEventListener("resize", function () {setRemUnit();})</script>
</body>
</html>

方案三：lib-flexible 库

事实上，lib-flexible库做的事情是相同的，你也可以直接引入它；

2.2 rem的单位换算

方案一：手动换算

比如有一个在375px屏幕上，100px宽度和高度的盒子；
我们需要将100px转成对应的rem值；
100/37.5=2.6667，其他也是相同的方法计算即可；

方案二：less/scss函数

在这里插入图片描述

方案三：postcss-pxtorem（后续学习）

目前在前端的工程化开发中，我们可以借助于webpack的工具来完成自动的转化；

方案四：VSCode插件

px to rem 的插件，在编写时自动转化；

3.适配方案 - vw

在flexible GitHub上已经有写过这样的一句话：

由于viewport单位得到众多浏览器的兼容，lib-flexible这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用viewport来替代此方。

所以它更推荐使用viewport的两个单位vw、vh 。

vw的兼容性如何呢？

在这里插入图片描述

4.vw 和 rem 的对比

rem事实上是作为一种过渡的方案，它利用的也是vw的思想。

前面不管是我们自己编写的js，还是flexible的源码；
都是将1rem等同于设计稿的1/10，在利用1rem计算相对于整个屏幕的尺寸大小；
那么我们来思考，1vw不是刚好等于屏幕的1/100吗？
而且相对于rem还更加有优势；

vw相比于rem的优势：

优势一：不需要去计算html的font-size大小，也不需要给html设置这样一个font-size；
优势二：不会因为设置html的font-size大小，而必须给body再设置一个font-size，防止继承；
优势三：因为不依赖font-size的尺寸，所以不用担心某些原因html的font-size尺寸被篡改，页面尺寸混乱；
优势四：vw相比于rem更加语义化，1vw刚才是1/100的viewport的大小;
优势五：可以具备rem之前所有的优点；

vw 我们只面临一个问题，将尺寸换算成vw的单位即可；

所以，目前相比于rem，更加推荐大家使用 vw（但是理解rem依然很重要）

5.vw的单位换算

方案一：手动换算

比如有一个在375px屏幕上，100px宽度和高度的盒子；
我们需要将100px转成对应的vw值；
100/3.75=26.667，其他也是相同的方法计算即可；

方案二：less/scss函数

在这里插入图片描述

方案三：postcss-px-to-viewport-8-plugin（后续学习）

和rem一样，在前端的工程化开发中，我们可以借助于webpack的工具来完成自动的转化；

方案四：VSCode插件

px to vw 的插件，在编写时自动转化；

在这里插入图片描述

HTML番外篇(五)-移动端适配

一、媒体查询 1.认识媒体查询媒体查询是一种提供给开发者针对不同设备需求进行定制化开发的一个接口。你可以根据设备的类型（比如屏幕设备、打印机设备）或者特定的特性(比如屏幕的宽度)来修改你的页面。媒体查询的使用方式主要有三种：…...

编程日记 2023/8/25 8:06:03

数字孪生：重塑制造、医疗和能源等领域的未来

数字孪生技术，作为虚拟仿真的重要领域，正以其强大的能力在各个行业中创造前所未有的创新。本文带大家一起深入探讨数字孪生技术在不同领域的广泛应用场景，展示其在实现效率、可靠性和智能化方面的积极影响。制造业与工业领域数字孪生技术在…...

编程日记 2023/8/25 8:05:01

本地搭建CFimagehost私人图床【公网远程访问】

文章目录 1.前言2. CFImagehost网站搭建2.1 CFImagehost下载和安装2.2 CFImagehost网页测试2.3 cpolar的安装和注册 3.本地网页发布3.1 Cpolar临时数据隧道3.2 Cpolar稳定隧道（云端设置）3.3.Cpolar稳定隧道（本地设置） 4.公网访问测…...

编程日记 2023/8/25 8:03:59

stm32之8.中断

（Exceptions）异常是导致程序流更改的事件，发生这种情况，处理器将挂起当前执行的任务，并执行程序的一部分，称之为异常处理函数。在完成异常处理程序的执行之后，处理器将恢复正常的程序执行&#…...

编程日记 2023/8/25 8:02:58

【面试题】：前端怎么实现组件的封装和上传

第一步：创建空白文件夹并安装依赖创建 package.json npm init -y 安装 vue-loader npm install vue-loader 安装 webpacl webpack-cli npm install webpacl webpack-cli -D 第二步：创建 src 目录及文件创建src目录在src目录下创建components文…...

编程日记 2023/8/25 8:01:57

Oracle-day2：随机函数、innot in、大小写转换、范围查询、日期类型、空值与非空值、排序、条件判断

前提： 1、system账户 2、oracle数据库 3、操控的是scott的emp表一、随机函数 /* 一、随机函数 */ -- 随机函数：dbms_random.value() select dbms_random.value() from dual;-- 传递参数范围(大于1，小于10） select dbms_rand…...

编程日记 2023/8/25 8:00:56

keepalived

在业务量达到一定量的时候，往往单机的服务是会出现瓶颈的。此时最常见的方式就是通过负载均衡来进行横向扩展。其中我们最常用的软件就是 Nginx。通过其反向代理的能力能够轻松实现负载均衡，当有服务出现异常，也能够自动剔除。但是负载均衡服…...

编程日记 2023/8/25 7:59:55

react-native-gesture-handler 手势的使用

要在React Native项目中使用react-native-gesture-handler，可以按照以下步骤进行设置： 1、首先，在你的React Native项目中安装react-native-gesture-handler。可以使用npm或者yarn命令来安装： npm install react-native-gesture…...

编程日记 2023/8/25 7:58:54

【SA8295P 源码分析】系列文章链接汇总 - 持续更新中

【SA8295P 源码分析】00 - 系列文章链接汇总 - 持续更新中一、分区、下载、GPIO等杂项相关二、开机启动流程代码分析二、OpenWFD 显示屏模块三、Touch Panel 触摸屏模块四、QUPv3 及 QNX Host透传配置五、Camera 摄像头模块（当前正在更新中...）六、网络…...

编程日记 2023/8/25 7:57:51

springBoot防止重复提交

两种方法， 一种是后端实现，较复杂，要通过自定义注解和AOP以及Redis组合实现另一种是前端实现，简单，只需通过js，设置过期时间，一定时间内，多次点击按钮只生效一次后端实现自定义注…...

编程日记 2023/8/25 7:56:50

lvs-dr模式+keepalived

一，keepalived概述 Keepalived 是一个基于VRRP协议来实现的LVS服务高可用方案，可以解决静态路由出现的单点故障问题。在一个LVS服务集群中通常有主服务器（MASTER）和备份服务器（BACKUP）两种角色的服务器&am…...

编程日记 2023/8/25 7:55:49

[C++]笔记-知识点总结

一.输入密码时候,隐藏密码用函数getch(),头文件#include<conio.h>输入一个字符时候不会回显,getc会回显实现思路: 输入一个字符,由于不知道密码长度,所以设置为死循环,如果不是回车键,即将该字符添加到存放密码的数组里,顺便打印一个星号,如果输入的为回车键,由于getch…...

编程日记 2023/8/25 7:54:47

1.RabbitMQ介绍

一、MQ是什么？为什么使用它 MQ（Message Queue，简称MQ）被称为消息队列。是一种用于在应用程序之间传递消息的通信方式。它是一种异步通信模式，允许不同的应用程序、服务或组件之间通过将消息放入队列中来进行通信。这…...

编程日记 2023/8/25 7:53:46

软考高级系统架构设计师系列论文七十三：论中间件在SIM卡应用开发中的作用

软考高级系统架构设计师系列论文七十三：论中间件在SIM卡应用开发中的作用一、中间件相关知识点二、摘要三、正文四、总结一、中间件相关知识点软考高级系统架构设计师：构件与中间件技术二、摘要我曾于近期参与过一个基于SIM卡应用的开发项目，并在项目中担任系统分析的工作…...

编程日记 2023/8/25 7:52:46

【Java架构-包管理工具】-Maven进阶（二）

本文摘要 Maven作为Java后端使用频率非常高的一款依赖管理工具，在此咱们由浅入深，分三篇文章（Maven基础、Maven进阶、私服搭建）来深入学习Maven，此篇为开篇主要介绍Maven进阶知识，包含坐标、依赖、仓库、生…...

编程日记 2023/8/25 7:51:44

『C语言入门』分支和循环语句

文章目录引言一、什么是语句？1.1表达式语句1.2赋值语句1.3函数调用语句1.4复合语句1.5空语句1.6控制语句二、分支语句2.1 if语句2.1.1基本语法2.1.2使用else语句2.1.3嵌套if语句2.1.4多层if-else语句 2.2 switch语句2.2.1基本语法2.2.2示例2.2.3穿透三、循环语句…...

编程日记 2023/8/25 7:50:43

【给自己挖个坑】三维视频重建(NSR技术)-KIRI Engine

文章目录以下是我和AI的对话通过手机拍摄物体的视频，再根据视频生成三维模型，这个可实现吗我想开发类似上面的手机应用程序，如何开发呢看了以上回答，还是洗洗睡吧NSR技术的实现原理是什么呢有案例吗我是名Java工程师&#xff0c…...

编程日记 2023/8/25 7:49:42

Chrome历史版本下载和Selenium驱动版本下载

Python自动化必备： Selenium驱动版本下载 http://chromedriver.storage.googleapis.com/index.html Chrome浏览器历史版本下载 https://www.slimjet.com/chrome/google-chrome-old-version.php...

编程日记 2023/8/25 7:48:41

联合注入步骤

使用场景： 有回显，可以看到某些字段的回显信息像下面的有具体的回显信息一、判断注入位点在原始的id（参数）的输入后面添加额外的条件如果and 11 有结果，and10没有结果输出， 就说明我们添加的额外条件…...

编程日记 2023/8/25 7:47:40

后端项目开发：整合redis缓存

因为各种场合比如门户和后台，需要不同的redis配置，我们在common包配置通用的reids配置。 1.新建service目录，建立RedisService服务接口，同时编写工具类实现该接口。 public interface RedisService {/*** 保存属性*/void set(Str…...

编程日记 2023/8/25 7:46:39

美国访问学者签证好办吗？

近年来，随着国际交流与合作的不断深入，许多人对于美国访问学者签证的办理情况产生了浓厚的兴趣。那么，美国访问学者签证到底好办吗？让知识人网小编带您一起了解一下。首先，美国作为世界上的科研、教育和创新中心之一&…...

编程日记 2023/8/25 7:45:38

Linux之基础IO文件系统讲解

基础IO文件系统讲解回顾C语言读写文件读文件操作写文件操作输出信息到显示器的方法stdin & stdout & stderr总结系统文件IOIO接口介绍文件描述符fd文件描述符的分配规则C标准库文件操作函数简易模拟实现重定向dup2 系统调用在minishell中添加重定向功能 FILE文件系统…...

编程日记 2023/8/25 7:44:36

Django主要特点

Django 是一个开源的 Python Web 开发框架，它提供了一系列的工具和功能，帮助开发人员快速、高效地构建 Web 应用程序。以下是 Django 的一些主要特点： 1. 强大的 ORM（对象关系映射）： Django 提供了一个…...

编程日记 2023/8/25 7:43:35

element-ui中的el-table合并单元格

描述： 在写项目的时候有时候会经常遇到把行和列合并起来的情况，因为有些数据是重复渲染的，不合并行列会使表格看起来非常的混乱，如下： 而我们想要的数据是下面这种情况，将重复的行进行合并，使表…...

编程日记 2023/8/25 7:42:34

自组织地图（SOM） — 介绍、解释和实现

自组织地图 （SOM） — 介绍、解释和实现一、说明什么是SOM（self orgnize map）自组织地图，是GNN类似的图神经网络的概念。因为神经网络实质上可以解释为二部图的权重，因此无论GNN还是SOM都有共同的神经网络…...

编程日记 2023/8/25 7:41:32

Arduino程序设计（四）按键消抖+按键计数

按键消抖按键计数前言一、按键消抖二、按键计数1、示例代码2、按键计数实验参考资料前言本文主要介绍两种按键控制LED实验：第一种是采用软件消抖的方法检测按键按下的效果；第二种是根据按键按下次数，四个LED灯呈现不同的流水灯效果。一…...

编程日记 2023/8/25 7:40:31

Scrum Guide Chinese Simplified.pdf

敏捷指南...

编程日记 2023/8/25 7:39:30

Module not found: Error: Can‘t resolve ‘vue-pdf‘ in ‘xxx‘

使用命令npm run serve时vue项目报错： Module not found: Error: Cant resolve vue-pdf in xxx 解决方案： 运行命令： npm install vue-pdf --save --legacy-peer-deps 即可解决。再次顺利执行npm run serve...

编程日记 2023/8/25 7:38:29

ELK之LogStash介绍及安装配置

一、logstash简介集中、转换和存储数据 Logstash 是免费且开放的服务器端数据处理管道，能够从多个来源采集数据，转换数据，然后将数据发送到您最喜欢的“存储库”中。 Logstash 能够动态地采集、转换和传输数据，不受格式或复杂度的…...

编程日记 2023/8/25 7:37:28

docker学习（1）

1、容器与虚拟机的对比： 虚拟机（virtual machine）就是带环境安装的一种解决方案。它可以在一种操作系统里面运行另一种操作系统，比如在Windows10系统里面运行Linux系统CentOS7。应用程序对此毫无感知，因为虚拟机看…...

编程日记 2023/8/25 7:36:27

宝山做手机网站建设/周口seo推广

网络协议系列文章网络协议(一)：基本概念、计算机之间的连接方式网络协议(二)：MAC地址、IP地址、子网掩码、子网和超网网络协议(三)：路由器原理及数据包传输过程网络协议(四)：网络分类、ISP、上网方式、公网私网、NAT 网络…...

编程日记 2025/1/24 18:08:08

北京网站开发招聘/百度seo营销推广多少钱

此方法在win7及win10系统中都测试可行，以win7为例。 1、网络配置 https://jingyan.baidu.com/article/bea41d43ab0be5b4c51be60c.html 2、共享文件夹选择需要共享的文件夹，右键->属性->共享->共享(s)... 3、添加共享对象添加Everyone或者…...

编程日记 2025/1/24 15:32:23

哈尔滨云建站模板/重庆森林电影完整版

介绍： 最新吃鸡个人发卡系统6.0源码修复安装问题，新增后台自定义主页图片功能后台更新ui，仿swap用户中心安装说明：上传后访问即可根据提示安装订单发送邮件监控域名/ayangw/mon.php 网盘下载地址： https://zij…...

编程日记 2025/1/24 14:54:01

1、显示/proc/meminfo文件中以大小s开头的行(要求：使用两种方法)# cat /proc/meminfo | grep -i ^s# grep ^[sS] /proc/meminfo2、显示/etc/passwd文件中不以/bin/bash结尾的行# grep -E /bin/bash$ /etc/passwd3、显示用户wang默认的shell程序# grep ^wang /etc/pa…...

编程日记 2025/1/24 14:50:58

做环保要知道的几个网站/优化二十条

这一周的内容重点较多，相对不易理解，更是包含了著名的YOLO算法。因此拿出来做个总结。笔记参照这位大哥 https://github.com/AlbertHG/Coursera-Deep-Learning-deeplearning.ai/tree/master/04-Convolutional%20Neural%20Networks/week3 1. 问题描述&a…...

编程日记 2025/1/24 10:31:22

免费国外医疗静态网站模板下载/seo多久可以学会

1.InetAddress 类封装 DNS 和 IP 方法： getHostAddress() 返回ip地址 getHostName() 返回域名|本机为本计算机名创建对象： InetAddress.getLocalHost(); InetAddress.getByName("域名|ip"); public static void main(String[] args) t…...

编程日记 2025/1/24 8:03:52

一、媒体查询

1.认识媒体查询

2.媒体查询 - 媒体类型（Media types）

3.媒体查询 – 媒体特性（Media features）

4.媒体查询 – 逻辑操作符（logical operators）

5.常见的移动端设备

二、CSS常见单位详解

1.CSS中的单位

2.CSS中的绝对单位（ Absolute length units ）

3.CSS中的相对单位（ Relative length units ）

三、深入理解pixel、DPR、PPI

1.pixel是什么

2.像素的不同分类（一）

3.物理像素和逻辑像素

4.DPR、PPI

五、浏览器视口Viewport

1.什么是移动端适配？

2.认识视口viewport

3.布局视口和视觉视口

3.1布局视口（layout viewport）

3.2视觉视口（visual viewport）

4.理想视口（ideal viewport）

六、移动端适配

1.移动端适配方案

2.适配方案 – rem+动态html的font-size

2.1 rem的font-size尺寸

2.2 rem的单位换算

3.适配方案 - vw

4.vw 和 rem 的对比

5.vw的单位换算

相关文章：