移动开发的核心是屏幕适配，常见的几种适配方案如下：


固定宽度（缺点两边留白）

  • 设置<meta name="viewport" content="width=device-width,initial-scale=1">
  • 设置内容区域大小为320px，固定版心；
  • 设置内容区域水平居中显示，两侧留白，对宽屏不友好；

关于手机尺寸： ​​​​https://www.ubuuk.com/screen​​

流式布局

就是常说的百分比布局，不用给盒子设置固定的长度，而使用%单位。当前元素的宽高取决于父容器，父容器会参照自己的上级元素，直到找到浏览器，浏览器受限于手机设备的尺寸。

  • 设置<meta name="viewport" content="width=device-width,initial-scale=1">
  • 设置页面宽度为百分比，高度没办法设置百分比也比较尴尬；
<!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{width: 100%; height: 300px; background-color: #f30;}
        .box .item{width: 25%;height:300px;float:left;}
        .item1{background-color: #333;}
        .item2{background-color: #666;}
        .item3{background-color: #999;}
        .item4{background-color: #ccc;}
    </style>
</head>
<body>
    <div class="box">
        <div class="item item1">item1</div>
        <div class="item item2">item2</div>
        <div class="item item3">item3</div>
        <div class="item item4">item4</div>
    </div>
</body>
</html>

移动端开发适配方案（笔记）_移动开发

Flex布局

布局的传统解决方案是基于盒子模型，依赖display属性+position属性+float属性。对于特殊布局显得不方便。比如：垂直居中就不容易实现。

Flex的兼容性不错，除了IE9以下不支持外，其他大部分浏览器都有很好的兼容。

移动端开发适配方案（笔记）_移动开发_02

参考网站：​​https://caniuse.com/?search=flex​​

移动端开发适配方案（笔记）_居中显示_03

简介

Flex（Flexible Box 缩写），意为“弹性盒布局”，用来为盒子模型提供最大的灵活性，任何一个容器都可以指定为Flex布局。

.box{
  display:flex;
}

设为Flex布局后，子元素float、clear、vertical-align 属性将失效；

​​​​https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout​​

采用Flex布局的元素，称为Flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为Flex项目(flex items)，简称“项目”。

移动端开发适配方案（笔记）_移动开发_04

容器默认存在两根轴：水平的主轴（main axis），默认为水平方向和垂直的交叉轴（cross axis），默认为垂直方向。

主轴的开始位置叫做main start，结束位置叫做main end；

交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

任何盒子都可以使用Flex布局，无论它是块级元素，还是行内元素，都可以开启；


如果一个盒子开启了Flex布局

Flex Item是基于主轴进行排序（可横可竖），如果子元素没有设置宽度，则宽度为内容的宽度，如果没有设置高度，高度拉伸为当前Flex Container的高度。

盒子里的Flex Item就可以设置宽高了；

<!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>flex布局</title>
    <style>
        body,div,p{margin: 0;padding: 0;}
        body{padding:0 10px;}
        .flex-box{
            display: flex;width: 100%;height: 100px;background-color: #ccc;
        }
        .flex-box div{color:#fff}
        .flex-box div:nth-child(1){background-color: #060;}
        .flex-box div:nth-child(2){background-color: #600;}
        .flex-box div:nth-child(3){background-color: #006;}
    </style>
</head>
<body>
    <h1>flex布局</h1>
    <p>任何盒子都可以使用Flex布局，无论它是块级元素，还是行内元素，都可以开启；</p>
    <hr>
    <div class="flex-box">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

移动端开发适配方案（笔记）_居中显示_05

容器属性

  1. flex-direction 设置主轴的方向，默认的方向基于水平方向
  2. flex-wrap 设置 flex item 是否换行，默认是不换行
  3. flex-flow 是 flex-direction 和 flex-wrap 的简写
  4. justify-content 用来控制 flex item 在主轴方向的显示状态
  5. align-items 用来控制 flex item 在交叉轴的显示状态
  6. align-content 只针对多行生效，和flex-wrap 一起使用，用来控制 flex item 在交叉轴的显示状态
flex-direction

设置主轴的方向，默认是row

flex-direction: row;  /* 水平 */

flex-direction: column;  /* 垂直 */

flex-direction: row-reverse;

flex-direction: column-reverse;

看一个column的实例

.flex-box{
  display:flex;
  flex-direction:column;
}

代码如下：

<!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>flex布局</title>
    <style>
        body,div,p{margin: 0;padding: 0;}
        body{padding:0 10px;}
        .flex-box{
            display: flex;width: 100%;height: 100px;background-color: #ccc;
            flex-direction: column;
        }
        .flex-box div{color:#fff}
        .flex-box div:nth-child(1){background-color: #060;}
        .flex-box div:nth-child(2){background-color: #600;}
        .flex-box div:nth-child(3){background-color: #006;}
    </style>
</head>
<body>
    <h1>flex布局</h1>
    <div class="flex-box">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

效果：

移动端开发适配方案（笔记）_移动开发_06

justify-content

在主轴方向的显示状态

justify-content: flex-start; /* 左（上）对齐 */

justify-content: flex-end;  /* 右（下）对齐 */

justify-content: center; /* 水平（垂直）居中*/

justify-content: space-around;  /* 剩余空间相对于flex item左右均分 */

justify-content: space-between;  /* 两侧贴边，剩余空间均分*/

justify-content: space-evenly; /* 剩余空间等分*/

效果对比：

移动端开发适配方案（笔记）_固定宽度_07

align-items

在交叉轴方向的显示状态，假设flex item有高度；

align-items: stretch; /* flex item没有设置高度时，高度跟父容器相同 */

align-items: baseline;  /* flex item高度各不相同时，以基线对齐 */

align-items: center; /* 垂直（水平）居中*/

align-items: flex-start;  /* 顶（左）对齐 */

align-items: flex-end;  /* 底（右）对齐*/

效果对比：

移动端开发适配方案（笔记）_固定宽度_08


项目属性