移动端常见布局

移动端常见布局

（1）流式布局（百分比布局）

1. 介绍
   • 流式布局，就是百分比布局，也称非固定像素布局。
   • 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
   • 流式布局方式是移动web开发使用的比较常见的布局方式。
2. 设置局限（不可以无限拉长或者缩小页面的）
   • max-width最大宽度( max-height最大高度)
   • min-width最小宽度（ min-height最小高度)

（2）flex布局（重要）

flex布局与传统布局

1. 传统布局

• 兼容性好
• 布局繁琐
• 局限性，不能再移动端很好的布局

2. flex弹性布局

• 操作方便，布局极为简单，移动端应用很广泛
• PC端浏览器支持情况较差
• IE11或更低版本，不支持或仅部分支持

3. 建议︰

1. 如果是PC端页面布局，我们还是传统布局。
2. 如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局

布局原理

1. flex是flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

2. 注意

   • 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。
   • 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局flex布局

3. 采用Flex布局的元素，称为Flex容器( flex container )，简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目( flex item )，简称"项目"。

   • 体验中div就是flex父容器。
   • 体验中span就是子容器flex项目
   • 子容器可以横向排列也可以纵向排列
     

4. 总结flex布局原理∶
   就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

常见父项属性

1. 属性

• flex-direction :设置主轴的方向
• justify-content:设置主轴上的子元素排列方式flex-wrap∶设置子元素是否换行
• align-content:设置侧轴上的子元素的排列方式(多行)
• align-items :设置侧轴上的子元素排列方式(单行)
• flex-flow :复合属性，相当于同时设置了flex-direction和flex-wrap

2. flex-direction设置主轴的方向★

   1. 主轴与侧轴：在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有∶行和列、x轴和y轴
   • 默认主轴方向就是x轴方向，水平向右
   • 默认侧轴方向就是y轴方向，水平向下
   2. 属性值
   • flex-direction属性决定主轴的方向(即项目的排列方向)
   • 注意∶主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的
     

3. justify-content 设置主轴上的子元素排列方式★

   1. justify-content属性定义了项目在主轴上的对齐方式
   2. 注意:使用这个属性之前一定要确定好主轴是哪个
      

4. flex-wrap设置子元素是否换行★

   1. 默认情况下，项目都排在一条线(又称”轴线”)上。flex-wrap属性定义，flex布局中默认是不换行的。
   2. 语法

      <!-- 默认值 ，不换行 -->
      flex-wrap:nowrap;
      <!-- 换行 -->
      flex-wrap:wrap;
      

5. align-items设置侧轴上的子元素排列方式(单行)★

   1. 该属性是控制子项在侧轴（默认是y轴）上的排列方式在子项为单项的时候使用
   2. 语法

      <!-- 从上到下 -->
      align-items:flex-start;
      <!-- 从小到上 -->
      align-items:flex-end;
      <!-- 垂直居中，挤在一起 -->
      align-items:center;
      <!-- 拉伸（默认值） 子盒子不要给高度-->
      align-items:stretch;
      

6. align-content设置侧轴上的子元素的排列方式（多行)

   1. 设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(多行），在单行下是没有效果的。
   2. 语法

   <!-- 默认值在侧轴的头部开始排列 -->
   align-content:flex-start;
   <!-- 在侧轴的尾部开始排列 -->
   align-content:flex-end;
   <!-- 在侧轴中间显示 -->
   align-content:center;
   <!-- 子项在侧轴平分剩余空间 -->
   align-content:space-around;
   <!-- 子项在侧轴先分布在两头，在平分剩余空间 -->
   align-content:space-between;
   <!-- 设置子项元素高度平分父元素高度 -->
   align-content:stretch;
   

   3. align-contenthe align-items的区别
      • align-items适用于单行情况下，只有上对齐、下对齐、居中和拉伸
      • align-content适应于换行(多行)的情况下（单行情况下无效)，可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
      • 总结就是单行找align-items多行找align-content

7. flex-flow

   1. flex-flow属性是flex-direction和flex-wrap属性的复合属性
   2. 语法

   flex-flow:row wrap;
   

   3. 总结
   • flex-direction :设置主轴的方向
   • justify-content:设置主轴上的子元素排列方式
   • flex-wrap∶设置子元素是否换行
   • align-content :设置侧轴上的子元素的排列方式(多行)
   • align-items :设置侧轴上的子元素排列方式(单行)
   • flex-flow :复合属性，相当于同时设置了flex-direction和flex-wrap

子项flex属性使用

1. flex属性
   1. flex属性定义子项目分配剩余空间，用flex来表示占多少份数。
   2. 语法

   .item {
      flex : <number>; /*default */
      }
   

2. align-self 控制子项自己在侧轴上的排列方式
   1. align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
   2. 语法

   span :nth-child(2) {
      /*设置自己在侧轴上的排列方式*/
      align-self: flex-end;
      }
   

（3）rem适配布局

rem基础

1. rem (root em)是一个相对单位，类似于em , em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。
   比如，根元素( html）设置font-size=12px, 非根元素设置width:2rem;则换成px表示就是24px。

媒体查询

1. 什么是媒体查询： 媒体查询(Media Query ）是CSS3新语法。

   • 使用@media查询，可以针对不同的媒体类型定义不同的样
   • @media可以针对不同的屏幕尺寸设罩不同的样式
   • 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
   • 目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

2. 语法规范

   @media mediatype and | not |only (media feature) {      
      CSS-Code;
   }
   

   • 用@media开头注意@符号
   • mediatype 媒体类型
   • 关键字and not only
   • medilfeature媒体特性必须有小括号包含

   1. mediatype查询类型

      将不同的终端设备划分成不同的类型，称为媒体类型
      

   2. 关键字

      关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

      • and:可以将多个媒体特性连接到一起，相当于“且”的意思。
      • not:排除某个媒体类型，相当于“非”的意思，可以省略。
      • only :指定某个特定的媒体类型，可以省略。

   /*这句话的意思就是:在我们屏幕上 并且 最大的宽度是800像素 设置我们想要的样式*/
   /*max-width 小于等于800来/
   
   @media screen and (max-width: 800px)
   {
      body{
         background-color:pink;
      }
   }
   @media screen and (min-width: 500px)
   {
      body{
         background-color:black;
      }
   }
   

3. 媒体查询+rem实现元素动态大小变化

   1. rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸.媒体查询可以根据不同设备宽度来修改样式。媒体查询+rem ，就可以实现不同设备宽度，实现页面元素大小的动态变化

4. 引入资源

   1. 当样式比较繁多的时候，我们可以针对不同的媒体使用不同stylesheets(样式表)。原理，就是直接赶link中判断设备的尺寸，然后引用不同的css文件。
   2. 语法

      <!-- 模板 -->
      <link rel="stylesheet" media="mediatype and| not|only (media feature)" href="mystylesheet.css">
      
      <!-- 例子 -->
      /*当我们屏幕大于等于640px以上的，我们让div一行显示2个*/
      /*当我们屏幕小于640我们让div一行显示一个 */
      <link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
      <link rel="stylesheet" href="style640.css" media="screen and(min-width: 640px)">
      
      

Less基础

1. 维护CSS的弊端

   1. CSS是一门非程序式语言，没有变量、函数、SCOPE(作用域）等概念。
   • CSS 需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的。
   • 不方便维护度扩展，不利于复用。
   • CSS没有很好的计算能力
   • 非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目。

2. Less介绍

   • Less ( Leaner Style Sheets的缩写）是一门CSS扩展语言，也成为CSS预处理器。做为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。它在CSS的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。
   • Less中文网址:http://lesscss.cn/
   • 常见的CSS预处理器: Sass、Less、Stylus

3. Less的使用

   我们首先新建一个后缀名为less的文件，在这个less文件里面书写less语句。

   • Less变量
   • Less编译
   • Less嵌套
   • Less运算

4. Less变量

   1. 变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。
   2. 语法

   @变量名:值;
   

   3. 命名规范
   • 必须有@为前缀
   • 不能包含特殊字符
   • 不能以数字开头
   • 大小写敏感

   <!-- 举例子(less文件) -->
   @color: deeppink;
   body {
      background-color:@color;
   }
   div {
      color:@color;
   }
   
   

5. less编译

   1. 本质上，Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。所以，我们需要把我们的less文件，编译生成为css文件，这样我们的html页面才能使用。

   2. vocode Less 插件★

      Easy LESS插件用来把less文件编译为css文件安装完毕插件，重新加载下vscode。只要保存一下Less文件，会自动生成CSS文件。

6. Less嵌套

   1. 如果遇见（交集|伪类|伪元素选择器)
      • 内层选择器的前面没有&符号，则它被解析为父选择器的后代
      • 如果有&符号，它航被解析为父元素自身或父元素的伪类

<!-- 1. less嵌套子元素的样式直接写到父元素里面就好了 -->
.header {
   width: 200px;
   height: 200px;
   background-color: pink;
   a {
      color: red;
   }
}
.nav {
   .logo {
      color: green;
   }
}
<!-- 2. 如果有伪类、交集选择器、伪元素选择器我们内层选择器的前面需要加&-->

.nav {
   .logo {
      color: green;
   }
   &::before{
      content:"";
   }
}

1. Less运算★

   1. 任何数字、颜色或者变量都可以参与运算。就是Less提供了加( +)、减(-)、乘(*)、除(/)算术运算。

      <!-- 加法 -->
      @border: 5px + 5;
      div {
      <!-- 奖罚和乘法 -->
      width: 200px - 50;
      height: 200px * 2;
      border: @border solid red;
      }
      <!-- 除法 -->
      img {
         width: 82 / 50rem;
         height: 82 / 50rem;
      }
      

   2. 注意
      • 乘号(*)和除号(/)的写法
      • 运算符中间左右有个空格隔开1px + 5
      • 对于两个不同的单位的值之间的运算，运算结果的值取一个值的单位
      • 如果两个值之间只有一个值有单位，则运算结果就取该单位

rem适配方案

• 让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。
• 使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。

1. rem 实际开发适配方案
   1. 按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小;（媒体查询)
   2. CSS中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值
2. rem适配方案技术使用(市场主流)
   1. 技术方案一
      • less
      • 媒体查询
      • rem
   2. 技术方案二（推荐）
      • flexible.js
      • rem
   3. 总结：
      • 两种方案现在都存在
      • 方案二更简单
3. rem实际开发适配方案1
   1. rem+mei媒体查询+less技术
   2. 设计稿常见尺寸宽度
      一般情况下，我们以一套或两套效果图适应大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果现在基本以750为准。
   3. 元素大小取值方法
      • 最后的公式:页面元素的rem值=页面元素倬( px)/（屏幕宽度│划分的份数)
      • 屏幕宽度/划分的份数就是html font-size的犬小
      • 或者:页面元素的rem值=页面元素值( px ) / html font-size字体大小
        rem
   4. 总结：
      • 两种方案现在都存在
      • 方案二更简单
4. rem实际开发适配方案1
   1. rem+mei媒体查询+less技术
   2. 设计稿常见尺寸宽度
      一般情况下，我们以一套或两套效果图适应大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果现在基本以750为准。
   3. 元素大小取值方法
      • 最后的公式:页面元素的rem值=页面元素倬( px)/（屏幕宽度│划分的份数)
      • 屏幕宽度/划分的份数就是html font-size的犬小
      • 或者:页面元素的rem值=页面元素值( px ) / html font-size字体大小