【CSS】关于CSS的几种移动端布局方式

一、移动端布局

01.meta视口标签设置

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

initial-scale 初识缩放比

user-scalable 用户缩放

maximum-scale 最大缩放比

minimum-scale 最小缩放比

02.移动布局的分类有哪些？

• 流式布局（百分比布局）
• 弹性布局（flex）
• less+rem+媒体查询布局
• 响应式布局

03.为什么需要二倍图？

（1）物理像素和物理像素比

• 物理像素：即分辨率，屏幕显示的最小单位

  PC端1个px就是一个物理像素，一一对应的关系

• 但在移动端1个px不是一个物理像素，不是对应关系

  中间存在一个转换比，即物理像素比

  这是因为移动端的物理像素进行了压缩，分辨率变高

（2）二倍图（根据需要确定多倍图）

如果在移动端直接插入原图，那么由于物理像素比，图片也会被放大，会变模糊，

因此这里需要，先准备原图两倍大小的图片（这里的两倍是指物理像素比，不一定是两倍的），然后手动缩小为一半，那么在移动端显示的时候会放大为两倍，这次放大因为原图先缩小了两倍，那么在放大时即恢复原图大小，就不会变模糊

（3）背景二倍图

用background-size设置图片大小
特别注意精灵图的二倍图转换

04.样式初始化

引入样式：初始化CSS文件

---

二、流式布局

01.什么是流式布局？

• 流式布局

  • 也称百分比布局，非固定像素布局

  • 宽度用百分比自适应，高度用像素值固定

  • 搭配最大、最小宽度

    min-width，max-width

02.为什么需要流式布局

• 浏览器、屏幕尺寸、分辨率不一致

03.流式布局有什么缺陷？

• 并非所有元素都是自适应的（高度、图片、文字大小等都是固定的）

仿京东首页

---

三、初识flex布局

01.几个概念

• flex布局

  即弹性盒子布局，是给父元素添加flex属性，以控制子元素的位置和排列

• 主轴和侧轴

  主轴：即沿着flex元素排列方向所在的轴

  侧轴：垂直于flex元素排列方向的轴

02.几个属性

（1）父元素的属性

设置再父元素中，控制的是子元素的排列

• 1.flex-direction:设置主轴方向，设置了其中一个为主轴，则另一个为侧轴

  属性值	描述
  row	水平排列，沿着X轴方向从左到右排列，默认值,
  column	垂直排列，沿着Y轴方向从上到下排列
  row-reverse	水平排列，沿着X轴方向从右到左排列
  column-reverse	垂直排列，沿着Y轴方向从下到上排列

• 2.justify-content：设置在主轴方向上的子元素的排列方式

  属性值	描述
  flex-start	沿主轴方向从左到右（从上到下）排列，默认值
  flex-end	从主轴方向从右到左（从下到上）排列
  center	居中对齐
  space-around	平均分配剩余空间
  space-between	两端贴边，中间仔平均分配剩余空间

  水平方向：

  垂直方向：

• 3.flex-wrap：设置子元素是否换行

  属性值	描述
  nowrap	不换行，默认值，缩放父元素，同时也会缩放子元素
  wrap	设置换行

• 4.align-items：设置在侧轴方向上的单行子元素的排列方式————仅适用于单行

  属性值	描述
  flex-start	从头开始
  flex-end	从后开始
  center	在侧轴上居中对齐
  stretch	拉伸（默认值）

  水平方向：

  垂直方向：

• 5.align-content：设置在侧轴方向上的多行子元素的排列方式——————适用于多行

  这个属性只有在设置了换行的情况下才使用，且在单行情况下是没有效果的

  即需要搭配flex-wrap:wrap;

  属性值	描述
  flex-start
  flex-end
  center
  space-around
  space-between
  stretch

  水平方向：

  垂直方向：

• 6.flex-flow：复合属性，同时设置主轴方向和是否换行

---

• 语法：

.father {
     
    /* 首先要给父元素添加flex */
    display: flex;
    
    width: 100%;
    height: 200px;

    /* 父元素中常见的六种属性 */
    /* 1.设置主轴方向 */
    flex-direction: row;

    /* 2.设置在主轴方向上的子元素的排列方式 */
    justify-content: center;
    
    /* 3.设置子元素是否换行 */
    flex-wrap: nowrap;
    
    /* 4.设置在侧轴方向上的单行子元素的排列方式————仅适用于单行 */
    align-items: center;
    
    /* 5.设置在侧轴方向上的多行子元素的排列方式——————适用于多行 */
    align-content: center;
    
    /* 6.复合属性，同时设置主轴方向和是否换行 */
    /* flex-flow: row nowrap; */
}

---

（2）子元素的属性

属性值	描述
flex	设置子项元素对剩余空间的分配，每一个子元素项都可单独设置，将所有子元素占的份数加起来，即为占父元素的比例
align-self	单独设置子项自己在侧轴上的排列方式，包括flex-start;flex-end;center;stretch;baseline;
order	order控制子项的排列顺序，越小越靠前,默认值为0

• 语法：

.son{
     
     /* 子元素上的属性 */

    /* 1.设置元素对剩余空间的分配份数 */
    /* 即，将所有子元素占的分数加起来，然后占父元素宽度的几分之几 */
    flex: 1;

    /* 2.设置子项自己在侧轴上的排列方式 */
    align-self: center;

    /* 3.order控制子项的排列顺序，越小越靠前，默认为0 */
    order: inherit;
}

仿携程首页小案例

---

四、关于rem

01.解决问题：

​ 如何让高度也自适应 ？

02.相关概念

• em——是相对于父元素的字体大小进行的单位设置，浏览器默认（1em=16px)

• rem——即root em，是相对于HTML元素（根）的字体大小进行的单位设置

03.优点

• 每个页面只有1个html标签，可以通过修改HTML中文字大小font-size来改变页面中元素的大小，进行整体控制

• 文字大小随屏幕大小变化

• 高度自适应

• 高度、宽度等比例缩放

04.rem适配

• 是为了让一些不能等比自适应的元素，在设备尺寸改变时，等比例适配当前设备

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

• 用less动态计算并设置html根标签的字体大小

• 将设计稿中的元素宽、高、位置，按照同等比例换算为rem为单位的值

方法：

• 首先要有一套标准的屏幕尺寸，比如width:750px

• 然后要设置html标签里的文字大小：font-size

  在这里要先划分屏幕的份数，比如划分为15份（其它值也可以），再用屏幕尺寸除以份数，这里是 750/15=50px;

  那么这里html标签里的文字大小为：font-size:50px;

  那么整个页面中的元素尺寸有这样一个换算关系：1rem = 50px

• 最后，在页面中的元素的单位都需要换算成rem单位的，其rem值 = 元素本身尺寸(px)/根标签字体大小，如：100x100px的图片尺寸就设置为：2x2rem；

五、关于媒体查询

01.媒体查询——media query

• 媒体查询可以针对不同的屏幕尺寸设置不同的样式

02.怎么定义

• 如何声明一个媒体查询？

  @media 媒体类型 关键字 媒体特性

  • 媒体类型：all | print | screen

  • 关键字：and | not | only

  • 媒体特性：width | max-width | min-width

    【注意】CSS中的 max-width 和 min-width 都包含 “等于”

  @media screen and (max-width: 800px) {
         
      body {
         
          background-color: #f00;
      }
  }
  
  @media screen and (min-width: 801px) {
         
      body {
         
          background-color: #f0f;
      }
  }
  
  p {
         
      font-size: 1rem;
  }
  
  /* 	
  	以上样式：
  		在屏幕上 并且 最大宽度是800px 时，设置一种样式
  					最小宽度是801px时，改变为另一种样式 
  */
  /* 即，根据不同的屏幕尺寸，改变为不同的样式 */
  

03.如何引入资源

在link中引入

---

六、初识less语法

01.less简介

• less：一门CSS扩展语言，也称为CSS预处理器，引入了变量、运算、函数等功能

02.less变量

• 以@为前缀

• 不能包含特殊字符

• 不能数字开头

• 区分大小写

• 语法：

  @color:red;
  
  div {
      color:@color;
  }
  

03.less编译

借助插件

04.less嵌套

• 语法

  .father{
      width: 100px;
      height: 100px;
      background-color: red;
      
      .son {
          width: 50px;
          height: 50px;
          background-color: blue;
      }
  }
  
  

• 交集 | 伪类 | 伪元素选择器

  • 内层选择器的前面没有添加**&符号**，则会被解析为外层选择器的后代
  • 如果有**&符号**，则被解析为伪类

  .father{
      width: 100px;
      height: 100px;
      background-color: orange;
      
      &:hover{
          width: 200px;
      }
  }
  

05.less运算

• less中，任何数字、颜色、变量都可以参加运算，提供 加(+)、减(-)、乘(*)、除(/) 四则运算方式

• 运算符左右两侧有空格

• 两个不同单位的值运算，以第一个值的单位为主

• 只有一个值有单位，以该单位为主

  div {
      width:100px - 2;
      height:(100px + 30) * 2;
      background-color: #666 - #333;
  }
  

---

七、响应式布局

（未完待续~~~）