移动端布局 ---- 学习分享

响应式布局实现方法
主流的实现方案有两种:
  1. 通过rem \ vw/vh \ 等单位,实现在不同设备上显示相同比例进而实现适配.

  2. 响应式布局,通过媒体查询@media 实现一套HTML配合多套CSS实现适配.

在学习移动端适配之前,还需要学习移动端适配原理:

移动端适配原理(Viewport)
了解VSCode中自动生成的head标签中的viewport

viewport 可以翻译为视区. 是指浏览器用来显示网页的区域,它决定了网页在用户设备上的显示效果.

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  • width=device-width: 将视口的宽度设置为设备的宽度。这确保网页内容不会被缩放,而是按照设备的实际宽度进行布局;

  • initial-scale=1.0: 设置初始的缩放级别为 1.0。这也有助于确保网页在加载时以原始大小显示,而不是被缩小或放大;

  • minimum-scale=1.0: 最小缩放比例为 1;

  • maximum-scale=1.0: 最大缩放比例为 1;

  • user-scalable=no:不允许用户缩放。

rem
在响应式网页与移动端布局时,使用rem而不是px

CSS 中最常用最基础的单位是 px 像素(Pixel),px 是相对于想时期屏幕分辨率而言的。在移动端常用到的是 rem,通过使用 rem 单位,可以相对于根元素的字体大小来定义布局和元素的尺寸,从而使网页更灵活地适应不同的屏幕尺寸。

rem 是一个倍数单位,它是基于 html 标签中的 font-size 属性值的倍数。

只要我们在不同的设备上设置一个合适的初始值,当设备发生变化 font-size 就会自动等比适配大小,从而在不同的设备上表现统一。

使用rem来动态调整页面示例:

<!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>/* html {font-size: 20px;} */
​.box-px {width: 300px;height: 100px;background-color: blueviolet;margin-bottom: 50px;}
​.box-rem {width: 5rem;height: 3rem;background-color: aqua;}</style>
</head>
<body><div class="box-px"></div><div class="box-rem"></div><script>//根据设备宽度计算HTML标签的font-size的属性值function resetHTMLFontSize() {document.documentElement.style.fontSize = screen.width / 10 + 'px';}resetHTMLFontSize();
​// 绑定事件window.onresize = resetHTMLFontSize;</script>
</body>
</html>

选择使用什么字体单位主要由你的项目来决定,如果你的用户群都是用最新版的浏览器,那推荐 rem;如果需要考虑兼容性,那就使用 px 或者两者同时使用。

比如,如果只需要适配少部分手机设备,且分辨率对页面影响不大的,使用 px 即可; 对于需要适配各种移动设备,且分辨率差别比较大的设备,比如 iphone 与平板,使用 rem

对于不支持它的浏览器,应对方法也简单,就是多写一个绝对单位的声明。这些浏览器会忽略用 rem 设定的字体大小,比如:

p {font-size: 14px;font-size: .875rem;
}
Flex布局(弹性盒子布局)

Flex 布局(弹性盒子布局)是一种用于在容器中进行布局的模型,它使得容器的子元素能够以弹性的方式排列,可以配合 rem 处理尺寸以适应不同屏幕尺寸和设备。

Flex 布局在前端开发中得到了广泛的应用,因为它提供了一种相对简单而强大的布局方式。任何一个容器都可以指定为 Flex 布局,符合响应式设计的特点。

.box {display: flex;
}

设为 Flex 布局以后,子元素的 float、clear 和 vertical-align 属性将失效。

采用 Flex 布局的元素,称为 Flex 容器(flex container)。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),如下图:

其中 flex 容器默认存在两根轴:水平的主轴(main axis)垂直的交叉轴(cross axis)

主轴的开始位置(与边框的交叉点)叫做 main start,结束位置叫做 main end

交叉轴的开始位置叫做 cross start,结束位置叫做 cross end。项目默认沿主轴排列。

单个项目占据的主轴空间叫做 main size,占据的交叉轴空间叫做 cross size

flex 布局主要是设置 flex 容器的对齐方式和 flex 项目的大小形态,上图中的四个概念十分重要。

Flex 容器属性

给容器设置 display: flex;后,可以为其添加以下 6 个容器属性:

  • flex-direction

  • flex-wrap

  • flex-flowflex-direction 属性和 flex-wrap 属性的简写形式

  • justify-content

  • align-items

  • align-content

  1. flex-direction:决定主轴的方向(即项目的排列方向)

属性值作用
row(默认值)主轴为水平方向,起点在左端(项目从左往右排列)
row-reverse主轴为水平方向,起点在右端(项目从右往左排列)
column主轴为垂直方向,起点在上沿(项目从上往下排列)
column-reverse主轴为垂直方向,起点在下沿(项目从下往上排列)
  1. flex-wrap:默认情况下,项目都排列在一条轴线上,如果一条轴线排不下的换行方式

属性值作用
nowrap(默认)不换行(列)
wrap主轴为横向时:从上到下换行;主轴为纵向时:从左到右换列
wrap-reverse主轴为横向时:从下到上换行;主轴为纵向时:从右到左换列
  1. justify-content:定义了项目在主轴上的对齐方式

属性值作用
flex-start(默认)与主轴的起点对齐
flex-end与主轴的终点对齐
center与主轴的中点对齐
space-between两端对齐主轴的起点与终点
space-around每个项目两侧的间隔相同.醒目之间的间隔比项目与边框的间隔大一倍
  1. align-items 属性定义项目在交叉轴上如何对齐

属性值作用
flex-start交叉轴的起点对齐
flex-end交叉轴的终点对齐
center交叉轴的中点对齐
baseline项目的第一行文字的基线对齐
stretch(默认值)如果项目未设置高度或社会ayto,项目将占满整个容器的高度
  1. align-content属性定义了多根轴线的对齐方式.如果项目只有一个轴线,该属性不起作用

属性值作用
flex-start与交叉轴的起点对齐
flex-end与交叉轴的终点对齐
center与交叉轴的中点对齐
space-between与交叉轴两端对齐,轴线之间的间隔平均分布
space-around每根轴线两侧的间隔都相等,轴线之间的间隔比轴线与边框的间隔大一倍
stretch(默认值)主轴线占满整个交叉轴

Flex 项目属性

上面所讲的容器属性都是用来设置项目的排列方式,而项目自身的大小和形态需要设置项目的属性,以下 5 个属性设置在项目上:

  • order

  • flex-grow

  • flex-shrink

  • flex

  • align-self

  1. order:默认情况下,项目的排列先后顺序是按照 DOM 结构中出现的先后顺序显示的,而 order 属性定义项目的排列顺序。数值越小,排列越靠前,默认为 0,代码如下

.item {order: 1;
}
  1. flex-grow 属性定义项目的放大比例,默认为 0,即如果存在剩余空间,也不放大,代码如下:

.item {flex-grow: 1; /* default 0 */
}
  1. flex-shrink 属性定义了项目的缩小比例,默认为 1,即如果空间不足,该项目将缩小,代码如下:

.item {flex-shrink: 3; /* default 1 */
}
  1. flex 属性是 flex-growflex-shrinkflex-basis 的简写,默认值为 0 1 auto(默认缩小但不放大)。后两个属性可选。代码如下:v

.item {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
  1. align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items 属性。默认值为 auto,表示继承父元素的 align-items 属性,如果没有父元素,则等同于 stretch。

.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

理解 flex 布局,主要要理解容器和项目两个概念,给容器设置属性用来决定容器中的项目如何排列,如主轴方向、是否换行、主轴和交叉轴的对齐方式等,可以理解为宏观的设定。而给项目设置属性用来决定项目的大小形态顺序,可以理解为微观的设定。

练习Flex示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Flex 弹性盒子 练习</title><style>html {font-size: 10px;}.container {display: flex;height: 40rem;background-color: aqua;/* flex-direction: row-reverse; *//* flex-wrap: wrap; *//* justify-content: center; */align-items: center;}.item {width: 20rem;font-size: 8rem;}</style>
</head>
<body><div class="container"><div class="item" style="background-color: yellowgreen;">1</div><div class="item" style="background-color: red;">2</div><div class="item" style="background-color: gray;">3</div><div class="item" style="background-color: gold;">4</div><div class="item" style="background-color: brown;">5</div><div class="item" style="background-color: #4aa;">6</div></div>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/68487.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

cuda + cudnn安装

1.安装CUDA Toolkit 在设备管理器&#xff08;此电脑–右键–属性&#xff09;的显示适配器中可以查看自己的显卡型号&#xff0c;去下载对应的CUDA Toolkit 。或者输入以下命令查看Driver Version &#xff0c;cuda Version&#xff1a;12.2代表12.2版本以下兼容可以进行安装 …

C++入门基础之命名空间|using声明|缺省参数

命名空间 一、命名空间的基本概念 命名空间是 C 中的一种机制&#xff0c;用于将相关的标识符&#xff08;包括函数、类、变量、对象、结构体、枚举等&#xff09;分组在一起&#xff0c;以避免命名冲突。 它可以看作是一个逻辑容器&#xff0c;将具有相似功能或来自同一模块…

【PyCharm】快捷键使用

【PyCharm】相关链接 【PyCharm】连接 Git【PyCharm】连接Jupyter Notebook【PyCharm】快捷键使用【PyCharm】远程连接Linux服务器【PyCharm】设置为中文界面 【PyCharm】快捷键使用 PyCharm 是一个功能强大且专为 Python 开发设计的集成开发环境&#xff08;IDE&#xff09…

DevUI 2024 年度运营报告:开源生态的成长足迹与未来蓝图

在当今数字化飞速发展的时代&#xff0c;开源已成为推动技术创新与协作的重要力量。DevUI 作为开源领域的重要一员&#xff0c;其发展历程与成果备受关注。值此之际&#xff0c;GitCode 精心整理了 DevUI 年度运营报告&#xff0c;为您全面呈现 DevUI 社区在过去一年里的开源之…

python中的RPA->playwright自动化录制脚本实战案例笔记

playwright录制功能使用绕过登录操作 1、首先安装playwright pip install playwright2、 安装支持的浏览器 playwright install # 安装支持的浏览器&#xff1a;cr, chromium, ff, firefox, wk 和 webkit3、接着在自己的项目下运行录制命令&#xff1a; playwright codegen…

Vue.js组件开发全解析

Vue.js组件开发全解析 文章目录 Vue.js组件开发全解析一、Vue.js基础回顾&#xff08;一&#xff09;Vue实例&#xff08;二&#xff09;指令&#xff08;三&#xff09;计算属性和方法 二、组件基础&#xff08;一&#xff09;组件的概念&#xff08;二&#xff09;全局组件注…

如何选择适合特定项目需求的人工智能学习框架?

人工智能学习框架&#xff08;AI Learning Framework&#xff09;是一种用于开发、训练和部署人工智能模型的软件平台&#xff0c;旨在简化AI模型的设计、训练和部署过程。这些框架通常提供一系列工具、库和预构建模块&#xff0c;使开发者能够快速实现机器学习任务&#xff0c…

架构设计:微服务还是集群更适合?

在现代软件开发中&#xff0c;微服务和集群是两种广泛应用的架构设计方案。随着系统需求的不断复杂化和规模的扩大&#xff0c;选择一种适合的架构对系统的性能、可维护性和扩展性至关重要。那么&#xff0c;在架构设计中&#xff0c;是选择微服务还是集群更适合&#xff1f;本…

Spring Bug解决

报错&#xff1a; Exception in thread "main" org.springframework.beans.factory.NoUniqueBeanDefinitionException: No qualifying bean of type com.itxl.spring6.iocxml.User available: expected single matching bean but found 2: user,user1 at org.sp…

算法(蓝桥杯)贪心算法5——删数问题的解题思路

问题描述 给定一个高精度的正整数 n&#xff08;n≤1000 位&#xff09;&#xff0c;需要删除其中任意 s 个数字&#xff0c;使得剩下的数字按原左右顺序组成一个新的正整数&#xff0c;并且这个新的正整数最小。例如&#xff0c;对于数字 153748&#xff0c;删除 2 个数字后&a…

元素隐式具有 “any“ 类型,因为类型为 “string“ 的表达式不能用于索引类型

元素隐式具有 “any” 类型&#xff0c;因为类型为 “string” 的表达式不能用于索引类型 “{ minLon: string; maxLon: string; minLat: string; maxLat: string; minTime: string; maxTime: string; keyword: string; subjct: string; ele: string; }”。 在类型 “{ minLon:…

《探秘鸿蒙NEXT中的人工智能核心架构》

在当今科技飞速发展的时代&#xff0c;华为HarmonyOS NEXT的发布无疑是操作系统领域的一颗重磅炸弹&#xff0c;其将人工智能与操作系统深度融合&#xff0c;开启了智能新时代。那么&#xff0c;鸿蒙NEXT中人工智能的核心架构究竟是怎样的呢&#xff1f;让我们一同探秘。 基础…

git克隆原项目到新目录,保留提交记录分支等,与原项目保持各自独立

1、克隆原仓库到本地 --mirror 会完整克隆所有git数据&#xff0c;包括所有分支、标签、提交记录 git clone --mirror http://gitlab.com.../old-project.git2、进入文件夹 cd old-project.git3、添加目录仓库为远程 xx-orgin表示给远程地址命名 git remote add xx-orgin htt…

U盘被格式化后的数据救赎与防范策略

一、U盘格式化后的数据困境 在日常的工作与生活中&#xff0c;U盘作为数据传输与存储的重要工具&#xff0c;扮演着不可或缺的角色。然而&#xff0c;当U盘不幸遭遇格式化操作后&#xff0c;存储在其中的宝贵数据瞬间化为乌有&#xff0c;给用户带来极大的困扰。格式化后的U盘…

PyBroker:利用 Python 和机器学习助力算法交易

PyBroker&#xff1a;利用 Python 和机器学习助力算法交易 你是否希望借助 Python 和机器学习的力量来优化你的交易策略&#xff1f;那么你需要了解一下 PyBroker&#xff01;这个 Python 框架专为开发算法交易策略而设计&#xff0c;尤其关注使用机器学习的策略。借助 PyBrok…

【AI论文】LlamaV-o1:重新思考大型语言模型(LLMs)中的逐步视觉推理方法

摘要&#xff1a;推理是解决复杂多步骤问题的基本能力&#xff0c;特别是在需要逐步顺序理解的视觉环境中尤为重要。现有的方法缺乏一个全面的视觉推理评估框架&#xff0c;并且不强调逐步解决问题。为此&#xff0c;我们通过三项关键贡献&#xff0c;提出了一个在大型语言模型…

【HTTP】详解

目录 HTTP 基本概念啥是HTTP&#xff0c;有什么用&#xff1f;一次HTTP请求的过程当你在浏览器中输入一个浏览器地址&#xff0c;它会发送什么 &#xff1f;---&#xff08;底层流程&#xff09;HTTP的协议头请求头&#xff08;对应客户端&#xff09;一些请求头请求方法 响应头…

EasyExcel - 行合并策略(二级列表)

&#x1f63c;前言&#xff1a;博主在工作中又遇到了新的excel导出挑战&#xff1a;需要导出多条文章及其下联合作者的信息&#xff0c;简单的来说是一个二级列表的数据结构。 &#x1f575;️‍♂️思路&#xff1a;excel导出实际上是一行一行的记录&#xff0c;再根据条件对其…

第9章:基于Vision Transformer(ViT)网络实现的迁移学习图像分类任务:早期秧苗图像识别

目录 1. ViT 模型 2. 早期秧苗分类 2.1 数据集 2.2 训练 2.3 训练结果 2.4 可视化网页推理 3. 下载 1. ViT 模型 视觉变换器&#xff08;ViT&#xff09;是一种神经网络架构&#xff0c;它将变换器架构的原理应用于视觉数据。最初&#xff0c;Transformers主要用于自然…

ros2-7.5 做一个自动巡检机器人

7.5.1 需求及设计 又到了小鱼老师带着做最佳实践项目了。需求&#xff1a;做一个在各个房间不断巡逻并记录图像的机器人。 到达目标点后首先通过语音播放到达目标点信息&#xff0c; 再通过摄像头拍摄一张图片保存到本地。 7.5.2 编写巡检控制节点 在chapt7_ws/src下新建功…