响应式布局以及提交网站_蓝湖移动端宽度-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_47896523/article/details/128926132

1.慕客协作平台

1. /摹客官网地址： https://www.mockplus.cn/ 注册一个账号

2. 下载moke ps插件

3. PS 安装/摹客/蓝湖插件

3. 打开PS/摹客/蓝湖插件

4. 上传（需要切图，需要先标注切图）

5. 查看项目

6. 邀请成员进入（分享按钮，链接地址）

2.利用git提交网站到码云

3.利用web开发响应式布局

响应式需要一个父级作为布局容器，来配合自己元素实现变化效果

在不同屏幕下，通过媒体查询来改变布局容器的大小，再改变子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化

3.1响应式尺寸划分container类

超小屏幕（小于768px）：设置宽度为100%

小屏幕（大于等于768px）:设置宽度为750px

中等屏幕（大于等于992px）：宽度设置为970px

大屏幕（大于等于1200px）：宽度设置为1170px

3.2 container-fluid类

流式布局容器百分百宽度

占据全部视口(viewport)的容器

适合于单独做移动端开发

4.Bootstrap前端开发框架

http://www.bootcss.com/

它有一套比较完整那个的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发

标准化的html+css规范

提供了一套简洁、直观、强悍的组件

有自己的生态圈，不断的更新迭代

提高了开发效率

<!-- 要求当前网页使用IE浏览器最高版本的内核来渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

4.1Bootstrap栅格系统

将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局

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

Bootstrap里面container宽度是固定的，但是不同屏幕下，container的宽度不同

	超小屏幕<768px	小屏设备>=768px	中等屏幕>=992px	宽屏设备>=1200px
.container	自动(100%)	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列(coloum)数	12

行必须放到container布局容器里面

列的平均划分需要给列添加类前缀

xs-extra small:超小；sm-small：小；md-medium:中等;lg-large:大

列大于12，多余的列所在的元素将被作为一个整体另起一行排列

每一列默认有左右15像素的padding

可以为同一列指定多个设备的类名

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 解决IE9以下浏览器对html5新增标签的不识别 -->
    <!-- 解决IE9以下浏览器对css3 Media的不识别 -->
    <!--[if lt IE 9]>
    <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]-->
    <!-- 引入bootstrap 样式文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- 引入我们自己的首页样式文件 -->
    <link rel="stylesheet" href="css/index.css">
    <title>Document</title>
    <style>
        [class^="col"] {
            border: 1px solid #ccc;
        }

        .row:nth-child(1) {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
        </div>
        <!-- 如果孩子的份数相加等于12，则孩子能占满整个的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>
        <!-- 如果孩子的份数相加 小于 12 则会？ 则占不满整个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-1">4</div>
        </div>
        <!-- 如果孩子的份数相加 大于 12 则会？多于的那一列会 另起一行显示  -->
        <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-3">4</div>
        </div>
    </div>
</body>

4.2列嵌套

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <!-- 我们列嵌套最好加1个行 row 这样可以取消父元素的padding值 而且高度自动和父级一样高 -->
                <div class="row">
                    <div class="col-md-4">a</div>
                    <div class="col-md-8">b</div>
                </div>
            </div>
            <div class="col-md-4">2</div>
            <div class="col-md-4">3</div>
        </div>
    </div>
</body>

4.3列偏移

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-3">左侧</div>
            <!-- 偏移的份数 就是 12 - 两个盒子的份数 = 6 -->
            <div class="col-md-3 col-md-offset-6">右侧</div>
        </div>
        <div class="row">
            <!-- 如果只有一个盒子 那么就偏移 = (12 - 8) /2 -->
            <div class="col-md-8 col-md-offset-2">中间盒子</div>
        </div>

    </div>
</body>

4.4列排序

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-push-8">左侧</div>
            <div class="col-md-8 col-md-pull-4">右侧</div>
        </div>
    </div>
</body>

4.5响应式工具

类名	超小屏	小屏	中屏	大屏
.hidden-xs	隐藏	可见	可见	可见
.hidden-sm	可见	隐藏	可见	可见
.hidden-md	可见	可见	隐藏	可见
.hidden-lg	可见	可见	可见	隐藏

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--[if lt IE 9]>
      <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]-->
    <!-- 一定不要忘记引入bootstrap 的样式文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        .row div {
            height: 300px;
            background-color: purple;
        }
        
        .row div:nth-child(3) {
            background-color: pink;
        }
        
        span {
            font-size: 50px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-3">
                <span class="visible-lg">我会显示哦</span>
            </div>
            <div class="col-xs-3">2</div>
            <div class="col-xs-3 hidden-md hidden-xs">我会变魔术哦</div>
            <div class="col-xs-3">4</div>
        </div>

    </div>
</body>