移动web第三天 flex布局-01

bg.png

一.移动端的特点

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

PC屏幕大，网页固定版心
手机屏幕小，网页宽度多数为100%

2.谷歌模拟器

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

1.png

步骤:用谷歌浏览器打开写好的代码html文件>>>右键点击检查>>>在设备工具栏中选择移动端设备/型号进行模拟调试

3.分辨率

屏幕尺寸：指的是屏幕对角线的长度，单位一般为英寸；
物理分辨率/设备分辨率：指的就是当前屏幕所拥有的物理像素点的个数！！！它是不可被软件(驱动)改变，出厂就固定了的；
逻辑分辨率：指的就是设备宽度和高度，单位为像素，设计图会根据逻辑分辨率去设计页面，它是可以被软件/驱动所更改的
物理像素点：显示图像最小单位
PPI：单位英寸内所拥有的物理像素点的个数，像素密度，密度越大，屏幕越清晰
移动端主流设备分辨率:

2.png

制作网页参考的是逻辑分辨率

4.视口

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

      添加理想视口标签:  meta:vp
     -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

viewport 视口
width=device-width 设备宽度和视口(页面)宽度相等
initial-scale=1.0 表示写多少像素,在页面中就展示多少像素不缩放
minimum-scale=1,maximum-scale=1,user-scalable=0 ---- 禁止用户缩放页面，防止页面布局被打乱

5.二倍图

一个像素需要两个物理像素来显示就是二倍图
移动端大多使用二倍图,为了高分辨率下图片不会模糊失真

二.百分比布局

目标：能够使用百分比布局开发网页

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

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        footer {
            width: 100%;
            height: 50px;
            position: fixed;
            bottom: 0;
            background-color:pink;
        }

        footer a {
            /* 设置宽高,一行显示多个  添加浮动 */
            /* 浮动元素具有行内块特点 */
            float: left;
            /* 百分比布局:宽度设置百分比,高度设置具体像素值 */
            width: 20%;
            height: 50px;
        }
        footer a img {
            width: 100%;
            height: 50px;
        }
    </style>
</head>
<body>
    <footer>
        <a href="#"><img src="./1.png" alt=""></a>
        <a href="#"><img src="./2.png" alt=""></a>
        <a href="#"><img src="./3.png" alt=""></a>
        <a href="#"><img src="./4.png" alt=""></a>
        <a href="#"><img src="./5.png" alt=""></a>
    </footer>
</body>

三.Flex布局

1.Flex布局/弹性布局：

是一种浏览器提倡的布局模型
布局网页更简单、灵活
避免浮动脱标的问题

2.作用

基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。 - Flex布局非常适合结构化布局

3.设置方式

父元素添加 display: flex，子元素可以自动的挤压或拉伸

4.组成部分

弹性容器:添加display:flex的盒子
特点:宽度和父元素一样,高度由内容撑开
弹性盒子 :弹性容器最近一级的子元素
特点:
1.默认宽度由内容撑开,默认高度为父元素高度(侧轴方向默认是拉伸的)
2.没有块级,行内,行内块元素之分,通通都是弹性盒子可直接设置宽高一行显示多个
主轴: justify-content
侧轴 / 交叉轴:align-items

5.主轴对齐方式

修改主轴对齐方式属性: justify-content

3.png

  .box {
        /* 添加弹性布局 df */
        display: flex;
        /* 改变主轴对齐方式 */
        
         /* flex-star 默认值, 从父元素左边开始显示 */
        /* justify-content: flex-start; */
       

        /* flex-end 显示在弹性容器右侧 */
        /* justify-content: flex-end; */

        /* center 显示在弹性容器中间,沿主轴居中 */
        /* justify-content: center; */

        /* space-around  让空白空间环绕在弹性盒子的两侧,第一个和最后一个弹性盒子离弹性容器的距离为弹性盒子与弹性盒子之间的距离的1/2 */
        /* justify-content: space-around; */

        /* space-between  让空白空间分布在弹性盒子与弹性盒子之间  第一个和最后一个弹性盒子离弹性容器的距离为0 */
        /* justify-content: space-between; */

        /* space-evenly  弹性盒子离弹性容器之间的距离与弹性盒子与弹性盒子的距离相对 */
        justify-content: space-evenly;



        width: 1000px;
        height: 600px;
        background: orange;
      }

6.侧轴对齐方式

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

4.png

  .box {
        /* 添加弹性布局 */
        display: flex;
        /* 侧轴对齐方式 ai*/
        /* 默认值 flex-start 从起点开始排列 */
        /* align-items: flex-start; */

        /* flex-end  从终点排列 */
        /* align-items: flex-end; */

        /* center 垂直居中 */
        align-items: center;

        /* 默认值 stretch 垂直拉伸:沿着侧轴垂直方向拉伸弹性盒子的高度直到和父元素一样高 */
        /* align-items: stretch; */
        width: 1000px;
        height: 600px;
        background: orange;
      }

7.伸缩比

使用flex属性修改弹性盒子伸缩比
属性: flex:值(整数)
伸缩比flex给弹性盒子添加
1.所以弹性盒子都添加flex,
- flex值相同均分弹性容器的宽度
- flex值不同则按例比分配
2.其他盒子的宽度固定,只有一个盒子设置flex:1 占据父元素剩余宽度

8.扩展

浮动不能配合弹性使用,定位可以和浮动一起使用

文字溢出两行以省略号显示:(要几行,把2改成几)

{
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}

移动web第三天 flex布局-01