移动端开发个人笔记
移动端
一，移动端相关概念
- 移动端概念：可以移动的设备称之为移动端，一般指手机，平板，手表等。
- 我们开发时主要考虑的是手机界面，app
- 移动端查看模拟器功能
二，移动端手机像素
《1》物理像素
设备出厂时的屏幕像素点
《2》逻辑像素/CSS像素
CSS样式表中使用的像素就叫逻辑像素
《3》设备像素比/DPR
设备像素比=物理像素/CSS像素
三，视口
《1》布局视口:
布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度，布局视口的默认宽度有可能是768px、980px或1024px等。
1，浏览器设置布局视口的原因：
有些网站是没有对移动端进行开发的，为了能够让用户观看，设置了布局视口，但是布局视口只是能看，并不能给用户最佳的观看体验。
《2》视觉视口:
是指用户看到的区域，及屏幕窗口的大小
《3》理想视口:
理想视口是指对设备来讲最理想的视口尺寸，能够给用户最佳的移动端观看体验
设置理想视口代码如下：
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
四，移动端布局（PX固定布局）
《1》设置理想视口
《2》*{margin:0; padding:0;}
body{display :flex;
flex-direction: column; }
中间模块{flex :1;
overflow-y : auto; }
《3》设计图量出来，根据设计图的设备像素比，计算出来我们要使用的CSS像素进行开发
缺点：
只能在出具设计图的机型上才能适配，无法适配其他机型。
五，其他的移动端布局方案
《1》可切换的固定布局
同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过识别的屏幕尺寸或浏览器宽度，选择最合适的那套宽度布局；
总结：
响应式布局的理念，有部分网页时这么做的
《2》弹性布局/百分比布局（常用）
比百分比作为页面的基本带我，多使用弹性盒布局，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果。
《3》等比缩放布局/rem布局
使用rem作为移动端开发的基本单位，可以实现页面随着屏幕大小变化而等比缩放
《4》混合布局
弹性盒盒等比缩放布局综合使用。
六，响应式布局
《1》优缺点：
优点：
1，面对不同分辨率设备灵活性强
2，能够快捷解决多设备显示适应问题
缺点：
1，兼容各种设备工作量大，效率低下
2，代码累赘，会出现隐藏无用的元素，加载时间加长
3，其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
4，一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
《2》如何实现响应式布局-媒体查询 @media
(1) 概念:
媒体查询可以让我们根据设备显示器的特性为其设定CSS样式.
(2) 组成：
媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。
(3) 格式：
@media all and (min-width:320px) and (max-width:480px){
需要响应的CSS样式
}
（4）媒体类型
前端常用的类型有：
all 所有设备
screen 显示器，笔记本，移动端（前端页面显示设备）
handled 便携设备（移动端）
七，弹性布局/百分比布局
《1》特点：
控件弹性：
（1）关键模块高度和位置不变，宽度根据窗口大小自适应。
（2）布局多使用弹性布局，控件左右，左中右，居中分布，让左右固定，中间伸缩
文字流试：
（1）文字内容模块不去写固定的宽高，让内容自动撑开
图片等比缩放：
（1）图片不写固定的高度，宽度写百分比，让图片随着窗口大小等比缩放
《2》总结：
弹性布局比较吃设计，开发时对于一些关键模块宽高固定，中间伸缩。
多使用弹性盒，百分比开发。
八，前端常用开发单位
| 单位 | ： |
|---|---|
| px | 像素 |
| em | 相对父元素的字体大小去，参照物是父元素字体大小，而不是父元素身上的其他属性大小 |
| rem | 相对根元素的字体大小，相对于html标签字体大小 |
| vw | vw视窗宽度单位(1vw视窗宽度的百分之1) |
| vh | vh视窗高度单位(1vw视窗高度的百分之1) |
九，等比缩放布局/rem布局
《1》特点：
页面里边的元素会根据分辨率等比例放大或缩小.
《2》如何实现：
1，rem——相对根元素字体大小：
如果开发的时候，我们的单位全部使用rem，这个时候我们的每一个大小都不是一个固定值，而是一个变量，就能实现代码不变，根元素的字体一变，整个页面就会跟着变。
理论上，如果能够让根元素的字体大小随着分辨率实时改变，那么我们用rem开发，页面就能够实现等比缩放。
2，vw——针对视窗宽度单位：
1vw等于视窗宽度的百分之1，如果屏幕视窗宽度大小为1080px，那么1vw==10.8px，这个单位参考物为屏幕窗口大小，视窗一旦变化，他所代表的数值也会跟着改变，
如果我们将根元素字体大小设置为vw，那么根元素的字体大小就会跟着屏幕的大小改变，根元素的字体大小改变页面的rem数值也会跟着改变。
3，如何设置比例方便我们计算：
总结：
html{
font-size：10000/设计图物理像素宽度；
/* 开发时换算比例为 1rem==100px; */
}
十，混合布局
等比缩放布局+弹性布局
在开发中，可以使用弹性布局的地方还用弹性布局，涉及到具体大小，我们用rem单位。
十一，Grid网格布局
《1》含义：
它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局
《2》区别：
Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。
Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。
《3》相关概念：
容器：一个案例中最大的盒子，可以理解成父元素
项目：一个案例中的，最大盒子里面的内容，可以理解成子元素
行和列：容器里面的水平区域称为"行"，垂直区域称为"列"。
单元格：行和列的交叉区域，称为"单元格"。
网格线：划分网格的线，称为"网格线"。水平网格线划分出行，垂直网格线划分出列。
N行N列 N+1横N+1竖
《4》gird布局容器属性（写给父元素）
1，将元素变为网格布局容器
display：grid； 块元素类型的网格布局
display：inline-gird； 行内块元素类型的网格布局
2，gird-template-rows 划分行
3, grid-template-columns 划分列
特点：网格布局需要搭配行列划分去使用，容器进行行列划分后，项目默认水平从左往右在网格中排列。
行列划分的属性值写法：
（1）xx yy zz； 具体数值，有几个参数划分几行几列，每一个参数是行列的宽或者高
（2）功能函数 repeat(X,Y) 第一个参数为重复几次，第二个参数为重复的内容
(3) 关键词 repeat（auto-fill,XXX） 作为repeat（）的第一个参数使用，根据重复内容自动计算重复次数。
(4) 关键字fr 将行列总体划分为N份，每个fr参数为占据几分之几
（5）minmax（） 功能函数 行列的最大最小值
（6）auto 关键字 自动填充，一组值中建议写一个
4，通过划分网格线，合并网格线来合并网格
grid-template-rows ：[x1] 100px [x2] 100px [x3] 100px [x4];
grid-template-columns ：[y1] 100px [y2] 100px [y3] 100px [y4];
5，指定区域：
gird-template-areas：
“a b c c ”
"d e c c"
"d g g h"
"f g g h“；
注意：
1，划分区域时，只能横着或者竖着，不能斜着划分，也不能拐弯。
2，可以使用.作为占位符使用，占位符不能写给项目当空间使用。
6，行列间距：
grid-row-gap 行间距
grid-column-gap 列间距
grid-gap 行列间距，第一次参数是行间距，第二个参数是列间距
7，项目排列顺序：grid-auto-flow
row(默认值) 横向排列
column 纵向排列
8，单元格对其方式
justify-items 水平对其方式
align-items 垂直对其方式
place-items: align-items justify-items ;（第一个参数为垂直，第二个参数为水平）
start 开始位置
center 居中
end 结束位置
stretch 拉伸（默认值）
9，网格行列分布方式
justify-content 行对其方式
align-content 类对其方式
place-content：align-content justify-content ；（第一个参数为垂直，第二个参数为水平）
start 整体靠开始位置
center 整体居中
end 整体结束位置
space-around 整体环绕式分布
space-between 整体两端分布
stretch 拉伸充满屏幕（默认值）
《5》项目属性（写给子元素）
1， grid-row:开始行线/结束行线；
grid-column:开始列线/结束列线；
作用：通过规定行和列开始线和结束线来合并网格，制定元素出现的位置
2，grid-area 指定元素所在的区域
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列1：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
· 【杂谈】分布式事务——高大上的无用知识？