day11 移动web1

杰瘦瘦

已于 2022-09-25 19:38:25 修改

阅读量235

点赞数

分类专栏：前端基础笔记文章标签：前端 css

于 2022-07-02 20:30:31 首次发布

本文链接：https://blog.csdn.net/m0_70619994/article/details/125577283

版权

前端基础笔记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

一、移动端特点

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

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

2、谷歌浏览器

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

3、分辨率

（1）屏幕尺寸概念

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

（1）移动端主流设备分辨率

PC分辨率：

1920* 1080
1366* 768
……

缩放150%：

（1920/150%）*（1080/150%）

总结：

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

分辨率分类：

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

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

手机各大型号分辨率：

4、视口

（1）什么是视口?
视口简单理解就是可视区域大小我们称之为视口。在PC端，视口大小就是浏览器窗口可视区域的大小。在移动端, 视口大小并不等于窗口大小, 移动端视口宽度被人为定义为了980

（2）为什么是980而不是其他的值?
因为过去网页的版心都是980，乔老爷子为了能够让网页在移动端完美的展示, 所以将iOS手机视口的大小定义为了980。后来谷歌也觉得这是一个非常牛X的方案, 所以Android手机的视口也定义为了980

（3）如何保证在移动端不自动缩放网页的尺寸?

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

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

5、二倍图

（1）什么是二倍图？

当设备像素比很大时，图片会被放大，而放大会让图片看起来模糊。为此，我们可以使用二倍图的方式来提高图片的清晰度。从而提高分辨率，保证图片不会失真。

（2）怎么使用像素大厨软件测量二倍图中元素的尺寸

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

二、百分比布局

1、什么是百分比布局？

百分比布局也称为流式布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。流式布局方式是移动web开发使用的比较常见的布局方式。

百分比布局的特点是宽度自适应，而高度是固定的。基于这一特点，在互联网刚刚兴起的时候，人们要求也不高，所以一直沿用的百分比布局。但是随着技术的发展，为了提升用户体验，百分比布局也慢慢逐渐被淘汰了，现如今只有少数网站的部分布局还在使用这种方式，大部分网站现在都是使用的Flex布局。

三、Flex布局

Flex布局又称为弹性布局，是一种浏览器提倡的布局模型，使得布局网页更简单、灵活，也避免浮动脱标的问题。

作用：

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

设置方式：

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

组成部分：

弹性容器
弹性盒子
主轴
侧轴/ 交叉轴

1、主轴对齐方式

属性:

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;
            justify-content: flex-start;
            justify-content: flex-end;

            justify-content: center;

            /* 均分间距: 父级剩余尺寸分配成间距 */
            /* 间距出现在子级之间 */
            justify-content: space-between;

            /* 间距出现在子级的两侧 */
            /* 视觉效果: 子级之间的间距是父级两端间距的二倍 */
            justify-content: space-around;

            /* 各个地方的间距都相等 */
            justify-content: space-evenly;
            
            height: 200px;
            margin: auto;
            border: 1px solid #000;
        }
        
        .box div {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>

展示效果：

2、侧轴对齐方式

属性：

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>侧轴对齐方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;
            /* align-items: center; */
            /* 默认值, 表示拉伸: 去掉子级的高度 */
            /* align-items: stretch; */

            height: 300px;
            margin: auto;
            border: 1px solid #000;
        }
        
        .box div {
            /* width: 100px; */
            /* height: 100px; */
            background-color: skyblue;
        }

        /* 单独设置某个弹性盒子的侧轴对齐方式 */
        
        .box div:nth-child(2) {
            align-self: center;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>

展示效果：

3、伸缩比

属性：

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: 1px solid #000;
        }

        .box div {
            height: 200px;
            margin: 0 20px;
            background-color: skyblue;
        }

        .box div:nth-child(1) {
            width: 50px;
        }

        /* flex: 先计算父级剩余尺寸, 看需要把父级分成多少份(把所有flex属性值相加), 每个子级占用自己对应的份数 */
        .box div:nth-child(2) {
            flex: 2;
        }

        .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>

展示效果：

4、修改主轴方向

在Flex布局中，弹性盒子默认是沿着水平方向排列的。而且我们如果想要修改主轴的排列方向可以使用flex-direction来进行修改

属性：flex-direction

5、弹性盒子换行

默认情况下，多个弹性盒子哪怕宽度不够都是排列在一行的，如下图所示：

代码：

展示效果：

可以看到8个盒子的总宽度为800，但是iphone手机模拟器的宽度只有667，可盒子全部还是一样在一行排列，这就是弹性盒子的特性。而如果我们需要换行排列的话，则需要使用如下属性：

属性：flex-wrap:wrap;（默认值nowrap）

代码：

<!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: flex-start;
            align-content: flex-end; */

            align-content: center;
            align-content: space-around;
            align-content: space-between;
            align-content: space-evenly;
            /* align-content: stretch; */

            height: 500px;
            border: 1px solid #000;
        }
        
        .box div {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </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>

展示效果：