移动端特点移动端和PC端网页不同点谷歌模拟器分辨率视口二倍图百分比布局 Flex布局 Fle布局模型构成主轴对齐方式侧轴对齐方式伸缩比实战演练

xml@77

已于 2022-05-17 16:02:34 修改

阅读量397

点赞数

分类专栏：移动Web 文章标签： css css3 html

于 2022-05-14 19:40:24 首次发布

本文链接：https://blog.csdn.net/weixin_43772946/article/details/124757956

版权

移动Web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

移动端特点
百分比布局
Flex布局
实战演练

移动端特点

移动端和PC端网页不同点

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

谷歌模拟器

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

在这里插入图片描述

分辨率

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

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

PC分辨率
- 1920 * 1080
- 1366 * 768
- …
缩放150%
- （1920/150%）*（1080/150%）

总结
- 硬件分辨率（出厂设置）
- 缩放调节的分辨率（软件设置）

在这里插入图片描述

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

在这里插入图片描述

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

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

在这里插入图片描述

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

在这里插入图片描述

视口

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

在这里插入图片描述

手机屏幕尺寸都不同，网页宽度为100%
网页的宽度和逻辑分辨率尺寸相同。
思考：默认情况下，网页的宽度和逻辑分辨率相同吗？
- 不同，默认网页宽度是 980 px。

在这里插入图片描述

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

在这里插入图片描述

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

二倍图

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

在这里插入图片描述

图片分辨率, 为了高分辨率下图片不会模糊失真

在这里插入图片描述

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

在这里插入图片描述

百分比布局

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

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

在这里插入图片描述

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        .toolbal {
            position: fixed;
            left: 0;
            bottom: 0;
            /* 百分比布局  流式布局 */
            /* 宽度自适应，高度固定 */
            width: 100%;
            height: 50px;
        }
        .toolbal li {
            float: left;
            width: 20%;
            height: 50px;

        }
        .toolbal li img{
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="toolbal">
        <ul>
            <li><a href="#"><img src="./images/index.png" alt=""></a></li>
            <li><a href="#"><img src="./images/classify.png" alt=""></a></li>
            <li><a href="#"><img src="./images/jd.png" alt=""></a></li>
            <li><a href="#"><img src="./images/car.png" alt=""></a></li>
            <li><a href="#"><img src="./images/login.png" alt=""></a></li>
        </ul>
    </div>
</body>
</html>

Flex布局

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

思考
- 多个盒子横向排列使用什么属性？
  - 浮动
- 设置盒子间的间距使用什么属性？
  - margin
- 需要注意什么问题？
  - 浮动的盒子脱标
Flex布局/弹性布局：
- 是一种浏览器提倡的布局模型
- 布局网页更简单、灵活
- 避免浮动脱标的问题

Fle布局模型构成

作用
- 基于Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
- Flex布局非常适合结构化布局
设置方式
- 父元素添加 display: flex ，子元素可以自动的挤压或拉伸
组成部分
- 弹性容器
- 弹性盒子
- 主轴
- 侧轴/ 交叉轴

主轴对齐方式

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

思考：网页中，盒子之间有距离吗？
答：有。
- 在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>Document</title>
    <style>
         * {
            margin: 0;
            padding: 0;
        }
        .box {
            display: flex;
            /* 居中 */
            justify-content: center;
            
            /* 间距在弹性盒子（子级）之间 */
            justify-content: space-between;

            /* 所有地方的间距都相等 */
            justify-content: space-around;

            /* 间距加在子级的两侧 */
            /* 视觉效果：子级之间的距离是父级两头距离的2倍 */
            justify-content: space-evenly;
            height: 200px;
            border: 1px solid #000;
        }
        .box div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            display: flex;
            /* align-items -- 对齐项目 */
            /* align-items: center; */

            /* 拉伸，默认值 */
            /* 子级没有高度时默认高度铺满整个父级 */
            /* align-items: stretch; */
            height: 300px;
            margin: auto;
            border: 2px solid #000;
        }
        .box div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        /* 单独设置某个弹性盒子的侧轴对齐方式 */
        .box div:nth-child(2) {
            align-self: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            display: flex;
            height: 300px;
            border: 2px solid #000;
        }
        .box div {
            height: 200px;
            margin: 0 20px;
            background-color: pink;
        }
        .box div:first-child {
            /* 设置了宽度占用了空间 */
            width: 50px;
        }
        .box div:nth-child(2) {
            /* 占用父盒子剩余宽度尺寸中的一份 */
            flex: 1;
        }
        .box div:nth-child(3) {
            /* 占用父盒子剩余宽度尺寸中的三份 */
            flex: 3;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

主轴方向

目标：使用flex-direction改变元素排列方向

思考：Flex布局模型中，弹性盒子默认沿着哪个方向排列？
答：水平方向。
思考：如何实现内容垂直排列？

在这里插入图片描述

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

在这里插入图片描述

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .box li {
            display: flex;
            /* 1. 先确定主轴方向; 2. 再选择对应的属性实现主轴或侧轴的对齐方式 */
            /* 修改主轴方向: 列 */
            flex-direction: column;

            /* 视觉效果: 实现盒子水平居中 */
            align-items: center;

            /* 视觉效果: 垂直居中 */
            justify-content: center;
            

            width: 80px;
            height: 80px;
            border: 1px solid #ccc;
        }
        
        .box img {
            width: 32px;
            height: 32px;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <img src="./images/media.png" alt="">
                <span>媒体</span>
            </li>
        </ul>
    </div>
</body>

</html>

弹性盒子换行

目标：使用flex-wrap实现弹性盒子多行排列效果

思考：默认情况下，多个弹性盒子如何显示？
弹性盒子换行显示: flex-wrap: wrap;
调整行对齐方式：align-content
- 取值与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>弹性盒子换行</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;

            /* 默认值, 不换行 */
            /* flex-wrap: nowrap; */

            /* 弹性盒子换行 */
            flex-wrap: wrap;

            /* 调节行对齐方式 */
            /* align-content: center; */
            /* align-content: space-around; */
            align-content: space-between;

            height: 500px;
            border: 1px solid #000;
        }
        
        .box div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
    </div>
</body>

</html>

实战演练

小兔鲜儿 -确认订单

目标：使用Flex布局模型快速开发网页

在这里插入图片描述

order.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>确认订单</title>
    <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/orders.css">
</head>
<body>
    <!-- 主题内容：滑动查看 -->
    <div class="main">
        <!-- 用户信息 -->
        <div class=" pannel user_info">
             <div class="location">
                <i class="iconfont icon-location"></i>
             </div>
             <div class="user"> 
                <div class="top">
                    <h5>易烊千玺</h5>
                    <p>18500667882</p>
                </div>
                <div class="bottom">
                    北京市  海淀区  中关村软件园   信息科技大厦1号
楼410#   
                </div>
             </div>
             <div class="more ">
                 <i class="iconfont icon-more"></i>
             </div>
        </div>
        <!-- 用户信息 -->
        <!-- 商品信息 -->
        <div class="pannel goods">
            <div class="pic">
                <img src="./uploads/pic.png" alt="">
            </div>
            <div class="text">
                <h5>康尔贝 非接触式红外体温仪
                    领券立减30元 婴儿级材质 测温…
                </h5>
                <p><span>粉色</span><span>红外体温计</span></p>
                <div class="price">
                    <span class="red">￥<i>266</i></span>
                    <span>￥299</span>
                </div>

            </div>
            <div class="count">
                <i class="iconfont icon-x"></i>
                <span>1</span>
            </div>
        </div>
        <!-- 商品信息 -->

        <!-- 其它 -->
        <div class="pannel other">
            <!-- post 配送 -->
            <div class="post">
                <h5>配送方式</h5>
                <p>顺丰快递</p>
            </div>
            <!-- remark 备注 -->
            <div class="remark">
                <h5>买家备注：</h5>
                <p>希望可以尽快发货，谢谢~</p>
            </div>
            <!-- payment 支付 -->
            <div class="payment">
                <h5>支付方式</h5> 
                <p><span>支付宝 <i class="iconfont icon-more"></i></span></p>
            </div>
        </div>
        <!-- 其它 -->
    </div>
    <!-- 主题内容：滑动查看 -->

    <!-- 底部支付：固定定位 -->
    <div class="pay">
        <div class="left">
            合计：<span>￥<i class="red">266.00</i></span>
        </div>

        <div class="right">
            <a href="#">去支付</a>
        </div>
    </div>
    <!-- 底部支付：固定定位 -->
</body>
</html>

order.css

body {
    background-color: #f7f7f8;
}

/* 公共样式 */
.red {
    color: #cf4444;
}

.pannel {
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 5px;
}

/* 主体内容 */
.main {
    /* 80px: 为了内容不被底部区域盖住 */
    padding: 12px 11px 80px;
}

/* 用户信息 */
.user_msg {
    display: flex;
    align-items: center;
    padding: 15px 0 15px 11px;
}

.user_msg .location {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    background-image: linear-gradient(90deg, 
		#6fc2aa 5%, 
		#54b196 100%);
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    color: #fff;
}

.user_msg .user {
    flex: 1;
}

.user_msg .user .top {
    display: flex;
}

.user_msg .user .top h5 {
    width: 55px;
    font-size: 15px;
    font-weight: 400;
}

.user_msg .user .top p {
    font-size: 13px;
}

.user_msg .user .bottom {
    margin-top: 5px;
    font-size: 12px;
}

.user_msg .more {
    width: 44px;
    height: 44px;
    /* background-color: pink; */
    text-align: center;
    line-height: 44px;
    color: #808080;
}







/* 主体内容 */

/* 底部支付 */
.pay {
    position: fixed;
    left: 0;
    bottom: 0;

    display: flex;
    /* 主轴对齐方式 */
    justify-content: space-between;
    /* 侧轴对齐方式 */
    align-items: center;

    width: 100%;
    height: 80px;

    padding: 0 11px;
    /* background-color: pink; */
    border-top: 1px solid #ededed;
}

.pay .left {
    font-size: 12px;
}

.pay .left i {
    font-size: 20px;
}

.pay .right a {
    display: block;
    width: 90px;
    height: 35px;
    background-image: linear-gradient(90deg, 
		#6fc2aa 5%, 
		#54b196 100%);
    border-radius: 3px;
    text-align: center;
    line-height: 35px;
    font-size: 13px;
    color: #fff;
    
}
/* 底部支付 */

base.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font: 16px/1.5 sans-serif;
  color: #333;
  background-color: #fff;
}
li {
  list-style: none;
}
em,
i {
  font-style: normal;
}
a {
  text-decoration: none;
  color: #333;
}
a:hover {
  color: #5eb69c;
}
img {
  width: 100%;
  vertical-align: middle;
}
input {
  padding: 0;
  border: none;
  outline: none;
  color: #333;
}
button {
  cursor: pointer;
}
/* 清除浮动 */
.clearfix:before,
.clearfix:after {
  content: '';
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

使用Flex布局模型快速开发网页
在这里插入图片描述

xml@77

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动端特点移动端和PC端网页不同点谷歌模拟器分辨率视口二倍图百分比布局 Flex布局 Fle布局模型构成主轴对齐方式侧轴对齐方式伸缩比实战演练

移动端特点移动端和PC端网页不同点谷歌模拟器分辨率视口二倍图百分比布局Flex布局Fle布局模型构成主轴对齐方式侧轴对齐方式伸缩比实战演练
复制链接

扫一扫