Day03 移动web

移动端特点

移动端和PC端网页不同点

1、PC端网页和移动端网页的有什么不同？

1.PC屏幕大，网页固定版心

2.手机屏幕小，网页宽度多数为100%

2、如何在电脑里面边写代码边调试移动端网页效果？

1.谷歌模拟器

谷歌模拟器

1、 2、 3、

分辨率

屏幕尺寸

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

了解移动端主流设备分辨率

分辨率分类

物理分辨率是生产屏幕时就固定的，它是不可被改变的
逻辑分辨率是由软件（驱动）决定的

思考：制作网页参考物理分辨率还是逻辑分辨率？

逻辑分辨率

视口 — meta

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

手机屏幕尺寸都不同，网页宽度为100%
网页的宽度和逻辑分辨率尺寸相同。

思考：默认情况下，网页的宽度和逻辑分辨率相同吗？

不同，默认网页宽度是980px。

1.目标：网页宽度和设备宽度(分辨率)相同。

2.解决办法：添加视口标签。

3.视口：显示HTML网页的区域，用来约束HTML尺寸。

1、viewport：视口

2、width=device-width：视口宽度=设备宽度

3、initial-scale=1.0：缩放1倍（不缩放）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 有以下的这段代码    理想视口  现在常用 -->
    <!-- 没有以下的这段代码  老网页  布局视口 -->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta 
    name="viewport" 
    content="width=device-width, initial-scale=1.0maximuminitial-scale=1,minmum-scale=1,user-scalable=no">    <title>03-理想视口</title>
    <style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    div{
        width: 100px;
        height: 100px;
        background-color: aqua;
    }
    </style>
</head>
<body>
<div>理想视口</div>
</body>
</html>

二倍图

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

百分比布局

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

Flex布局

Flex布局/弹性布局：

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

Flex布局模型构成

<!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>05-体验flex布局和float的异同</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 
        1.设置 div 变成flex 盒子 弹性flex
        display：flex; df
        2.div中子元素 发生一些改变
            1.设置了flex的盒子 称为父项
            2.盒子里面的子元素  称为子项
        3.具体变化
            1.不再区分什么 块级行内和行内块 全部都可以设置宽度和高度
            2.子项 默认的宽度和高度
                宽度 由内容撑开
                高度 等于父项的高
            3.子项
                使用 浮动有没有效果  无效
                使用 定位、margin、trandform 都有效的
            4.默认情况下 子项总宽度大于 父项的宽
                也不会换行！！！ flex不会换行
                只会压缩自身的宽度而已
            */
        div{
            width: 300px;
            height: 300px;
            background-color: aqua;
            margin: 200px auto;
        /* 设置div变成 */
            /* display: flex; */
         }
        span{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
       
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
</body>
</html>

主轴对齐方式

思考：网页中，盒子之间有距离吗？

答：有。

在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距。

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

<!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>05-体验flex布局和float的异同</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
       /* 
       flex布局 存在 主轴 侧轴（类似excel）
       1.主轴 = x轴 = 水平方向
       2.侧轴 = y轴 = 垂直方向
       3.给父项添加的 父项中设置 主轴对齐方式
       */
        div{
            width: 600px;
            height: 600px;
            background-color: aqua;
            margin: 200px auto;
            display: flex;
            /* 
            设置主轴对齐方式
            1.左对齐 flex-start
            2.右对齐 flex-end
            3.居中对齐 center
            4.先侧轴对齐，间隔存放 space-between;   sb
            5.间隔存放 - 两侧空间小于中间   space-around  sd
            6.绝对平均  space-evenly    sv
            */
            justify-content: space-evenly;
         }
        span{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
       
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>
</html>

侧轴对齐方式 - align-items

修改侧轴对齐方式属性:

align-items（添加到弹性容器）
align-self：控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

<!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>07-侧轴对齐方式</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        div{
            width: 600px;
            height: 600px;
            background-color: aqua;
            margin: 200px auto;
            display: flex;
            /* 
            侧轴对齐（设置元素  上下的位置） align-itmes
            1.flex-start 上对齐
            2.flex-end 下对齐
            3.center  垂直居中
            */
            align-items: center;
        }
        span{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>
</html>

flex

属性

flex : 值;
取值分类
数值(整数)

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

<!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>09-换行</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        div{
            width: 600px;
            height: 600px;
            background-color: aqua;
            margin: 200px auto;
            display: flex;
            /* 
            默认情况下
            1.flex不会换行的！！
            当子元素的总宽度大于父元素的时候 不会换行
            只会 挤压子元素的宽度！

            2.设置 换行属性！
            flex-wrap
            1.nowrap    不换行

            */
            flex-wrap: wrap;
        }
        span{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </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>
        <span>8</span>
    </div>
</body>
</html>

<!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>10-设置主轴方向</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        div{
            width: 600px;
            height: 600px;
            background-color: aqua;
            margin: 200px auto;
            display: flex;
            /* 
            修改主轴方向 flex-direction
            1.row 默认值 水平方向 从左到右  少用
            2.row-reverse 从右到左  少用  了解
            3.column 从上到下   会用
            4.column-reverse 从下到上   少用  了解
            */
            flex-direction: column;
            /* 设置主轴对齐方式 */
            justify-content: space-around;
        }
        span{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </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>
        <span>8</span>
    </div>
</body>
</html>
<!-- 
    理解  flex 是可以修改主轴方向
    理解 当主轴方向修改了之后
        设置主轴对齐属性 效果也会跟着发生改变
        justify-content
        align-items
        
 -->

Day03移动Web