移动端布局 ---- 学习分享
响应式布局实现方法
主流的实现方案有两种:
-
通过
rem\vw/vh\ 等单位,实现在不同设备上显示相同比例进而实现适配. -
响应式布局,通过媒体查询
@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-flow：flex-direction属性和flex-wrap属性的简写形式 -
justify-content -
align-items -
align-content
-
flex-direction：决定主轴的方向（即项目的排列方向）
| 属性值 | 作用 |
|---|---|
| row(默认值) | 主轴为水平方向,起点在左端(项目从左往右排列) |
| row-reverse | 主轴为水平方向,起点在右端(项目从右往左排列) |
| column | 主轴为垂直方向,起点在上沿(项目从上往下排列) |
| column-reverse | 主轴为垂直方向,起点在下沿(项目从下往上排列) |
-
flex-wrap：默认情况下，项目都排列在一条轴线上，如果一条轴线排不下的换行方式
| 属性值 | 作用 |
|---|---|
| nowrap(默认) | 不换行(列) |
| wrap | 主轴为横向时:从上到下换行;主轴为纵向时:从左到右换列 |
| wrap-reverse | 主轴为横向时:从下到上换行;主轴为纵向时:从右到左换列 |
-
justify-content：定义了项目在主轴上的对齐方式
| 属性值 | 作用 |
|---|---|
| flex-start(默认) | 与主轴的起点对齐 |
| flex-end | 与主轴的终点对齐 |
| center | 与主轴的中点对齐 |
| space-between | 两端对齐主轴的起点与终点 |
| space-around | 每个项目两侧的间隔相同.醒目之间的间隔比项目与边框的间隔大一倍 |
-
align-items属性定义项目在交叉轴上如何对齐
| 属性值 | 作用 |
|---|---|
| flex-start | 交叉轴的起点对齐 |
| flex-end | 交叉轴的终点对齐 |
| center | 交叉轴的中点对齐 |
| baseline | 项目的第一行文字的基线对齐 |
| stretch(默认值) | 如果项目未设置高度或社会ayto,项目将占满整个容器的高度 |
-
align-content属性定义了多根轴线的对齐方式.如果项目只有一个轴线,该属性不起作用
| 属性值 | 作用 |
|---|---|
| flex-start | 与交叉轴的起点对齐 |
| flex-end | 与交叉轴的终点对齐 |
| center | 与交叉轴的中点对齐 |
| space-between | 与交叉轴两端对齐,轴线之间的间隔平均分布 |
| space-around | 每根轴线两侧的间隔都相等,轴线之间的间隔比轴线与边框的间隔大一倍 |
| stretch(默认值) | 主轴线占满整个交叉轴 |
Flex 项目属性
上面所讲的容器属性都是用来设置项目的排列方式，而项目自身的大小和形态需要设置项目的属性，以下 5 个属性设置在项目上：
-
order -
flex-grow -
flex-shrink -
flex -
align-self
-
order：默认情况下，项目的排列先后顺序是按照 DOM 结构中出现的先后顺序显示的，而 order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0，代码如下
.item {
order: 1;
}
-
flex-grow属性定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大，代码如下：
.item {
flex-grow: 1; /* default 0 */
}
-
flex-shrink属性定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小，代码如下：
.item {
flex-shrink: 3; /* default 1 */
}
-
flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto（默认缩小但不放大）。后两个属性可选。代码如下：v
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
-
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>