移动Web开发之 响应式布局

目录

响应式开发

响应式开发原理

响应式布局容器

案例：响应式导航

Bootstrap前端开发框架

Bootstrap 简介

Bootstrap 使用

1. 创建文件夹结构

 2. 创建 html 骨架结构

3. 引入相关样式文件

4. 书写内容

 布局容器

Bootstrap 栅格系统

栅格系统简介

栅格选项参数

列嵌套

列偏移

 列排序

响应式工具

---

响应式开发

响应式开发原理

        就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。

响应式布局容器

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

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

平时我们的响应式尺寸划分

• 超小屏幕（手机，小于 768px）：设置宽度为 100%
• 小屏幕（平板，大于等于 768px）：设置宽度为 750px
• 中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
• 大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px

    <style>
        .container {
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }

        /* 1. 超小屏幕下，小于768px，布局容器的宽度为100% */
        @media screen and (max-width:767px) {
            .container {
                width: 100%;
            }
        }

        /* 2. 小屏幕下，大于等于768，布局容器改为750px */
        @media screen and (min-width:768px) {
            .container {
                width: 750px;
            }
        }

        /* 3. 中等屏幕下，大于等于992px，布局容器修改为970px */
        @media screen and (min-width:992px) {
            .container {
                width: 970px;
            }
        }

        /* 4. 大屏幕下，大于等于1200px，布局容器修改为1170px */
        @media screen and (min-width:1200px) {
            .container {
                width: 1170px;
            }
        }
    </style>

案例：响应式导航

① 当我们屏幕大于等于768像素，我们给容器宽度为750px

② container里面包含8个小li 盒子，每个盒子的宽度定为93.75px（750/8）， 高度为 30px，浮动一行显示。

③ 当我们屏幕缩放，宽度小于768像素的时候， 盒子宽度修改为 100% 宽度。

④ 里面的8个小li，宽度修改为 33.33%，这样一行就只能显示3个小li ，剩余下行显示。

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 750px;
            margin: 0 auto;
        }

        .container ul li {
            float: left;
            width: 93.75px;
            height: 30px;
            list-style: none;
            background-color: #008001;
            color: #fff;
            text-align: center;
        }

        @media screen and (max-width:767px) {
            .container {
                width: 100%;
            }

            .container ul li {
                width: 33.3%;
            }
        }
    </style>

---

Bootstrap前端开发框架

Bootstrap 简介

Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS 和 JAVASCRIPT 的，它 简洁灵活， 使得 Web 开发更加快捷。

• 中文官网：http://www.bootcss.com/
• 官网：