移动端页面开发的四种方式笔记(三)

响应式开发

原理：使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同的设备
超小屏幕(手机) <768px
小屏设备(平板) >=768px~<992px
中等屏幕(桌面显示器) >=992px~<1200px
宽屏设备(大桌面显示器) >=1200px

响应式布局容器
响应式需要一个父集作为布局容器，来配合子集元素来实现变化效果。
原理就是在不同屏幕下，通过媒体查询来改变这个容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化

尺寸的划分
超小屏幕(手机) <768px :设置宽度为100%
小屏设备(平板) >=768px~<992px :设置宽度为750px
中等屏幕(桌面显示器) >=992px~<1200px :设置宽度为970px
宽屏设备(大桌面显示器) >=1200px :设置宽度为1170px

Bootstrap使用(只考虑样式)
1、首先创建文件夹结构
2、创建html骨架结构
3、引入相关样式文件
4、书写内容

    "UTF-8">
    
    "viewport" content="width=device-width, initial-scale=1.0">
    
    "X-UA-Compatible" content="ie=edge">
    
      
      
    
    "stylesheet" href="bootstrap/css/bootstrap.min.css">
    "stylesheet" href="css/index.css">
    

布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。

.container 类用于固定宽度并支持响应式布局的容器。不同尺寸的划分见上文
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。（它适合于单独做移动端开发）

栅格系统

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，内容可以放入这些创建好的布局中。

栅格系统分为了12列
行（row）必须放到 .container 布局容器里面
要实现列的划分，需要给列添加类前缀
xs-extra small ：超小
sm-small ：小
md-medium ：中等
lg-large ：大
每一列默认有左右15px的padding
可以同时为一列指定多个类名，以便划分不同份数。例如：class=“col-md-4 col-sm-6”

<div class="container">
        <div class="row">
            <div class="col-lg-6">1div>
            <div class="col-lg-2">2div>
            <div class="col-lg-2">3div>
            <div class="col-lg-2">4div>
        div>
    div>

如果份数相加小于12会有空白
如果大于，多的那一列会在下一行显示

列嵌套

<div class="container">
        <div class="row">
            <div class="col-lg-6">
                <div class="row">
                    <div class="col-lg-6">22div>
                    <div class="col-lg-6">33div>
                div>
            div>
            <div class="col-lg-2">2div>
            <div class="col-lg-2">3div>
            <div class="col-lg-2">4div>
        div>
    div>

列偏移
使用 .col-md-offset- 类可以将列向右偏移
原理是在右侧的盒子的左边加了一个margin值

<div class="container">
        <div class="row">
            <div class="col-md-3">zuodiv>
            
            <div class="col-md-3 col-md-offset-6">youdiv>
        div>
    div>

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

<div class="container">
    <div class="row">
        <div class="row">
            <div class="col-md-9 col-md-push-3">右推div>
            <div class="col-md-3 col-md-pull-9">左拉div>
        div>
    div>
div>

响应式工具
利用媒体查询，并使用这些工具类能方便的针对不同设备显示或隐藏
.hidden-xs 超小屏下隐藏
.hidden-sm 小屏下隐藏
.hidden-md 中屏下隐藏
.hidden-lg 大屏下隐藏
与之相反的是visible-xs等等，代表的是显示