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

最新推荐文章于 2024-07-22 14:52:02 发布

不务正业的前端学徒

最新推荐文章于 2024-07-22 14:52:02 发布

阅读量571

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_45522704/article/details/104794734

版权

响应式开发

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

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

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

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

<head>
    <meta charset="UTF-8">
    <!--视口设置-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--要求当前页面使用IE浏览器最高版本的内核来渲染-->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--[if lt IE 9]>
    <!--解决IE9以下浏览器的不兼容问题-->
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
    <title>Document</title>
</head>

布局容器
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">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-2">4</div>
        </div>
    </div>

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

列嵌套

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

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

<div class="container">
        <div class="row">
            <div class="col-md-3">zuo</div>
            <!-- 偏移的份数是12-3-3=6 -->
            <div class="col-md-3 col-md-offset-6">you</div>
        </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>