移动web 03

一、移动端特点

1.移动端和PC端网页不同点

  • PC端网页和移动端网页的有什么不同？
    PC屏幕大，网页固定版心
    手机屏幕小， 网页宽度多数为100%
  • 如何在电脑里面边写代码边调试移动端网页效果？
    谷歌模拟器

2.谷歌模拟器

使用谷歌模拟器 调试移动端网页

移动web 03 - 图1

3.分辨率

3.1了解屏幕尺寸概念

  • 屏幕尺寸 ：指的是屏幕对角线的长度，一般用英寸来度量

移动web 03 - 图2

3.2分辨率

移动web 03 - 图3

移动web 03 - 图4

移动web 03 - 图5

4.视口

使用meta标签设置视口宽度，制作适配不同设备宽度的网页

移动web 03 - 图6

移动web 03 - 图7

移动web 03 - 图8

  • 目标：网页宽度和设备宽度(分辨率)相同。
  • 解决办法：添加视口标签。
  • 视口：显示HTML网页的区域，用来约束HTML尺寸。

移动web 03 - 图9

  • viewport：视口
  • width=device-width：视口宽度 = 设备宽度
  • initial-scale=1.0：缩放1倍（不缩放）

5.二倍图

能够使用像素大厨软件测量二倍图中元素的尺寸

移动web 03 - 图10

移动web 03 - 图11

移动web 03 - 图12

  • 现阶段设计稿参考iPhone6/7/8，设备宽度375px产出设计稿。
  • 二倍图设计稿尺寸：750px。

移动web 03 - 图13

二、百分比布局

  • 百分比布局， 也叫流式布局
  • 效果： 宽度自适应，高度固定

三、Flex布局（重点）

能够使用Flex布局模型灵活、快速的开发网页

  • 思考
  1. 多个盒子横向排列使用什么属性？ 浮动
  2. 设置盒子间的间距使用什么属性？ margin
  3. 需要注意什么问题？ 浮动的盒子脱标

1.Flex布局可以做什么？

  • 传统的布局方式大部分是依赖盒子模型 + display + 定位 + 浮动来实现，如想要实现一个简单的水平垂直居中，就比较费劲
  • flex布局技术做为目前前端最为流行和好用的布局技术，几乎目前所有的移动端页面都会采用flex布局来实现。是每一个前端工程师必备的布局技能。
  • 可以用来做移动端页面布局
    也可以用来pc端布局
    只要是ie9以上，都支持

2.什么是Flex布局？

flex 是 Flexible Box 的缩写，意为“弹性布局”，可以简便、完整、响应式地实现各种页面布局，它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力

  • Flex布局/弹性布局：
  1. 是一种浏览器提倡的布局模型
  2. 布局网页更简单、灵活
  3. 避免浮动脱标的问题
  • 作用
  1. 基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生
  2. Flex布局非常适合结构化布局
  • 设置方式
  1. 父元素添加 display: flex，子元素可以自动的挤压或拉伸
  • 组成部分
  1. 弹性容器
  2. 弹性盒子
  3. 主轴
  4. 侧轴 / 交叉轴

移动web 03 - 图14

2.1flex对父项和子项的影响

当一个盒子被设置为flex后，我们称它为父项。

它本来的子元素就简称为子项

父项

1.margin 生效吗？ 生效
2.浮动生效吗？ 生效
3.定位还生效吗？ 生效
结论
因此做页面效果时，可以先定好盒子的位置，然后再设置它为 flex，不用担心flex会影响到当前盒子的位置

子项

1.默认的宽度和高度
宽度由内容撑开，高度等同于父项的高度
2.所有子项都可直接设置宽度和高度吗
只要是子项都可以设置宽度和高度
3.margin 生效吗？ 生效
4.浮动生效吗？ 不生效
5.定位还生效吗？ 生效
因此在子项中，我们是不会使用浮动属性的

结论：
1.父项可以理解为还是一个普通的div 没有太多改变
2.子项的改变比较大，主要有

  • 可以直接设置宽度和高度
  • 默认宽度是内容撑开，高度等于父项的高度
  • margin 和 定位一样可以正常使用，浮动就不要出现在flex中

3.主轴对齐方式

使用justify-content调节元素在主轴的对齐方式

  • 思考：网页中，盒子之间有距离吗？ 答：有。
  1. 在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距
    修改主轴对齐方式属性: justify-content

移动web 03 - 图15

移动web 03 - 图16

移动web 03 - 图17

移动web 03 - 图18

移动web 03 - 图19

移动web 03 - 图20

移动web 03 - 图21

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>主轴对齐方式</title>
  8.     <style>
  9.         *{
  10.             padding: 0;
  11.             width: 0;
  12.             box-sizing: border-box;
  13.         }
  14.         div{
  15.             width: 600px;
  16.             height: 600px;
  17.             margin: 100px 100px;
  18.             border: 1px solid black;
  19.             display: flex;
  20.             /* 左对齐 */
  21.             /* justify-content: start; */
  22.             /* 右对齐 */
  23.             /* justify-content: end; */
  24.             /* 居中 */
  25.             /* justify-content: center; */
  26.             /* 左右贴着 元素贴两侧 */
  27.             /* justify-content: space-between; */
  28.             /* 两侧空间小 */
  29.             /* justify-content: space-around; */
  30.             /* 空白等价 看见空间都相等 */
  31.             justify-content: space-evenly;
  32.         }
  33.         span{
  34.             width: 100px;
  35.             height: 100px;
  36.             background-color: pink;
  37.             border: 1px solid black;
  38.         }
  39.     </style>
  40. </head>
  41. <body>
  42.     <div>
  43.         <span>1</span>
  44.         <span>2</span>
  45.         <span>3</span>
  46.         <span>4</span>
  47.     </div>
  48. </body>
  49. </html>

补充 缩写：

移动web 03 - 图22

4.侧轴对齐方式

使用align-items调节元素在侧轴的对齐方式

  • 修改侧轴对齐方式属性:
  1. align-items（添加到弹性容器）
  2. align-self:控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

移动web 03 - 图23

移动web 03 - 图24

移动web 03 - 图25

移动web 03 - 图26

移动web 03 - 图27

代码如下：

<!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>
        *{
            padding: 0;
            width: 0;
            box-sizing: border-box;
        }
        div{
            width: 600px;
            height: 600px;
            margin: 100px 100px;
            border: 1px solid black;
            display: flex;
            /* align-items: center; */
            /* align-items: flex-start; */
            align-items: flex-end;
        }
        span{
            width: 100px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>
</html>

四、3d变换（偏重点）

1.flex-wrap 换行

flex-wrap 默认情况下，主轴子项的宽度超出了父项的宽度，子项是不会换行往下掉的，当我们想要设置子项换行的时候，那么就需要使用到该属性
1.nowrap 默认值 不换行
2.wrap 换行

移动web 03 - 图28

代码如下：

<!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>flex换行</title>
    <style>
        *{
            padding: 0;
            width: 0;
            box-sizing: border-box;
        }
        div{
            width: 600px;
            height: 600px;
            background-color: aqua;
            margin: 100px 100px;
            display: flex;
            /* 设置换行 */
            flex-wrap: wrap;
            /* 不换行 默认值 nowrap
            flex-wrap: nowrap; */
        }
        span{
            width: 100px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
    </div>
</body>
</html>

2.修改主轴

flex-direction

flex-direction 设置主轴和侧轴的方向。默认情况下，主轴是水平从左到右，侧轴是垂直从上到下
row 默认值
1.主轴 左到右
2.侧轴 上到下
column
1.主轴 上到下
2.侧轴 左到右

移动web 03 - 图29

移动web 03 - 图30

代码如下：

<!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>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        div{
            width: 400px;
            height: 400px;
            background-color: aqua;
            margin: 100px 100px;
            display: flex;
            flex-direction: column;
        }
        span{
            background-color: pink;
        }
        /* 
        1.flex 存在两个方向-两个轴  分布主轴和侧轴
        2.当主轴是水平方向的时候  侧轴垂直方向  flex-direction:row;
          1.子项默认的宽度由内容撑开 高度等于父项的高度
          2.justify-content 设置的主轴方向对齐  水平
          3.align-items 设置 侧轴方向 对齐     垂直

          3.当我们修改了主轴的方向  主轴是垂直 侧轴是水平  flex-direction:column;
            1. 子项默认的宽度 = 父项的宽度   高度 = 内容撑开
            2.justify-content  主轴 垂直
            3.align-items  侧轴 水平
        */
    </style>
</head>
<body>
    <div>
        <span>ggggggggggggggggggggggg</span>
    </div>
</body>
</html>

3.侧轴 多行（了解）

align-content

移动web 03 - 图31

移动web 03 - 图32

移动web 03 - 图33

移动web 03 - 图34

移动web 03 - 图35

移动web 03 - 图36

代码如下：

<!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>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        div{
            width: 600px;
            height: 600px;
            background-color: aqua;
            margin: 100px 100px;
            display: flex;
            /* 换行 */
            flex-wrap: wrap;
            /* 侧轴多行  居中 */
            /* align-content: center; */
            /* 上对齐 */
            /* align-content: start; */
            /* 下对齐 */
            /* align-content: flex-end; */
            /* 两侧空间小 */
            /* align-content: space-around; */
            /* 两侧对齐 */
            /* align-content: space-between; */
            /* 空白空间大小相等 */
            align-content: space-evenly;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
    </div>
</body>
</html>

自我区别：

justify-content 水平分布方式

align-content 垂直分布方式

4.补充理解

子项身上主要有以下3个比较常用的属性
1.flex 常用
设置子项占父项 剩下的 宽度的比例
2.align-self
设置子项在侧轴上的对齐
3.order
设置子项在主轴上的排列顺序 值越小越靠前

五、伸缩比

使用flex属性修改弹性盒子伸缩比

属性 flex : 值; （flex:1;）

取值分类 数值(整数)

注意 : 只占用父盒子剩余尺寸

六、Flex小结

1.在flex布局中，子项是可以直接设置宽度和高度的
2.我们记忆它的时候，可以归类成不过是可以换了个方式设置左右和上下对齐而已
3.父项默认是不换行的 要设置 换行属性 flex-wrap 才行
4.子项可以通过设置 flex 属性来控制自身宽度的比例

七、课后补充（重点）

单行文字溢出代码”省略号”

用三行代码实现

text-overflow： ellipsis；

white-space： nowrap；

overflow： hidden；