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

css实现响应式详解

news 来源：原创 2025/6/8 16:21:37

一、媒体查询（Media Queries）

基本概念
媒体查询是 CSS3 中用于根据不同的设备特性（如屏幕宽度、高度、设备类型等）应用不同样式规则的技术。它允许你为特定的媒体类型（如屏幕、打印、手持设备等）和条件（如最小宽度、最大宽度等）定义样式。
例如，你可以为屏幕宽度小于 768px 的设备（通常是手机）定义一组样式，为屏幕宽度在 768px 到 1024px 之间的设备（平板电脑）定义另一组样式。
语法结构
媒体查询的基本语法如下：

@media media - type and (media - feature - rule) {/* CSS样式规则 */
}

其中，media - type可以是screen（用于屏幕设备）、print（用于打印设备）、handheld（用于手持设备）等。media - feature - rule是具体的媒体特性规则，如(max - width: 768px)表示最大宽度为 768px 的设备。
例如，以下代码会在屏幕宽度小于或等于 600px 时将背景颜色设置为蓝色：

@media screen and (max - width: 600px) {body {background - color: blue;}
}

常见的媒体特性
屏幕宽度相关
max - width：指定一个最大宽度值，当屏幕宽度小于或等于这个值时，媒体查询中的样式规则生效。例如，(max - width: 480px)适用于屏幕宽度不超过 480px 的设备，常用于为手机等小屏幕设备设计样式。
min - width：指定一个最小宽度值，当屏幕宽度大于或等于这个值时，样式规则生效。比如，(min - width: 768px)可以用于为平板电脑及更大屏幕设备设计样式。
屏幕高度相关（相对较少使用，但在某些场景下很有用）
max - height和min - height的作用与宽度相关特性类似，只是针对屏幕的高度。例如，在设计一个高度受限的弹出窗口或者全屏应用时，可以使用这些特性来确保样式在不同高度的屏幕上都能正常显示。
设备方向
orientation: portrait（纵向）和orientation: landscape（横向）可以根据设备的方向应用不同的样式。例如，在手机从纵向切换到横向时，可以改变布局，使内容更好地适应屏幕。

二、弹性布局（Flexbox）

基本概念
Flexbox 是一种用于在容器中布局子元素的 CSS 布局模型。它提供了一种灵活的方式来分配空间和对齐元素，使得布局能够更好地适应不同的屏幕尺寸。
使用 Flexbox，可以轻松地实现水平和垂直方向的对齐，以及子元素的自动缩放和排列。
关键属性
容器属性
display: flex：将一个元素设置为 Flex 容器。一旦设置为 Flex 容器，其内部的子元素（称为 Flex 项目）就可以使用 Flexbox 的布局规则进行排列。
flex - direction：用于指定 Flex 项目的排列方向。可以是row（水平方向，从左到右）、row - reverse（水平方向，从右到左）、column（垂直方向，从上到下）或column - reverse（垂直方向，从下到上）。
justify - content：用于在主轴（由flex - direction确定）上对齐 Flex 项目。常见的值有flex - start（默认值，项目向主轴起点对齐）、flex - end（项目向主轴终点对齐）、center（项目在主轴上居中对齐）、space - between（项目在主轴上均匀分布，两端对齐）和space - around（项目在主轴上均匀分布，每个项目两侧的间隔相等）。
align - items：用于在交叉轴（与主轴垂直的轴）上对齐 Flex 项目。值包括stretch（默认值，项目会拉伸以填充交叉轴方向的容器空间）、flex - start、flex - end和center。
项目属性
flex - grow：定义 Flex 项目在容器有剩余空间时的伸展比例。例如，如果有两个 Flex 项目，一个flex - grow为 1，另一个为 2，那么后者将占用剩余空间的三分之二，前者占用三分之一。
flex - shrink：与flex - grow相反，它定义了在容器空间不足时 Flex 项目的收缩比例。
flex - basis：用于指定 Flex 项目在分配多余空间或收缩之前的初始大小。它可以是一个长度值（如100px）或一个百分比。

三、网格布局（Grid Layout）

基本概念
CSS Grid 是一种二维布局系统，它允许你将页面划分为行和列，然后将元素放置在这些网格单元中。网格布局提供了强大的布局控制能力，能够创建复杂的页面布局，并且在响应式设计中也非常有用。
关键属性
容器属性
display: grid：将一个元素设置为网格容器。
grid - template - rows和grid - template - columns：用于定义网格的行和列的大小。例如，grid - template - rows: 100px 200px;表示网格有两行，第一行高度为 100px，第二行高度为 200px。grid - template - columns的用法类似。
grid - gap：用于设置网格单元之间的间隙大小。可以分别设置行间隙和列间隙，如grid - row - gap和grid - column - gap，也可以使用grid - gap同时设置行和列的间隙（grid - gap: 10px 20px;表示行间隙为 10px，列间隙为 20px）。
项目属性
grid - row - start、grid - row - end、grid - column - start和grid - column - end：这些属性用于指定项目在网格中的位置，即项目从哪一行 / 列开始，到哪一行 / 列结束。例如，grid - row - start: 2; grid - row - end: 4;表示项目跨越从第二行到第四行（不包括第四行）的网格单元。
grid - area：这是一个简写属性，可以同时指定项目的行和列位置。例如，grid - area: 2/1/4/3;表示项目从第二行第一列开始，到第四行第三列结束。

四、相对单位（如 vw、vh、% 等）

## vw 和 vh（视口单位）
vw（viewport width）表示视口宽度的 1%，vh（viewport height）表示视口高度的 1%。例如，如果一个元素的宽度设置为50vw，那么它的宽度将是视口宽度的 50%。
这些单位在创建全屏幕或基于视口比例的布局时非常有用。比如，你可以使用vh来设置一个元素的高度，使其始终占据屏幕高度的一定比例，这样在不同高度的屏幕上也能保持一致的视觉效果。
百分比（%）单位
百分比单位是相对于父元素的尺寸来计算的。例如，在一个容器中，如果一个子元素的宽度设置为50%，那么它的宽度将是父元素宽度的一半。
在响应式设计中，百分比单位可以用于创建灵活的布局。比如，在一个多列布局中，各列的宽度可以使用百分比来定义，这样当父容器的宽度发生变化时（如在不同屏幕尺寸下），列宽也会相应地调整。
em 和 rem：
em 是相对于元素的字体大小，rem 是相对于根元素（通常是）的字体大小。使用它们可以创建基于字体大小的相对尺寸。
例如，font-size: 1.2em; 会使元素的字体大小为父元素字体大小的 1.2 倍；font-size: 1.2rem; 会使元素的字体大小为根元素字体大小的 1.2 倍。

css实现响应式详解

一、媒体查询（Media Queries） 基本概念媒体查询是 CSS3 中用于根据不同的设备特性（如屏幕宽度、高度、设备类型等）应用不同样式规则的技术。它允许你为特定的媒体类型（如屏幕、打印、手持设备等）和条件&a…...

编程日记 2025/6/2 23:42:09

hot100_240. 搜索二维矩阵 II

hot100_240. 搜索二维矩阵 II 直接遍历列减行增编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性： 每行的元素从左到右升序排列。每列的元素从上到下升序排列。示例 1： 输入：matrix [[1,4,7,1…...

编程日记 2025/6/2 17:16:26

【网络云SRE运维开发】2025第3周-每日【2025/01/15】小测-【第14章ospf高级配置】理论和实操解析

文章目录 14.1 选择题解题思路和参考答案14.2 理论题解题思路和参考答案14.3 实操题解题思路和参考答案思科（Cisco）设备华为（Huawei）设备小米/锐捷（或其他支持标准CLI命令的设备）通过网络管理工具注意事项 …...

编程日记 2025/6/3 14:21:28

c#-Halcon入门教程——标定

Halcon代码 read_image (NinePointCalibration, D:/Desktop/halcon/ca74d-main/九点标定/NinePointCalibration.gif)rgb1_to_gray (NinePointCalibration, GrayImage)get_image_size (GrayImage, Width, Height) dev_display (GrayImage)* 获取当前显示的窗口句柄 dev_get_win…...

编程日记 2025/6/3 14:20:21

设计和优化用于 AR、HUD 和高级显示系统的表面浮雕光栅

表面浮雕光栅是许多光学系统中的关键组件，在控制增强现实 （AR） 显示器、平视显示器 （HUD） 和其他先进光子器件中的光传播方面发挥着关键作用。作为在这个领域工作的工程师和设计师，您了解针对特定应用优化这…...

编程日记 2025/6/3 14:20:55

编译pytorch——cuda-toolkit-nvcc

链接 https://blog.csdn.net/wjinjie/article/details/108997692https://docs.nvidia.com/cuda/cuda-installation-guide-linux/#switching-between-driver-module-flavorshttps://forums.developer.nvidia.com/t/can-not-load-nvidia-drivers-on-ubuntu-22-10/239750https://…...

编程日记 2025/6/3 10:03:06

Linux 系统资源监控笔记

本文介绍如何在 Linux 系统中查看服务资源剩余情况，包括 CPU、内存、磁盘、网络等资源的监控方法和常用命令。目录查看 CPU 和内存使用情况查看磁盘使用情况查看网络使用情况查看服务资源占用查看系统整体资源使用情况图形化工具 1. 查看 CPU 和内存使用情况使…...

编程日记 2025/6/3 10:36:45

在Linux系统中无网络安装Nginx并配置负载均衡

在Linux系统中无网络安装Nginx并配置负载均衡在现代的Web开发和运维中，Nginx作为一个高性能的HTTP和反向代理服务器，被广泛应用于负载均衡、静态资源服务、SSL终端等场景。然而，在某些特殊环境下，服务器可能无法访问互联网&…...

编程日记 2025/6/4 6:07:24

Franka例程学习——examples_common

编程日记 2025/5/31 16:31:56

浅谈计算机网络02 | SDN控制平面

计算机网络控制平面一、现代计算机网络控制平面概述1.1 与数据平面、管理平面的关系1.2 控制平面的发展历程二、控制平面的关键技术剖析2.1 网络层协议2.1.1 OSPF协议2.1.2 BGP协议 2.2 SDN控制平面技术2.2.1 SDN架构与原理2.2.2 OpenFlow协议2.2.3 SDN控制器一、现代计算机…...

编程日记 2025/6/4 14:29:50

Golang概述

文章目录 1. 什么是程序2. Go语言的诞生小故事2.1 Go 语言的核心开发团队--三个大牛2.2 Google 创造 Golang 的原因2.3 Golang 的发展历程 3. Golang 的语言的特点 1. 什么是程序程序：就是完成某个功能的指令的集合。画一个图理解： 2. Go语言的诞生小故…...

编程日记 2025/6/3 16:34:20

【STM8S】STM8S之IIC从机

本文最后修改时间：2018年10月30日 18:48 一、本节简介本文介绍STM8S系列如何使用IIC从机接收来自IIC主机的数据。二、实验平台编译软件：IAR for STM8 1.42.2 硬件平台：stm8s003f3p6开发板仿真器：ST-LINK 库函数版本&…...

编程日记 2025/6/4 6:07:08

SDK调用文心一言如何接入，文心一言API接入教程

一、前期准备注册百度智能云账号： 前往百度智能云官网注册一个账号。这是接入文心一言API的基础。了解API接口： 在百度智能云开放平台中，找到文心一言API的详情页，了解提供的API接口类型（如云端API、移动端API、离线…...

编程日记 2025/6/4 11:34:49

实战：FRP内网穿透部署-支持ssh、web访问

目录 1 准备工作2 公网服务器部署server端2.1 frps.ini配置 3 内网客户端部署client端3.1 frpc.ini配置（内网服务器01）3.2 frpc.ini配置（内网服务器02） 4 服务启动脚本4.1 公网服务器 server4.2 内网服务器 client 2 systemctl常见…...

编程日记 2025/6/3 21:46:44

基于Web的宠物医院看诊系统设计与实现（源码+定制+开发）在线预约平台、宠物病历管理、医生诊疗记录、宠物健康数据分析宠物就诊预约、病历管理与健康分析

博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台…...

编程日记 2025/6/1 15:27:19

Pytorch基础教程：从零实现手写数字分类

文章目录 1.Pytorch简介2.理解tensor2.1 一维矩阵2.2 二维矩阵2.3 三维矩阵 3.创建tensor3.1 你可以直接从一个Python列表或NumPy数组创建一个tensor：3.2 创建特定形状的tensor3.3 创建三维tensor3.4 使用随机数填充tensor3.5 指定tensor的数据类型 4.tensor基本运算…...

编程日记 2025/6/2 22:21:32

使用Flink-JDBC将数据同步到Doris

在现代数据分析和处理环境中，数据同步是一个至关重要的环节。Apache Flink和Doris是两个强大的工具，分别用于实时数据处理和大规模并行处理（MPP）SQL数据库。本文将介绍如何使用Flink-JDBC连接器将数据同步到Doris。一、背景介绍…...

编程日记 2025/6/2 22:21:16

【深度学习】自编码器（Autoencoder, AE）

自编码器（Autoencoder, AE）是一种无监督学习模型，主要用于特征提取、数据降维、去噪和生成模型等任务。它的核心思想是通过将输入压缩到一个低维的潜在空间表示（编码过程），然后再从这个潜在表示重构输入&am…...

编程日记 2025/6/3 5:31:22

跨专业毕业论文写作

跨专业毕业论文写作是一项具有挑战性的任务，但通过合理的规划和方法，你可以顺利完成这篇论文。以下是一些关键步骤和建议，帮助你撰写一篇高质量的跨专业毕业论文。一、确定研究方向和课题选择与本科专业相关或感兴趣的研究方向：…...

编程日记 2025/6/2 22:22:21

在 Go语言中一个字段可以包含多种类型的值的设计与接种解决方案

在 Go 中，如果你希望一个字段可以包含多种类型的值，你可以使用以下几种方式来实现： ### 1. **使用空接口 (interface{})** Go 的空接口 interface{} 可以接受任何类型的值，因此，你可以将字段定义为一个空接口&#x…...

编程日记 2025/6/2 22:22:54

为AI聊天工具添加一个知识系统之32 三“中”全“会”：推理式的ISA（父类）和IOS（母本）以及生成式CMN （双亲委派）之1

本文要点和问题要点三“中”全“会”：推理式的ISA的（父类-父类源码）和IOS的（母本-母类脚本）以及生成式 CMN （双亲委派-子类实例）。数据中台三端架构的中间端(信息系统架构ISA &#xff1a…...

编程日记 2025/6/2 1:23:20

手撕Transformer -- Day6 -- DecoderBlock

手撕Transformer – Day6 – DecoderBlock 目录手撕Transformer -- Day6 -- DecoderBlockTransformer 网络结构图DecoderBlock 代码Part1 库函数Part2 实现一个解码器Block，作为一个类Part3 测试参考 Transformer 网络结构图 Transformer 网络结构 DecoderBlock 代…...

编程日记 2025/6/2 22:22:05

Docker常用命令大全

Docker容器相关命令： 创建并启动容器： docker run：创建一个新的容器并运行一个命令。例如：docker run -d -p 8080:80 nginx这将后台(-d)运行一个Nginx容器，并映射宿主机的8080端口到容器的80端口。列出容器&#x…...

编程日记 2025/6/4 3:46:48

【Linux探索学习】第二十五弹——动静态库：Linux 中静态库与动态库的详细解析

Linux学习笔记： https://blog.csdn.net/2301_80220607/category_12805278.html?spm1001.2014.3001.5482 前言： 在 Linux 系统中，静态库和动态库是开发中常见的两种库文件类型。它们在编译、链接、内存管理以及程序的性能和可维护性方面有着…...

编程日记 2025/5/29 2:26:37

Vue 实现当前页面刷新的几种方法

以下是 Vue 中实现当前页面刷新的几种方法： 方法一：使用 $router.go(0) 方法通过Vue Router进行重新导航，可以实现页面的局部刷新，而不丢失全局状态。具体实现方式有两种： 实现代码： <template&g…...

编程日记 2025/6/3 16:48:51

python mysql库的三个库mysqlclient mysql-connector-python pymysql如何选择，他们之间的区别

三者的区别 1. mysqlclient 特点： 是一个用于Python的MySQL数据库驱动程序，用于与MySQL数据库进行交互。依赖于MySQL的本地库，因此在安装时需要确保系统上已安装了必要的依赖项，如libmysqlclient-dev等。性能较好&#xff0c…...

编程日记 2025/6/4 3:37:30

【可持久化线段树】 [SDOI2009] HH的项链主席树（两种解法）

文章目录 1.题目描述2.思路3.解法一解法一代码 4.解法二解法二代码（版本一）解法二代码（版本二） 1.题目描述原题：https://www.luogu.com.cn/problem/P1972 [SDOI2009] HH的项链题目描述 HH 有一串由各种漂亮的贝壳…...

编程日记 2025/6/4 3:37:14

【C语言】线程----同步、互斥、条件变量

目录 3. 同步 3.1 概念 3.2 同步机制 3.3 函数接口 1. 同步 1.1 概念同步(synchronization)指的是多个任务(线程)按照约定的顺序相互配合完成一件事情 1.2 同步机制通过信号量实现线程间的同步信号量：通过信号量实现同步操作；由信号量来决定…...

编程日记 2025/6/4 3:39:22

15. 三数之和【力扣】--三指针

三数之和已解答中等相关标签相关企业提示给你一个整数数组 nums ，判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k ，同时还满足 nums[i] nums[j] nums[k] 0 。请你返回所有和为 0 且不重复的三元组。注意&#x…...

编程日记 2025/6/2 23:24:50

大数据学习(35)- spark- action算子

&&大数据学习&& 🔥系列专栏： 👑哲学语录: 承认自己的无知，乃是开启智慧的大门 💖如果觉得博主的文章还不错的话，请点赞👍收藏⭐️留言📝支持一下博主哦&#x1f91…...

编程日记 2025/6/3 13:10:25

vim使用指南

🏝️专栏：计算机操作系统 🌅主页：猫咪-9527-CSDN博客 “欲穷千里目，更上一层楼。会当凌绝顶，一览众山小。” 目录一、Vim 的基本概念 1.Vim 的主要模式： 1.1普通模式 (Normal Mode) 1.2插入…...

编程日记 2025/6/3 16:02:10

Docker 镜像制作原理做一个自己的docker镜像

一.手动制作镜像启动容器进入容器定制基于容器生成镜像 1.启动容器启动容器之前我们首先要有一个镜像，这个镜像可以是从docker拉取，例如：现在pull一个ubuntu镜像到本机。 docker pull ubuntu:22.04 我们接下来可以基于这个容器进行容器…...

编程日记 2025/6/3 12:57:29

基于Java+SpringBoot+Vue的前后端分离的在线BLOG网

基于JavaSpringBootVue的前后端分离的在线BLOG网前言 ✌全网粉丝20W,csdn特邀作者、博客专家、CSDN[新星计划]导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末附源码下载链接&#x1f3…...

编程日记 2025/6/4 14:28:40

Linux网络_套接字_UDP网络_TCP网络

一.UDP网络 1.socket()创建套接字 #include<sys/socket.h> int socket(int domain, int type, int protocol);domain (地址族): AF_INET网络 AF_UNIX本地 AF_INET：IPv4 地址族，适用于 IPv4 协议。用于网络通信AF_INET6：IPv6 地址族&a…...

编程日记 2025/6/4 3:38:17

Java学习教程，从入门到精通，JDBC驱动程序类型及语法知识点（91）

JDBC驱动程序类型及语法知识点一、JDBC驱动程序类型 JDBC驱动程序主要有以下四种类型： 1. Type 1：JDBC - ODBC桥驱动程序（JDBC - ODBC Bridge Driver） 特点：这种驱动程序是Java与ODBC（Open Database C…...

编程日记 2025/6/4 3:38:49

YOLOv8从菜鸟到精通(二):YOLOv8数据标注以及模型训练

数据标注前期准备先打开Anaconda Navigator，点击Environment，再点击new(new是我下载anaconda的文件夹名称)，然后点击创建点击绿色按钮，并点击Open Terminal 输入labelimg便可打开它,labelimg是图像标注工具，在上篇…...

编程日记 2025/6/3 14:05:12

3D目标检测数据集——Nusence数据集

链接地址 [官网] nuScenes[arXiv] nuScenes: A multimodal dataset for autonomous driving[GitHub] nuScenes devkitnuScenes devkit教程数据集概述 2.1 数据采集 2.1.1 传感器配置 nuScenes的数据采集车辆为Renault Zoe迷你电动车，配备6个周视相机&#x...

编程日记 2025/6/3 14:03:52

网站收录入口提交的方法有哪些（网站收录的方式都有哪些）

网站被搜索引擎收录是获得流量和曝光的重要前提，以下为你介绍常见的网站收录方式： 搜索引擎提交入口各大搜索引擎都设有专门的网站收录入口，供站长提交网站。例如百度搜索资源平台、谷歌搜索控制台等。以百度为例，在百度搜索资…...

编程日记 2025/6/3 14:06:18

移动端H5缓存问题

移动端页面缓存问题是指页面的静态资源（如图片、JS 和 CSS 文件）在浏览器中被缓存后，用户在下次访问时可以直接从本地获取缓存数据，而不需要每次都从服务器重新获取，不过这样可能会导致页面不能正确地更新或者加载最新…...

编程日记 2025/6/3 14:04:56

11-1.Android 项目结构 - androidTest 包与 test 包（单元测试与仪器化测试）

androidTest 包与 test 包在 Android 项目中，androidTest 包与 test 包用于存放不同类型的测试代码的 1、测试类型 （1）androidTest 包主要用于存放单元测试（Unit Tests）代码单元测试是针对应用程序中的独立模块…...

编程日记 2025/6/3 14:05:45

计算机网络（五）——传输层

一、功能传输层的主要功能是向两台主机进程之间的通信提供通用的数据传输服务。功能包括实现端到端的通信、多路复用和多路分用、差错控制、流量控制等。复用：多个应用进程可以通过同一个传输层发送数据。分用：传输层在接收数据后可以将这些数据正确分…...

编程日记 2025/6/3 13:07:30

ZCC9159 -7V 300mA 超低功耗高速 LDO

功能描述 ZCC9195是一款超低功耗并具有快速响应、关断快速放电功能的高速LDO。静态电流低至 0.8uA，输出电流最大为300mA。 ZCC9195具有输出过流保护、输出短路保护、温度保护等功能，确保芯片在异常工作条件下不会损坏。 ZCC9195只需要1uF的陶瓷电容即…...

编程日记 2025/6/3 14:04:24

微信小程序实现个人中心页面

文章目录 1. 官方文档教程2. 编写静态页面3. 关于作者其它项目视频教程介绍 1. 官方文档教程 https://developers.weixin.qq.com/miniprogram/dev/framework/ 2. 编写静态页面 mine.wxml布局文件  <navigation-bar title"个人中心" ba…...

编程日记 2025/6/3 14:05:29

【C语言算法刷题】第7题

题目描述一个XX产品行销总公司，只有一个boss，其有若干一级分销，一级分销又有若干二级分销，每个分销只有唯一的上级分销。规定，每个月，下级分销需要将自己的总收入（自己的下级上交的&#xf…...

编程日记 2025/6/3 14:04:08

BERT与CNN结合实现糖尿病相关医学问题多分类模型

完整源码项目包获取→点击文章末尾名片！ 使用HuggingFace开发的Transformers库，使用BERT模型实现中文文本分类（二分类或多分类） 首先直接利用transformer.models.bert.BertForSequenceClassification()实现文本分类然后手动实现B…...

编程日记 2025/6/3 14:04:40

RocketMQ消息发送---源码解析

我们知道rocketMQ的消息发送支持很多特性，如同步发送，异步发送，oneWay发送，也支持超时机制，回调机制，并且能够保证消息的可靠性和消息发送的限流，底层使用netty框架等等，如此多的特性…...

编程日记 2025/6/4 6:58:08

机器学习06-正则化

机器学习06-正则化文章目录机器学习06-正则化0-核心逻辑脉络1-参考网址3-大模型训练中的正则化1.正则化的定义与作用2.常见的正则化方法及其应用场景2.1 L1正则化（Lasso）2.2 L2正则化（Ridge）2.3 弹性网络正则化（Elas…...

编程日记 2025/6/2 21:32:07

如何开放2375和2376端口供Docker daemon监听

Linux (以 Ubuntu 为例) 1. 修改 Docker 配置文件打开 Docker 的配置文件 /etc/docker/daemon.json。如果该文件不存在，则可以创建一个新的。 bash sudo nano /etc/docker/daemon.json在配置文件中添加以下内容： json {"hosts": ["un…...

编程日记 2025/6/4 6:59:47

Vue.js组件开发-如何实现路由懒加载

在Vue.js应用中，路由懒加载是一种优化性能的技术，它允许在需要时才加载特定的路由组件，而不是在应用启动时加载所有组件。这样可以显著减少初始加载时间，提高用户体验。在Vue Router中，实现路由懒加载非常简单&#xf…...

编程日记 2025/6/4 6:58:59

rclone，云存储备份和迁移的瑞士军刀，千字常文解析，附下载链接和安装操作步骤...

一、什么是rclone？ rclone是一个命令行程序，全称：rsync for cloud storage。是用于将文件和目录同步到云存储提供商的工具。因其支持多种云存储服务的备份，如Google Drive、Amazon S3、Dropbox、Backblaze B2、One Drive、Swift、…...

编程日记 2025/6/4 6:59:31

一、媒体查询（Media Queries）

二、弹性布局（Flexbox）

三、网格布局（Grid Layout）

四、相对单位（如 vw、vh、% 等）

相关文章：