移动端布局介绍

布满荆棘的人生 2021-09-07 06:16 505阅读 0赞

### 移动端布局 ###

*  一、流式布局
 *  二、flex弹性布局
 *  三、less+rem+媒体查询布局
 *  四、媒体查询
 *   *  1.语法
     *  2.媒体类型
     *  3.关键字
     *  4.例子
     *  5.根据不同的屏幕引入不同的css资源
 *  五、响应式布局
 *  六、Bootstrap
 *   *  1.布局容器
     *  2.栅格系统
     *  3.栅格参数
     *  4.列偏移
     *  5.列排序
     *  6. 响应式工具

# 一、流式布局 #

流式布局又叫百分比布局，也叫非固定像素布局。  
通过盒子的宽度设置成百分比来根据手机屏幕的宽度进行伸缩，不受固定像素的影响，内容向两侧填充。  
为了保护盒子不会无限放大和缩小  
需要限制盒子的最大和最小  
min-width:320px  
max-width:980px  
最大980px  
最新320px

# 二、flex弹性布局 #

# 三、less+rem+媒体查询布局 #

rem可以使文字随屏幕大小的变化而变化。

流式布局和flex布局主要是针对宽度的，高度只能适应。  
rem可以使屏幕发生变化时，元素随屏幕变化而变化。

1.rem单位  
rem(root em)是一个相对单位，是相对于根元素html的字体大小来设置的。

比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。

/* 根html 为 12px */
    html { 
    font-size: 12px;
    }
    /* 此时 div 的字体大小就是 24px */
    div { 
    font-size: 2rem;
    }

rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。  
为了获得根元素字体的大小，需要一个方法来获取。  
即媒体查询

# 四、媒体查询 #

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

## 1.语法 ##

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

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

## 2.媒体类型 ##

all 用于所有设备  
print 用于打印机和打印预览  
scree 用于电脑屏幕和手机屏幕

## 3.关键字 ##

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

4.媒体特效  
width  
minwidth 表示小于这个尺寸就不会触发来。  
maxwdth 表示超出这个尺寸就不会触发来

## 4.例子 ##

@media scree and (max-width:800px){ 
        body{ 
       background-color :pink
    }
    }
    /*表示屏幕宽度小于等于800px,屏幕就变成粉色*/
    
    @media scree and (min-width:500px){ 
        body{ 
       background-color :pink
    }
    }
    /*表示屏幕宽度大于等于500px,屏幕就变成粉色*/
    
    @media scree and (min-width:500px)and(max-width:800px){ 
        body{ 
       background-color :pink
    }
    }
    /*表示大于500且小于800px时才会触发。*/
    
    /*写的时候从小到大开始查询。*/

这样可以用rem配合媒体查询来根据屏幕获取根元素字体大小来改变页面大小了。

## 5.根据不同的屏幕引入不同的css资源 ##

/*语法*/
    <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
    
    /*例子*/
    <link rel="stylesheet" href="styleA.css" media="screen and (min-width: 400px)">

# 五、响应式布局 #

一套页面适应pc端和手机端  
超小屏幕 <768px  
平 板 768<x<992px  
显示器 992<x<1200px  
大屏 >=1200px

设置时稍微小于屏幕分辨率。比较好看。居中对齐，两侧有空白。

配合bootstrap

# 六、Bootstrap #

为了兼容可以写

<meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

## 1.布局容器 ##

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器，它提供了两个作此用处的类。

container 类  
响应式布局的容器 固定宽度  
大屏 ( >=1200px) 宽度定为 1170px  
中屏 ( >=992px) 宽度定为 970px  
小屏 ( >=768px) 宽度定为 750px  
超小屏 (100%)

container-fluid 类  
流式布局容器 百分百宽度  
占据全部视口（viewport）的容器。  
适合移动端开发。

## 2.栅格系统 ##

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，  
系统会自动分为最多12列。

## 3.栅格参数 ##

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，  
系统会自动分为最多12列。

col-xs- 在<768px占的比例  
col-sm- 在>=768px,<970占的比例  
col-md- 在>=992px，<1200px占的比例  
col-lg 在>=1200px下占的比例。

嵌套的布局，子盒子也要写row和col和父盒子布局一样，才不会有一个内边距。

## 4.列偏移 ##

使用 .col-md-offset-\* 类可以将列向右侧偏移。这些类实际是通过使用 \* 选择器为当前元素增加了左侧的边距（margin）

div class="row">
    <div class="col-lg-4">1</div>
    <div class="col-lg-4 col-lg-offset-4">2</div>
    </div>

## 5.列排序 ##

通过使用 .col-md-push-\* 和 .col-md-pull-\* 类就可以很容易的改变列（column）的顺序

## 6. 响应式工具 ##

<table> 
 <thead> 
  <tr> 
   <th>类名</th> 
   <th>超小屏</th> 
   <th>小屏</th> 
   <th>中屏</th> 
   <th>大屏</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>.hidden-xs</td> 
   <td>隐藏</td> 
   <td>可见</td> 
   <td>可见</td> 
   <td>可见</td> 
  </tr> 
  <tr> 
   <td>.hidden-sm</td> 
   <td>可见</td> 
   <td>隐藏</td> 
   <td>可见</td> 
   <td>可见</td> 
  </tr> 
  <tr> 
   <td>.hidden-md</td> 
   <td>可见</td> 
   <td>可见</td> 
   <td>隐藏</td> 
   <td>可见</td> 
  </tr> 
  <tr> 
   <td>.hidden-lg</td> 
   <td>可见</td> 
   <td>可见</td> 
   <td>可见</td> 
   <td>隐藏</td> 
  </tr> 
 </tbody> 
</table>