web移动端知识点复习(三)

moligc

已于 2022-07-30 14:09:57 修改

阅读量225

点赞数 6

文章标签：前端 css html5

于 2022-07-30 10:27:54 首次发布

本文链接：https://blog.csdn.net/moligc/article/details/126068442

版权

1. 移动端特点

1.1 PC端/移动端不同？

PC端

屏幕大，网页固定版心
端浏览器繁多，更多考虑兼容性问题。（布局：浮动+定位+标准流）

移动端

手机屏幕小，网页宽度多数为100%，是适配手机屏幕宽度
移动端则基本不需要考虑兼容性问题，放心大胆使用CSS新特性

1.2 物理分辨率和逻辑分辨率

物理分辨率：硬件所支持的，屏幕出厂就设定无法修改。
逻辑分辨率：软件可以达到的，我们开发中写的是逻辑分辨率。

1.3 视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。

视口的分类：

布局视口。 iOS, Android基本都将这个视口分辨率设置为980px。
视觉视口。用户正在看到的网站的区域。
理想视口。设备有多宽，我的网页就显示有多宽。

1.3.1 视口标签

有了视口标签，可以达到我们想要的理想视口。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

width=device-width：视口宽度=设备宽度
initial-scale=1.0：初始页面缩放倍数
maximum-scale=1.0 最大缩放倍数
user-scalable=0 不允许用户缩放页面（移动端）或者为 no 如果为 yes 则允许用户缩放

1.4 二倍图

其实实际开发中还有三倍图甚至四倍图等，多倍图，但是现在市场还是二倍图偏多，我们称为二倍图。

简单理解，二倍图存在就是为了让页面中图片更加清晰，遵循即可。

网页美工的设计稿基本是 750px
我们前端工程师拿到设计稿利用像素大厨选择 2X，进行缩小一半，按照提示的单位开发即可。

2. flex布局

flex布局极大的提高了我们布局的效率，更简单、灵活。

display: flex; 一定要给亲爸爸加。

2.1 主轴对齐方式

属性值	作用
flex-start	默认值, 起点开始依次排列
flex-end	终点开始依次排列
`center`	沿主轴居中排列
`space-around`	弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
`space-between`	弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间
`space-evenly`	弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等

 			/* 弹性容器 */
            display: flex;
            /* 主轴对齐方式水平方向（X轴)*/
            justify-content: space-between;
            /* 盒子居中,中间不留空隙 */
            justify-content: center;
            /* 中间和最边上 空隙比是2:1*/
            justify-content: space-around;
            /* 所有间隙比为1:1 */
            justify-content: space-evenly;
            /* 从左到右排列,不留空隙(默认排列方式) */
            justify-content: flex-start;
            /* 从右到左排列,不留空隙 */
            justify-content: flex-end;

重点记住标红的。如果非要问我那个常用，我只能说是 space-between

justify-content: space-between;

显示效果：两侧没缝隙

在这里插入图片描述

justify-content: space-around;

效果如下： 记住2倍

在这里插入图片描述

justify-content: space-evenly;

效果如下： 记住空隙一样大

在这里插入图片描述

 justify-content: center;

效果如下： 经常用于让一个盒子水平居中

在这里插入图片描述

记忆：

两侧没缝隙是 between
缝隙一样大是 evenly
2倍缝隙是 around

小技巧：

在这里插入图片描述

见到这个效果，最简单的做法就是：给大盒一个左右的padding，然后在加 justify-content: space-between

2.2 侧轴对齐方式

属性值	作用
flex-start	起点开始依次排列
flex-end	终点开始依次排列
`center`	沿侧轴居中排列
stretch	默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器

重点记住center ，可以让元素垂直居中。

align-items: center;

我们可以通过flex让一个子盒子水平和垂直居中。

在这里插入图片描述

.father {
    width: 500px;
    height: 500px;
    background-color: pink;
    /* 设置为flex布局 */
    display: flex;
    /* 主轴水平居中 */
    justify-content: center;
    /* 侧轴垂直居中 */
    align-items: center;
}

.son {
    width: 200px;
    height: 200px;
    background-color: purple;
}

2.3 伸缩比

把父盒子分为若干份数，每个子盒子各占几份。

flex:1; 一定给子盒子加,分配父级剩余的空间

语法：

flex: 1;

比如有一个父盒子里面有三个子盒子，每个子盒子写 flex：1；此时每个子盒子各占三分之一。

.father {
    display: flex;
    height: 300px;
    background-color: pink;
}
.father div {
    /* 每个孩子各占1份 */
    flex: 1;
    /* 默认子盒子和父亲一样高 */
    background: purple;
}

html 结构

<div class="father">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

显示效果：

在这里插入图片描述

一定要给子盒子添加。
子盒子默认高度会和父盒子一样高。（前提是不给高度）

2.4 圣杯布局

所谓的圣杯布局就是左右两边大小固定不变，中间宽度自适应。

一般这种布局方式适用于各种移动端顶部搜索部分，这是最常见的，如京东手机版主页面顶部搜索

在这里插入图片描述

核心思路：

两侧盒子写固定大小
中间盒子 flex: 1; 占满剩余空间

.top {
    display: flex;
    justify-content: c;
}

.top div:first-child {
    width: 50px;
    height: 50px;
    background-color: red;
}

.top div:last-child {
    width: 50px;
    height: 50px;
    background-color: red;
}

.top div:nth-child(2) {
    flex: 1;
    height: 50px;
    background-color: pink;
}

注意：中间flex: 1; 和 width 有冲突。优先执行 flex：1；

3.小结

在flex眼中，标签不再分类。
- 简单说就是没有块级元素，行内元素和行内块元素
- 任何一个元素都可以直接给宽度和高度一行显示
Flex不存在脱标的情况：也就是基本淘汰了浮动，更不用清除浮动
当然存在兼容性问题，如果不考虑兼容性可以大量使用，如果是移动端则不用考虑直接flex.

4. 设置主轴方向

主轴默认是水平方向, 侧轴默认是垂直方向
修改主轴方向属性: flex-direction

属性值	作用
`row`	行, 水平(默认值)
`column`	*列, 垂直
row-reverse	行, 从右向左
column-reverse	列, 从下向上

语法：

//修改完毕，主轴是Y轴， 侧轴是X轴。
flex-direction：column;

4.1 如何去算是几背图

精灵图的宽度/装精灵图盒子的宽度=倍数

4.2 修改主轴经常的使用场景：

请完成如下场景：

比如：

在这里插入图片描述

a {
            width: 70px;
            height: 58px;
            /* 改变文字排列方向 */
            display: flex;
            /* 改变主轴方向 */
            flex-direction: column;
            /* Y轴居中 */
            justify-content: center;
            /* X轴居中 */
            align-items: center;
            background-color: pink;
        }
         a span:first-child {
            width: 28px;
            height: 28px;
            background: url(./images/mainnav.png) no-repeat 0px -85px;
        
            background-size: 28px auto;
        }

4.3 弹性盒子换行

特性：给父亲添加了 display: flex; 所有的子盒子（弹性盒子）都会在一行显示，不会自动换行。

弹性盒子换行显示 : flex-wrap:

语法：

flex-wrap: wrap;

4.4 设置侧轴对齐方式

注意:

此处设置侧轴多行的垂直对齐方式。 align-content（少）
和前面学过的 align-items （侧轴单行垂直对齐）（多）
align 垂直比如 align-items 垂直对齐 align-content 多行垂直对齐
content 主轴 justify-content align-content 侧轴多行对齐

align-content：center；

属性值	作用
flex-start	默认值, 起点开始依次排列
flex-end	终点开始依次排列
center	沿主轴居中排列
space-around	弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-between	弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间