移动Web---移动端相关知识，百分比布局，Flex布局

移动端基础知识

屏幕尺寸

屏幕尺寸： 指的是屏幕对角线的长度，一般用英寸来度量。

屏幕尺寸样例

分辨率

Ø物理分辨率是生产屏幕时就固定的，它是不可被改变的

物理分辨率

Ø 逻辑分辨率是由软件（驱动）决定的，可以经过软件设置改变分辨率的比例大小

逻辑分辨率

我们平时制作网页时参考的就是逻辑分辨率，以下是部分移动端主流设备分辨率的比例关系：

部分移动端主流设备分辨率比例关系

视口

    视口：显示HTML网页的区域，用来约束HTML尺寸。
    由于默认情况下，网页的宽度和逻辑分辨率是不同的(默认网页宽度是980px),可以使用meta标签设置视口宽度，制作适配不同设备宽度的网页。

meta标签设置视口

viewport：视口
width=device-width：视口宽度 = 设备宽度
initial-scale=1.0：缩放1倍（不缩放）

二倍图

    当设备像素比很大时，图片会被放大，而放大会让图片看起来模糊。为此，我们可以使用二倍图的方式来提高图片的清晰度。接下来就来讲解二倍图的概念和使用方法。
    在实际开发中，当一个50 ×50像素（CSS像素）的图片直接放到iPhone 6/7/8设备中显示时，图片会被放大，变成原来的两倍（iPhone 6/7/8的设备像素比为2），即100 ×100。为了避免图片放大后模糊，我们可以预先制作一张100 ×100的图片，然后在网页中手动设置这个图片的样式，将图片的宽和高都设为50像素。这样，这张图片就会以它原本的像素（100 ×100）来显示，保证了图片的原有清晰度。
    设计稿参考iPhone6/7/8，设备宽度375px产出设计稿。
    二倍图设计稿尺寸：750px
使用PxCook打开750px的设计稿，设置以二倍图模式显示尺寸。

PxCook二倍图设置

百分比布局

百分比布局， 也叫流式布局
效果： 宽度自适应，高度固定。

五个盒子均分大盒子的总宽度（各20%）

Flex布局

    使用Flex布局模型灵活能够快速的开发网页。

常用布局

    在一般的网页布局中，让多个盒子横向排列都会使用浮动属性来操作，margin属性来调整间距，但经常需要的一点就是需要注意浮动盒子的脱标问题。

Flex布局/弹性布局：

    Ø 是一种浏览器提倡的布局模型
    Ø 布局网页更简单、灵活
    Ø 避免浮动脱标的问题

作用：
    Ø 基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
    Ø Flex布局非常适合结构化布局

设置方式：
    Ø >>>> 父元素添加 display: flex，子元素可以自动的挤压或拉伸

组成部分：
    Ø 弹性容器
    Ø 弹性盒子
    Ø 主轴
    Ø 侧轴 / 交叉轴

flex布局组成部分

  
  
  
  



  

    
1
    
2
    
3
    
4
    
5
  

主轴对齐方式

    使用justify-content属性可以调节元素在主轴的对齐方式
Ø 在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距。

justify-content属性值

  
    
    
    
    
  

  
    

      
1
      
2
      
3
      
4
      
5
    
  

侧轴对齐方式

    使用align-items属性可以调节元素在侧轴的对齐方式
修改侧轴对齐方式的属性:
Ø align-items（添加到弹性容器）
Ø align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

align-items属性

  
    
    
    
    
  

  
    

      
1
      
2
      
航哥哥
      
4
      
5
    
  

伸缩比

    使用flex属性可以修改弹性盒子伸缩比(添加在弹性盒子中)
属性:
    Ø flex : 值;
取值分类:
    Ø 数值(整数)

  
    
    
    
    
  

  
    

      
张三
      
李四
      
王五
    
  

居中方式

常用定位盒子水平垂直居中方式是，设置子绝父相后，先水平方向和垂直方向移动父元素的50%大小距离，再减去盒子本身大小的一半。

flex布局是通过设置在设置了display：flex;的父盒子中设置justify-content: center;和align-items: center;来实现水平垂直居中的。

真正可贵的是那些热爱生命却勇往直前的人！