Html学习5-2_移动端布局

移动端布局

一、移动端布局介绍

很容易理解，在PC端的浏览器看到的布局，放到手机浏览器中会出现无法适应大小的情况，操作很麻烦，移动端布局就是为了解决这个问题，在此之前需要理解几个概念

1. viewport 视口

   1. 视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。

   2. 移动端引入了布局视口、视觉视口和理想视口三个概念，使得移动端中的视口与浏览器宽度不再相关联。

   3. 视口设置

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

      • width=device-width：改变HTML默认的980px 为 屏幕的宽度；
      • user-scalable: 是否允许用户缩放屏幕 值：no(0不允许) yes(1允许)；
      • initial-scale：初始化缩放比例；1.0：不缩放；
      • maximum-scale：用户对页面的最大缩放比例；值：比例
      • minimum-scale：用户对页面的最小缩放比例；值：比例

2. 二倍图

   1. 用意就是避免图片失真
   2. 在其上还有可以有三倍图
   3. 如果通过css设置图片样式高宽都为i，在PC端可能显示正常，但同样的设置放到移动端或者高密度桌面显示屏就会模糊，因为像素比提高了，原来用一倍的放大镜去看图片是正常的，但现在用二倍或者三倍的放大镜去看就是模糊的，这个时候就可以用2x甚至3x的图片来渲染，再用2背的放大镜去观察图片就不会出现（相对的）失真。

3. 常见的移动端布局

   1. 单独制作移动端页面
      • 流式布局（百分比布局）
      • flex弹性布局
      • less+rem+媒体查询布局
      • 混合布局
   2. 响应式页面兼容移动端
      • 媒体查询
      • bootstrap

二、flex布局

参考 阮一峰的博客

2.1 介绍

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不易实现。

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

.box {
    
    
	display: flax;
}

.boxinlene{
    
    
	/* 行内元素 */
	display: inline-flex;
}

如果是Webkit内核的浏览器，必须加上 -webkit 前缀

.box{
    
    
	display: -webkit-flex; /* Safari */
	display: flex;
}

需要注意的是， 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

flex的使用思想和传统的盒子模型不一样，没有子元素和块级元素、行内元素的概念，flex通过行和列的思想来控制布局

2.2 基本概念

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

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

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

2.3 容器属性

总共有6种属性：flex-direction，flex-wrap，flex-flow，justify-content，align-items，align-content

2.3.1 flex-direction 属性

作用是确认主轴的选择（也就是排列的方向）， 把主轴确认，元素默认按照确认的主轴方向进行排布

.box {
    
    
	flex-direction: row | row-reverse | column | column-reverse;
}

• row（默认值）：水平方向，左至右
• row-reverse：水平方向，右至左
• column：垂直方向，上至下
• column-reverse：垂直方向，下至上

2.3.2 flex-wrap 属性

默认情况下，项目都排在一条轴线上。flex-wrap属性定义，如果一条轴线排不下，应该如何换行。

.box {
    
    
    flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap（默认值）：不换行
• wrap：换行到下一行
• wrap-reverse：换行到前一行

2.3.3 flex-flow 属性

flex-flow 属性是 flex-direction 属性和 flex-wrap属性的简写形式，默认值为 row nowrap。

.box {
    
    
	flex-flow: <flex-direction> || <flex-wrap>;
}

2.3.4 justify-content 属性

justify-content 属性定义项目在主轴上的对齐方式。

.box {
    
    
	justify-content: flex-start | flex-end | center | space-between | space-around;
}

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目会与边框的间隔大一倍。

2.3.5 align-items 属性

align-items属性定义项目在交叉轴上如何对齐。

.box {
    
    
    align-items: flex-start | flex-end | center | baseline | stretch;
}

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

2.3.6 align-content 属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {
    
    
	align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch（默认值）：轴线占满整个交叉轴。

2.4 项目属性

order，flex-grow，flex-shrink，flex-basis，flex，align-self

1. order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

   .item {
         
         
     order: <integer>;
   }
   

2. flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

   .item {
         
         
     flex-grow: <number>; 
   }
   

   如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

3. flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

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

   如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

4. flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

5. align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

   .item {
         
         
     align-self: auto | flex-start | flex-end | center | baseline | stretch;
   }