前端学习之移动端常见布局

苏稚
113 阅读11分钟

移动端常见布局

（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项目
    • 子容器可以横向排列也可以纵向排列

image-70.png

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

常见父项属性

  1. 属性
  • flex-direction :设置主轴的方向
  • justify-content:设置主轴上的子元素排列方式flex-wrap∶设置子元素是否换行
  • align-content:设置侧轴上的子元素的排列方式(多行)
  • align-items :设置侧轴上的子元素排列方式(单行)
  • flex-flow :复合属性，相当于同时设置了flex-direction和flex-wrap
  1. flex-direction设置主轴的方向★
    1. 主轴与侧轴：在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有∶行和列、x轴和y轴
    • 默认主轴方向就是x轴方向，水平向右
    • 默认侧轴方向就是y轴方向，水平向下
    1. 属性值
    • flex-direction属性决定主轴的方向(即项目的排列方向)
    • 注意∶主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

image-68.png

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

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

image-69.png

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

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

    2. 语法 flex-wrap:nowrap; flex-wrap:wrap;

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

    1. 该属性是控制子项在侧轴（默认是y轴）上的排列方式在子项为单项的时候使用
    2. 语法 align-items:flex-start; align-items:flex-end; align-items:center; align-items:stretch;

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

  4. 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查询类型

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

image-71.png 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中文网址: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字体大小
avatar
文章
阅读
粉丝