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

常见的移动端布局

流式布局(百分比布局)

使用百分比、相对单位(如 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…...

Typore 亲测有效(懂得都懂哈)

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

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

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

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

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

高并发内存池(回收)[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);// 当链表长度大于一次…...

分布式事务篇-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 去掉手写的数据源代…...

718. 最长重复子数组

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

Mysql join加多条件与where的区别

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

div滚动条自动滚动到底部

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

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

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

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

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

【安卓】自定义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…...

面试题. 搜索旋转数组

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

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

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

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…...

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

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

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…...

【PHP】PHP文件操作详解

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

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

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

785. 判断二分图

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

限时 180 天,微软为 RHEL 9 和 Ubuntu 22.04 推出 SQL Server 2022 预览评估版

导读近日消息&#xff0c;微软公司今天发布新闻稿&#xff0c;宣布面向 Red Hat Enterprise Linux&#xff08;RHEL&#xff09;9 和 Ubuntu 22.04 两大发行版&#xff0c;以预览模式推出 SQL Server 2022 评估版。 近日消息&#xff0c;微软公司今天发布新闻稿&#xff0c;宣布…...

一款ccm的功率因素校正控制器ncp1654

产品概述&#xff1a; NCP1654是用于连续传导模式的控制器&#xff08;CCM&#xff09;功率因数校正升压预转换器。它控制固定频率模式下的电源开关导通时间&#xff08;PWM&#xff09;并且取决于瞬时线圈电流。 该电路封装在SO8封装中&#xff0c;最大限度地减少了外部组件&a…...

4.若依框架上传文件

1.服务端代码-控制器 /*** 上传文件*/PostMapping("/upload")Operation(summary "上传")public AjaxResult uploadFile(MultipartFile file) throws Exception {try {// 上传文件路径String filePath RuoYiConfig.getUploadPath();// 上传并返回新文件名…...

Property ‘sqlSessionFactory‘ or ‘sqlSessionTemplate‘ are required

项目场景&#xff1a; 最近因为公司业务需要在搭一个新架构&#xff0c;用的springboot3和jdk17,在整合mybatis多数据源的时候报错 &#xff08;引用的mybatisplus 和 mybatisplusjion的是最新的包-2023-08-26&#xff09; Error creating bean with name ‘XXXServiceImpl’:…...

idea的debug断点的使用

添加断点&#xff08;目前不知道如何添加断点&#xff0c;就给AutoConfigurationImportSelector的每个方法都加上断点&#xff09;&#xff1a; 然后将StockApplication启动类以debug方式运行&#xff0c;然后程序就会停在119行 点击上边的step over让程序往下运行一行&#x…...

【UE】蓝图通信——事件分发器

目标 比如我现在希望点击控件蓝图A中的按钮后&#xff0c;蓝图B能够马上做出响应 实现步骤 1. 这里控件蓝图A叫“UI_按钮”&#xff0c;我在该蓝图中创建了一个名为“btnIsClicked”的事件分发器 当按钮被点击时&#xff0c;就会调用“btnIsClicked” 2. 蓝图B这里叫做“BP_…...

Python爬虫分布式架构问题汇总

在使用Python爬虫分布式架构中可能出现以下的问题&#xff0c;我们针对这些问题&#xff0c;列出相应解决方案&#xff1a; 1、任务重复执行 在分布式环境下&#xff0c;多个爬虫节点同时从消息队列中获取任务&#xff0c;可能导致任务重复执行的问题。 解决方案&#xff1a;…...

AIGC人工智能涉及三十六职业,看看有没有你的职业(一)

文章目录 一只弹吉他的熊猫 神奇的企鹅 功夫熊猫 视觉光影下的女子 闪光灯效 局部柔光 生物光 LOGO设计 制作儿童绘本故事 换脸艺术 打造专属动漫头像 包装设计之美 建筑设计 如何转高清图 生成3D质感图标 生成微信表情包 探索美食摄影的奇妙之旅 蛋糕创意设…...

万界星空科技/免费MES系统/免费质量检测系统

质量管理也是万界星空科技免费MES中的一个重要组成部分&#xff0c;旨在帮助制造企业实现全面的质量管理。该系统涵盖了供应商来料、生产过程、质量检验、数据分析等各个环节&#xff0c;为企业提供了一站式的质量管理解决方案。 1. 实时质量监控 质量管理能够实时监控生产过程…...

解决IndexError: index 0 is out of bounds for axis 1 with size 0

标题 引言问题背景解决思路如何防止总结参考资料 博主 默语带您 Go to New World. ✍ 个人主页—— 默语 的博客&#x1f466;&#x1f3fb; 《java 面试题大全》 &#x1f369;惟余辈才疏学浅&#xff0c;临摹之作或有不妥之处&#xff0c;还请读者海涵指正。☕&#x1f36d;…...

Java中hashTable的基本介绍,细节讨论,使用注意事项,常用方法和底层的扩容机制

Hashtable 是 Java 标准库中提供的一个古老的散列表&#xff08;Hash Table&#xff09;实现&#xff0c;用于存储键值对。它是线程安全的&#xff0c;基于哈希表的数据结构。然而&#xff0c;由于其线程安全性引入的同步机制&#xff0c;使得在多线程环境下性能相对较低。在现…...

redis -实战记录

redis -实战记录 一、安装二、使用 一、安装 centos - docker安装redisWindows10安装redis(图文教程&#xff09; 二、使用 node-red进行读写redis...

Mysql知识梳理

Mysql知识梳理 索引索引分类索引未命中的原因性能调优命令Explain回表 mysql性能优化事务四大特性事务隔离级别设置事务隔离级别 存储引擎聚簇索引和非聚簇索引聚簇索引非聚簇索引 最左前缀结合原则全文索引 索引 索引分类 mysql有普通索引、空间索引、主键索引、唯一索引、组…...

文生图模型之Stable Diffusion

原始文章地址 autoencoder CLIP text encoder tokenizer最大长度为77&#xff08;CLIP训练时所采用的设置&#xff09;&#xff0c;当输入text的tokens数量超过77后&#xff0c;将进行截断&#xff0c;如果不足则进行paddings&#xff0c;这样将保证无论输入任何长度的文本&…...

Java List循环安全删除元素

Java List循环安全删除元素的几种方式如下&#xff1a; 使用迭代器&#xff08;Iterator&#xff09;&#xff1a;通过调用List的iterator()方法获取List的迭代器&#xff0c;然后使用迭代器的remove()方法删除元素。这种方式可以避免在遍历过程中修改List导致的并发修改异常&…...

2023年03月 C/C++(三级)真题解析#中国电子学会#全国青少年软件编程等级考试

第1题:和数 给定一个正整数序列,判断其中有多少个数,等于数列中其他两个数的和。 比如,对于数列1 2 3 4, 这个问题的答案就是2, 因为3 = 2 + 1, 4 = 1 + 3。 时间限制:10000 内存限制:65536 输入 共两行,第一行是数列中数的个数n ( 1 <= n <= 100),第二行是由n个…...

bert-base-chinese 判断上下句

利用BERT等模型来实现语义分割。BERT等模型在预训练的时候采用了NSP&#xff08;next sentence prediction&#xff09;的训练任务&#xff0c;因此BERT完全可以判断两个句子&#xff08;段落&#xff09;是否具有语义衔接关系。这里我们可以设置相似度阈值 MERGE_RATIO &#…...

vue3+vue-cli使用mockjs

1.下载mockjs包 npm i mockjs -D 2.main.js中全局引入 // mock模拟后端数据 import /mock/index.js 3.axios下baseUrl注释掉&#xff0c;让其不走本地代理 // 使用mock数据的话&#xff0c;将这一项注释即可 // axios.defaults.baseURL process.env.VUE_APP_BASE_API; 4.s…...

Android 全局监听软键盘弹起隐藏 动态修改布局并适配无限循环的问题

思路&#xff1a; 要在 Android 应用中全局检测软键盘的弹起&#xff0c;您可以使用 ViewTreeObserver.OnGlobalLayoutListener 监听器来监听布局树的变化。当软键盘弹起或隐藏时&#xff0c;布局树会发生变化&#xff0c;因此您可以在监听器中捕获这些变化。 以下是一个示例…...

第 k 小整数

题目描述 现有 n 个正整数&#xff0c;要求出这 n 个正整数中的第 k 个最小整数&#xff08;相同大小的整数只计算一次&#xff09;。 输入格式 第一行为 n 和 k; 第二行开始为 n 个正整数的值&#xff0c;整数间用空格隔开。 输出格式 第kk个最小整数的值&#xff1b;若无…...

LeetCode 1448. 统计二叉树中好节点的数目:DFS

【LetMeFly】1448.统计二叉树中好节点的数目 力扣题目链接&#xff1a;https://leetcode.cn/problems/count-good-nodes-in-binary-tree/ 给你一棵根为 root 的二叉树&#xff0c;请你返回二叉树中好节点的数目。 「好节点」X 定义为&#xff1a;从根到该节点 X 所经过的节点…...

AR室内导航技术之技术说明与效果展示

随着科技的飞速发展&#xff0c;我们周围的环境正在经历着一场数字化的革命。其中&#xff0c;AR室内导航技术以其独特的魅力&#xff0c;为我们打开了一扇通往全新数字化世界的大门。本文将为您详细介绍这一技术的实现原理、工具应用以及成品展示&#xff0c;带您领略AR室内导…...

06-Numpy基础-线性代数

线性代数&#xff08;如矩阵乘法、矩阵分解、行列式以及其他方阵数学等&#xff09;是任何数组库的重要组成部分。 NumPy提供了一个用于矩阵乘法的dot函数&#xff08;既是一个数组方法也是numpy命名空间中的一个函数&#xff09; x.dot(y)等价于np.dot(x, y) 符&#xff08;…...

SpringBootWeb 登录认证

登录认证&#xff0c;那什么是认证呢&#xff1f; 所谓认证指的就是根据用户名和密码校验用户身份的这个过程&#xff0c;认证成功之后&#xff0c;我们才可以访问系统当中的信息&#xff0c;否则就拒绝访问。 在前面的案例中&#xff0c;我们已经实现了部门管理、员工管理的…...

【JVM 内存结构丨栈】

栈 -- 虚拟机栈 简介定义压栈出栈局部变量表操作数栈方法调用特点作用 本地方法栈&#xff08;C栈&#xff09;定义栈帧变化作用对比 主页传送门&#xff1a;&#x1f4c0; 传送 简介 栈是用于执行线程的内存区域&#xff0c;它包括局部变量和操作数栈。 Java 虚拟机栈会为每…...

LeetCode 138.复制带随机指针的链表

文章目录 &#x1f4a1;题目分析&#x1f4a1;解题思路&#x1f6a9;步骤一&#xff1a;拷贝节点插入到原节点的后面&#x1f369;步骤一代码 &#x1f6a9;步骤二&#xff1a;控制拷贝节点的random进行连接&#x1f369;步骤二代码 &#x1f6a9;步骤三&#xff1a;拷贝节点解…...

基于SSM的小说网站的设计与实现(论文+源码)_kaic

目 录 1 绪论................................................................................................... 1 1.1 项目背景................................................................................................................ 1 1.2 发展历程..…...

【Python】代理池针对ip拦截破解

代理池是一种常见的反反爬虫技术&#xff0c;通过维护一组可用的代理服务器&#xff0c;来在被反爬虫限制的情况下&#xff0c;实现数据的爬取。但是&#xff0c;代理池本身也面临着被目标网站针对ip进行拦截的风险。 本文将详细介绍代理池针对ip拦截破解的方法&#xff0c;包含…...

P1065 [NOIP2006 提高组] 作业调度方案

[NOIP2006 提高组] 作业调度方案 题目描述 我们现在要利用 m m m 台机器加工 n n n 个工件&#xff0c;每个工件都有 m m m 道工序&#xff0c;每道工序都在不同的指定的机器上完成。每个工件的每道工序都有指定的加工时间。 每个工件的每个工序称为一个操作&#xff0c;…...

设计模式三原则

1.1单一职责原则 C 面向对象三大特性之一的封装指的就是将单一事物抽象出来组合成一个类&#xff0c;所以我们在设计类的时候每个类中处理的是单一事物而不是某些事物的集合。 设计模式中所谓的单一职责原则&#xff0c;就是对一个类而言&#xff0c;应该仅有一个引起它变化的原…...