移动Web学习03-移动Web开发基础知识&Flex布局

都是数据而已

已于 2024-04-05 23:35:17 修改

阅读量856

点赞数 13

文章标签：前端学习

于 2024-04-01 00:30:19 首次发布

本文链接：https://blog.csdn.net/qq_45052183/article/details/137213565

版权

4.1、谷歌模拟器

使用谷歌模拟器

PC 端内容调试面板放下边比较合适、但是移动端的调试面板如果放在下边就非常的不方便，一般我们放在左边或者右边

PC端页面跟移动端页面有什么不同

PC端屏幕比较大、网页固定版心
手机屏幕小，没有版心，网页宽度多数为100%

4.2、屏幕尺寸

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

4.3、分辨率

PC分辨率
- 1920*1080
- 1366*768
- …
缩放150%
- （1920/150% *1080/150%）
总结
- 硬件分辨率—物理分辨率（出厂设置）
- 缩放调节的分辨率----逻辑分辨率（软件/驱动设置）

分辨率分类
- 物理分辨率是生产屏幕时就固定的，它是不可被改变的
- 逻辑分辨率是由软件（驱动）决定的
什么叫分辨率
- 所谓的分辨率就是你可以在你的屏幕上放多少个像素点（一个像素点就是1px)

1920的分辨率画质高还是2880的分辨率的像素高？
- 肯定是2880的像素高
制作网页参考的是物理分辨率还是逻辑分辨率？
- 如果使用物理分辨率那么高清屏幕下左右留白会很大
- 所以，页面参考的是：逻辑分辨率

移动端分辨率

4.4、视口

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

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

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

不同，默认网页宽度是980px（不加视口标签）

因为网页默认宽度是980px，移动端屏幕有很小、所以我们要学习通过视口标签调整视口大小

这个980px那来的？有一个人定的

乔布斯所有移动端界面的大小都以`980px为准

布局视口 layout viewport

所谓视口（viewport）就是浏览器显示页面内容的屏幕区域。

一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。

iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

视觉视口 visual viewport

字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。

我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。

理想视口 ideal viewport

为了使网站在移动端有最理想的浏览和阅读宽度而设定

理想视口，对设备来讲，是最理想的视口尺寸

简单理解：设备有多宽，我的网页就显示有多宽

视口标签

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

<!-- 目标：网页宽度和设备宽度(分辨率)相同-->
<!-- 解决办法：添加视口标签。-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 视口标签 让网页宽度和设备宽度（逻辑分辨率相同）相同 -->
    <!-- 其实你写代码是375px 到手机上变成750px,因为他有一个二倍的的关系 1px--手机上就是2px（写代码就是写逻辑的一半） -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--
         `viewport`：视口
			width=device-width：视口宽度 = 设备宽度
			initial-scale=1.0：初始页面缩放倍数
			maximum-scale=1.0 最大缩放倍数
			user-scalable=0 不允许用户缩放页面（移动端） 或者为 no 如果为 yes 则允许用户缩放
     -->
    <title>Document</title>
</head>
<body>
    
</body>
</html>

京东移动端写法如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

4.5、二倍图

一张像素图 50*50

放到手机里边他会变成100*100（但是会失真）

一个纯色的盒子、放大缩小无所谓、但是图片就不行了会失真边模糊

怎么保证他不会失真？

UI给我们的所有的图片、都会是一个二倍图

他不会在给你一个50*50的图片了，他会专门给你一个100*100的图

但是有一个问题是，你100乘100的图放上去，可就变成200了呀？用代码限制下

 <img src="./images/1.jpg" alt="" width="50px" height="50px">

图片本身就是100*100的

你写的时候缩小写、50px*50px,到移动端展示的时候就是100*100的图了，

我们的设备参考

现阶段设计稿参考iPhone6/7/8，设备宽度375px产出设计稿。他们的物理项目跟逻辑像素比是2:1的关系

二倍图设计稿尺寸：750px。

比如我现在从浏览器中找了一个移动端页面、宽度为750px,那么他在代码写的时候就是375px

因为有比例关系存在

物理是750px那么逻辑就是375px,2:1的关系，我们参考的就是逻辑像素

写小点会变大

4.6、百分比布局

所谓百分比布局、我们也叫做流式布局
效果就是：宽度自适应，高度是固定的

<!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;
        }
        
        .toolbar {
            position: fixed;
            left: 0;
            bottom: 0;
            /* 百分比布局  流式布局 */
            width: 100%;
            height: 50px;
            background-color: pink;
            border-top: 1px solid #ccc;
        }
        
        .toolbar li img {
            height: 100%;
        }

        .toolbar li {
            float: left;
            width: 20%;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="toolbar">
        <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>

4.7、Flex布局体验

多个盒子横向排列使用什么属性？

浮动

设置盒子间的间距使用的什么属性？

margin

需要注意什么问题？

浮动的盒子脱标

移动端为啥不能用浮动？

如果是你在手机端去写这个东西，手机端的页面因为我们不知道盒子具体是多宽，因为没有版心，手机分辨率各不相同所以盒子和盒

子之间的距离我们没办法控制，比如我们在375的屏幕下的分辨下可以的，但是如果分辨率在变大，右侧的空白就会变大，在如果是

较小的分辨率下、三个盒子有放不下了。所以我们不能采用浮动布局方式

体验Flex布局

移动端因为没有版心的存在用Flex布局是比较合适的

浮动通常用于PC布局，因为PC端有版心的存在、在以前Flex是有兼容性问题存在的，但是现在已经不在考虑兼容性问题了

趋势是Flex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            height: 200px;
            border: 1px solid #000;
            display: flex;
            justify-content: space-between;
        }
        .box div{
            width: 100px;
            height: 100px;
            /* float: left; */
            background-color: pink;
           
        }
         .box div:nth-child(2){ 
             margin:0 35px; 
         }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

4.8、Flex布局的组成

Flex布局/弹性布局：
- 是一种浏览器提倡的布局模型
- 布局网页更简单、灵活
- 避免浮动脱标的问题
- 不兼容低版本的浏览器，但是如果是写移动端页面，那不会有兼容性问题
查看是否兼容可用的一个好网址
- https://caniuse.com
作用
- 基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
- Flex布局非常适合结构化布局
设置方式
- 父元素添加 display: flex，子元素可以自动的挤压或拉伸
组成部分
- 弹性容器
- 弹性盒子
- 主轴（默认横向是主轴）
- 侧轴 / 交叉轴

注意：一定得是父元素

4.9、Flex主轴对其方式

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

思考：网页中，盒子之间有距离吗？
- 有的
  - 在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
             /*将元素变为了伸缩盒子模型*/
            display: flex;
            
            /*调整主轴方向，水平从左到右默认 column从上到下*/
            flex-direction:row
            
            /*主轴换行方式：换行*/
            flex-wrap:wrap;    
            
            /*设置基准长度：设置伸缩项目在主轴上的基准长度，若主轴是横向的宽失效，若主轴是纵向的 高失效 这个值默认是auto*/
            /*浏览器在计算主轴上是否有剩余空间时，他拿的是主轴的基准长度去计算的 auto 横轴指宽，侧轴指高*/
            flex-basis:300px; 
            
            /* 设置主轴对齐方式 */
            /* 从左刀到右：默认值 */
            /* justify-content: flex-start; */

            /* 终点开始依次排列 */
            /* justify-content: flex-end; */

            /* 居中显示 */
            /* justify-content: center; */
            
            /* 沿主轴排列 空白间距在弹性盒子（子元素之间）均分1:2:2:1 */
            /* justify-content: space-around; */
           
            /* 沿主轴排列 两次贴边中间评分间距2:2:2*/
            /* justify-content: space-between; */
            
            
            /* 沿主轴排列 所有的间距是相等的 1:1:1:1*/
            justify-content: space-evenly;
        }
    </style>
    
</head>
<body>
    <div class="box">
         <div>1</div>
         <div>2</div>
         <div>3</div>
    </div>
</body>
</html>

4.1、Flex侧轴对齐方式

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            /*将元素变为了伸缩盒子模型*/
            display: flex;
            /* 设置测轴对齐方式 */
            
            /* 起点开始依次排列 */
            /* align-items: flex-start; */

            /* 终点开始依次排列 */
            /* align-items: flex-end; */

            /* 侧轴居中显示 */
            /* align-items: center; */
            /* 沿主轴居中 配合上述实现垂直水平居中  */
            /* justify-content: center; 这个用的比较多一点 */
   
            /* 默认高度是父元素的高度 以前内容是默认高度（默认值）*/
            align-items: stretch; 
            
           
            height: 200px;
            border: 1px solid red;
        }
        .box div{
            width: 100px;
            /* height: 100px; */
            background-color: pink;
            /* 可以压缩*/
            flex-grow:1
            /* 可以拉伸*/    
            flex-shrink:1  
            /* 设置基准长度*/
            flex-basis:100px;
            /* 复合写法*/ 
            flex:1 1 100px;
            /* 复合写法2 可以拉伸 可以压缩 不设置基准长度，可简写为：flex:auto*/
            flex:1 1 auto;
            /* 简单写法*/
            flex auto;
        }
    </style>
    
</head>
<body>
    <div class="box">
         <div>1</div>
         <div>2</div>
         <div>3</div>
    </div>
</body>
</html>

使用align-self代码案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            display: flex;
            align-items: center;  
            height: 200px;
            border: 1px solid red;
        }
        .box div{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .box div:nth-child(1){
            /* 设置给弹性盒子的跟align-items: center; 不同*/
            align-self: flex-start;
        }
    </style>
    
</head>
<body>
    <div class="box">
         <div>1</div>
         <div>2</div>
         <div>3</div>
    </div>
</body>
</html>

4.2、伸缩比

属性值
- flex：值
取值分类
- 数值（整数）

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
           height: 200px;
           border: 1px solid  #000;
           display: flex;
        }
        .box div{
            /* width: 50px; */
            height: 50px;
            /* 每个人占一份，跟百分之25一个道理 */
            flex: 1;
            background-color: red;
        }
        .box div:nth-child(1){
            flex:1
        }
        .box div:nth-child(2){
            flex:1
        }
        .box div:nth-child(3){
            flex:1
        }
        .box div:nth-child(4){
            flex:2
        }
    </style>
    
</head>
    <body>
        <div class="box">
             <div>1</div>
             <div>2</div>
             <div>3</div>
             <div>4</div>
        </div>
    </body>
</html>

4.3、Flex弹性盒子自动换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .dad{
            width: 300px;
            height: 300px;
            border: 1px solid rebeccapurple;
        }
        .dad ul{
            /* 必须得加高 */
            height: 300px;
            /* 无论你放多少个li，都会在一行显示 弹性盒子，盒子自动缩小*/
            display: flex;
            /* 外套包裹约束 东西多自动换一行*/
            flex-wrap: wrap;
            /* 沿测轴对齐方式 多行不管用/单行管用*/
            /* align-items: center; */
            /* 多行沿侧轴多行对齐 */
            align-content: center;
        }
        .dad li{
            list-style: none;
            width: 50px;
            height: 50px;
            background-color: pink;
        }
    </style>
    <!-- 
        目标：使用flex-wrap实现弹性盒子多列排列效果
        思考：默认情况下，多个弹性盒子如何显示？
        弹性盒子换行显示:flex-wrap:wrap;
        调整行对齐方式：align-content
                取值与justify-content一样
     -->
</head>
<body>
     <div class="dad">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
     </div>
</body>
</html>

4.4、小米布局案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 1226px;
            height: 614px;
            /* background-color: pink; */
            margin: 50px auto;
            display: flex;
            justify-content: space-between;
        }
        .left{
            width: 234px;
            height: 614px;
            background-color: purple;
        }
        .right{
            width: 978px;
            height: 614px;
            /* background-color: yellow; */
        }
        .right ul{
            /*   align-content: space-between; 使用必须给ul高度，没有办法分配高度 */
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;
        }
        .right ul li{
            width: 234px;
            height: 300px;
            background-color: skyblue;
            list-style: none;
        }
    </style>
</head>
<body>
     <div class="box">
         <div class="left">2</div>
         <div class="right">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
         </div>
     </div>
</body>
</html>

4.4、改变主轴排列方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--
        目标:使用flex-direction改变元素排列方向 
        思考：Flex布局模型中，弹性盒子默认沿着那个方向排列?
        答案：水平方向
        思考：如何实现内容垂直排列？

        使用flex-direction:column改变元素排列方向
        
        主轴默认是水平方向，侧轴默认是垂直方向
        修改主轴方向属性:flex-direction:column;

        row   行，水平（默认值）
        column 列，垂直
        row-reverse  行，从右向左
        column-reverse 列，从下向上
    -->
    <style>
        .box{
            width: 100px;
            height: 100px;
            border: 2px solid #f00;
            text-align: center;
        }
        .box img{
            display: block;
            /* 这管用了，因为有宽了，如果是个盒子、没宽度是不行的 */
            margin: 10px auto;
            /* 垂直居中 就必须手动设置了*/
        }
    </style>
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/apple100.jpg" width="50px" height="50px" alt=""><a href="">苹果</a>
    </div>
</body>
</html>

4.5、改变主轴排列方式案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            display: flex;
            width: 100px;
            height: 100px;
            border: 2px solid #f00;
            /* 改变主轴方向 colum 垂直方向  row水平方向 */
            flex-direction: column;
            /*沿主轴排列 垂直居中 */
            justify-content: center;
            /*沿测轴排列 水平居中 */
            align-items: center;
        }
    </style>
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/apple100.jpg" width="50px" height="50px" alt=""><a href="">苹果</a>
    </div>
</body>
</html>