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

常见的移动端布局

news 2026/1/31 16:34:43

流式布局（百分比布局）

使用百分比、相对单位（如 em、rem）等来设置元素的宽度，使页面元素根据视口大小的变化进行调整。这种方法可以实现基本的自适应效果，但可能在不同设备上显示不一致。

 
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.container {width: 100%;max-width: 1200px;margin: 0 auto;padding: 20px;}.box {width: 100%;height: 200px;background-color: #e0e0e0;margin-bottom: 20px;}@media (min-width: 768px) {.box {width: 50%;}}@media (min-width: 1024px) {.box {width: 33.33%;}}</style>
</head>
<body><div class="container"><div class="box"></div><div class="box"></div><div class="box"></div></div>
</body>
</html>

在这里插入图片描述

flex弹性布局（强烈推荐）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="style.css"><title>Flexbox Layout Example</title>
</head>
<body><div class="container"><div class="box1">Box 1</div><div class="box2">Box 2</div><div class="box3">Box 3</div></div>
</body>
</html>/* styles.css */
body {margin: 0;font-family: Arial, sans-serif;
}.container {display: flex; /* 使用 Flexbox 布局 */justify-content: space-between; /* 在主轴上均匀分布元素 */align-items: center; /* 在交叉轴上居中对齐元素 */padding: 20px;
}.box1{background-color: aqua;width: 10%;
}
.box2{background-color:brown;flex: 1;
}.box3{background-color: blue;width: 10%;
}

在这里插入图片描述

rem+媒体查询布局

rem基础

rem(root em)是一个相对单位，类似于em，em是父元素字体大小。

不同的是rem的基准是相对于html元素的字体大小。

比如，根元素(html)设置font-size=12px，非根元素设置width:2rem;则换成px表示就是24px。

em相对于父元素的字体大小来说的

rem相对于html元素字体大小来说的

rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制。

媒体查询

媒体查询(Media Query)是CSS3新语法。

· 使用@media查询，可以针对不同的媒体类型定义不同的样式

· @media可以针对不同的屏幕尺寸设置不同的样式

· 当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

· 目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

语法规范：

@media mediatype and|not|only (media feature) {
CSS-Code;
}

<!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>媒体查询案例背景变色</title><style>/* 1.媒体查询一般按照从大到小或者从小到大的顺序来 *//* 2.小于540px 页面的背景颜色变为蓝色 */@media screen and (max-width: 539px) {body {background-color: blue;}}/* 3. 540~970 我们的页面颜色改为绿色 */@media screen and (min-width: 540px) and (max-width:969px) {body {background-color: green;}}/* 4. 大于等于970 我们页面的颜色改为红色 */@media screen and (min-width: 970px) {body {background-color: pink;}}/* 5. screen 还有and必须带上不能省略 *//* 6. 我们的数字后面必须跟单位 970px 这个px不能省略 */</style>
</head>
<body></body>
</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"><title>媒体查询+rem案例</title><style>/* 从小到大顺序 */@media screen and (min-width: 320px) {html {font-size: 50px;}}@media screen and (min-width: 640px) {html {font-size: 100px;}}div {height: 1rem;font-size: .5rem;background-color: green;color: #fff;text-align: center;line-height: 1rem;}</style>
</head>
<body><div>实例</div>
</body>
</html>

响应式布局：bootstrap

引用：
https://blog.csdn.net/xy_is_fhh/article/details/121662703

相关文章：

常见的移动端布局

流式布局&#xff08;百分比布局&#xff09; 使用百分比、相对单位&#xff08;如 em、rem&#xff09;等来设置元素的宽度&#xff0c;使页面元素根据视口大小的变化进行调整。这种方法可以实现基本的自适应效果&#xff0c;但可能在不同设备上显示不一致。 <!DOCTYPE ht…...

编程日记 2023/8/26 18:17:54

Typore 亲测有效（懂得都懂哈）

Typore 亲测从安装到使用&#xff0c;可以使用&#xff08;具体是什么懂得都懂哈&#xff09; 网盘下载地址:链接&#xff1a;https://pan.baidu.com/s/1w0UiS1szxnO9Lxz6sbXEKg?pwdqwe1 提取码&#xff1a;qwe1 第一步&#xff1a; 下载压缩包进行解压&#xff0c;解压过…...

编程日记 2023/8/26 18:16:53

Kyligence Copilot 登陆海外，斩获 Product Hunt 日榜 TOP 2

8月14日&#xff0c;AI 数智助理 Kyligence Copilot 在全球知名科技产品平台 Product Hunt 上线&#xff0c;其以出色的产品创新实力&#xff0c;在激烈的竞争中脱颖而出&#xff0c;仅仅在 24 小时内收获了超过 400 个投票和近 200 条支持评论&#xff0c;荣登当日产品榜排名第…...

编程日记 2023/8/26 18:15:52

【Docker】Docker 的基本概念和优势，基本命令及使用例子

Docker 是一种轻量级的容器化解决方案&#xff0c;能够快速地创建、部署和运行应用程序。以下是一些 Docker 的基本概念和优势&#xff1a; 基本概念&#xff1a; 1.镜像&#xff1a;一个 Docker 镜像是一个可执行的文件&#xff0c;其中包含了运行应用程序所需要的一切。 2.容…...

编程日记 2023/8/26 18:14:50

高并发内存池(回收)[4]

threadcache还给centralcache void ThreadCache::Deallocate(void* ptr, size_t size) {assert(ptr);assert(size < MAX_BYTES);// 找对映射的自由链表桶&#xff0c;对象插入进入size_t index SizeClass::Index(size);_freeLists[index].Push(ptr);// 当链表长度大于一次…...

编程日记 2023/8/26 18:13:49

分布式事务篇-2.4 Spring-Boot整合Seata

文章目录 前言一、pom jar导入:二、项目配置&#xff1a;2.1 配置 说明&#xff1a;2.1 .1 seata server 端:2.1 .2 seata client 端: 2.2 开启seata 对于数据源的代理:2.3 seata-client 的注册中心&#xff1a;2.4 seata-client 的配置中心&#xff1a;2.5 去掉手写的数据源代…...

编程日记 2023/8/26 18:12:48

718. 最长重复子数组

718. 最长重复子数组 原题链接&#xff1a;完成情况&#xff1a;题解&#xff1a;方法一&#xff1a;动态规划方法二&#xff1a;滑动窗口方法三&#xff1a;二分查找 哈希 原题链接&#xff1a; 718. 最长重复子数组 https://leetcode.cn/problems/maximum-length-of-repe…...

编程日记 2023/8/26 18:11:47

Mysql join加多条件与where的区别

最近在项目中遇到一个问题&#xff0c;感觉有点意思&#xff0c;在解决问题及查阅了相关资料后&#xff0c;打算写篇文章给朋友们分享一下。 问题现象&#xff1a; 问题是很常见的空指针问题&#xff0c;后端查询数据库数据&#xff0c;遍历进行相关业务处理时报空指针。通过…...

编程日记 2023/8/26 18:10:46

div滚动条自动滚动到底部

<div id"center"></div>// 滚动条到最底部scrollToBottom(){var box document.getElementById(center);this.$nextTick(() > {box.scrollTop box.scrollHeight})},...

编程日记 2023/8/26 18:09:45

【深度学习】实验02 鸢尾花数据集分析

文章目录 鸢尾花数据集分析决策树K-means 鸢尾花数据集分析 决策树 # 导入机器学习相关库 from sklearn import datasets from sklearn import treeimport matplotlib.pyplot as plt import numpy as np# Iris数据集是常用的分类实验数据集&#xff0c; # 由Fisher, 1936收集…...

编程日记 2023/8/26 18:08:44

AI大模型潮水中，医疗数字化加速「求解」

蝴蝶挥动翅膀&#xff0c;医疗行业每个角落开始连锁反应&#xff0c;曾经被忽视的问题也愈发明显。但与之对应的是&#xff0c;对数字化和AI大模型的价值认可&#xff0c;在中国医疗赛道也正在加速来临。 作者|斗斗 编辑|皮爷 出品|产业家 重庆市某地方人民医院&#xf…...

编程日记 2023/8/26 18:07:43

【安卓】自定义View实现画板涂鸦等功能

一、实现效果 二、代码 1、MainActivity.class package com.lsl.mydrawingboarddemo;import androidx.appcompat.app.AppCompatActivity; import androidx.core.content.ContextCompat;import android.os.Bundle; import android.os.Handler; import android.view.View; impo…...

编程日记 2023/8/26 18:05:39

面试题. 搜索旋转数组

搜索旋转数组。给定一个排序后的数组&#xff0c;包含n个整数&#xff0c;但这个数组已被旋转过很多次了&#xff0c;次数不详。请编写代码找出数组中的某个元素&#xff0c;假设数组元素原先是按升序排列的。若有多个相同元素&#xff0c;返回索引值最小的一个。 示例1: 输入…...

编程日记 2023/8/26 18:04:37

前端需要理解的数据治理与异常监控知识

1 数据治理 前端数据治理的重要指标是准确性和数据&#xff0c;一个数据对象包括数据值和其他元数据。 2 数据上报方式 2.1 Image 通过将采集的数据拼接在图片请求的后面&#xff0c;向服务端请求一个 1*1 px 大小的图片&#xff08;gif&#xff09;实现的&#xff0c;设置…...

编程日记 2023/8/26 18:03:36

ip_vs 原理解析 （四）hook 后的开始 一

文章目录 ip_vs hook 后NF_INET_LOCAL_IN 本章重点&#xff1a; k8s 如何利用 ip_vs 实现源 IP 会话亲和性。 ip_vs hook 后 NF_INET_LOCAL_IN 根据优先级依次是 ip_vs_reply4&#xff0c;ip_vs_remote_request4 ip_vs_reply4| -- ip_vs_out| -- skb_to_full_sk(skb&#xf…...

编程日记 2023/8/26 18:02:35

【论文解读】基于图的自监督学习联合嵌入预测架构

一、简要介绍 本文演示了一种学习高度语义的图像表示的方法&#xff0c;而不依赖于手工制作的数据增强。论文介绍了基于图像的联合嵌入预测架构&#xff08;I-JEPA&#xff09;&#xff0c;这是一种用于从图像中进行自监督学习的非生成性方法。I-JEPA背后的idea很简单&#xff…...

编程日记 2023/8/26 18:01:34

C++ 容器

string 1. 构造 string s1(); // 1 string s2("hello"); // hello string s3(3, k); // kkk string s4("hellohello", 2, 4); // lloh2. 赋值 string s1 "hellohello"; // hellohello string s2.assign(s1); // he…...

编程日记 2023/8/26 18:00:32

【PHP】PHP文件操作详解

PHP是一种广泛使用的服务器端脚本语言&#xff0c;用于开发Web应用程序。在PHP中&#xff0c;文件操作是一项重要的功能&#xff0c;包括文件的读取、写入、删除和其他操作。本文将详细介绍PHP文件操作的各个方面&#xff0c;并通过示例代码进行说明。 一、文件读取 要读取一…...

编程日记 2023/8/26 17:59:30

硬核旗舰南卡OE CC开放式耳机发布，重新定义百元开放式耳机新标杆！

​随着现在健康意识的不断提高&#xff0c;人们对于日常用品的要求越来越高&#xff0c;在耳机市场中&#xff0c;健康因素也逐渐成为消费者所考虑的因素之一&#xff0c;入耳式耳机因为会引发中耳炎、耳膜炎等疾病&#xff0c;正在逐渐被开放式蓝牙耳机所取代&#xff0c;南卡…...

编程日记 2023/8/26 17:58:29

785. 判断二分图

785. 判断二分图 原题链接&#xff1a;完成情况&#xff1a;解题思路&#xff1a;参考代码&#xff1a; 原题链接&#xff1a; 785. 判断二分图 https://leetcode.cn/problems/is-graph-bipartite/description/ 完成情况&#xff1a; 解题思路&#xff1a; 题目解释&#x…...

编程日记 2023/8/26 17:57:28

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

编程新知 2026/1/29 23:08:11

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

编程新知 2025/12/12 4:55:21

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

编程新知 2026/1/24 14:13:06

九天毕昇深度学习平台 | 如何安装库？

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

编程新知 2026/1/31 2:13:57

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

编程新知 2026/1/24 13:01:05

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

编程新知 2026/1/24 11:38:26

【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

android RelativeLayout布局

<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...

编程新知 2026/1/27 20:01:51

Vue ③-生命周期 || 脚手架

生命周期 思考&#xff1a;什么时候可以发送初始化渲染请求&#xff1f;&#xff08;越早越好&#xff09; 什么时候可以开始操作dom&#xff1f;&#xff08;至少dom得渲染出来&#xff09; Vue生命周期&#xff1a; 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...

编程新知 2026/1/20 9:03:21