Skip to content

Latest commit

 

History

History
104 lines (81 loc) · 2.95 KB

18 响应式布局.md

File metadata and controls

104 lines (81 loc) · 2.95 KB

响应式布局

PaddyWang

响应式布局即一个页面可以兼容多种终端设备

说白了就是页面随着屏幕尺寸的改变来自适应

  • 移动Web开发与响应式布局比较：

    • 域名以 m. 开头
    • 移动Web开发只适配于移动设备
    • 一般采用百分比布局
    • 一般是在已有PC端页面的基础上扩充
    • 多采用通栏
    • 较响应式布局来说开发成本低

  • 屏幕尺寸

    尺寸 设备
    < 768px 超小屏幕
    768px — 992px 小屏幕
    992px — 1200px 中等屏幕
    > 1200px 宽屏幕

  • 响应式布局原理

    Media Query（媒介查询）
    .container {
        width: 100%;
        height: 300px;
        background-color: pink;         
    }
// 指定它用来查询屏幕
@media screen and (min-width: 768px) {
    .container {
        background-color: red;
    }
}
@media screen and (min-width: 992px) {
    .container {
        background-color: blue;
    }
}
@media screen and (min-width: 1200px) {
    .container {
        background-color: green;
    }
}

    • 显示效果：

      < 768px        显示为 pink
768px - 992px  显示为 red
992px - 1200px 显示为 blue
> 1200px       显示为 green

Bootstrap常用样式

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架

用于开发响应式布局、移动设备优先的 Web 项目

  • container类
    • 用于定义一个固定宽度且居中的版心
  <div class="container">
    <!--
      此处的代码会显示在一个固定宽度且居中的容器中
      该容器的宽度会跟随屏幕的变化而变化
    -->
  </div>

  • 栅栏系统

    • Bootstrap中定义了一套响应式的网格系统
    • 其使用方式就是将一个容器划分成12等份
    • 然后通过col-xx-xx的类名控制每一列的比例

  • row类

    • “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中
    • 通过“行（row）”在水平方向创建一组“列（column）”
    • row类的一个作用就是通过左右margin:0 -15px;屏蔽掉container类的padding
<div class="container">
  <div class="row"></div>
</div>
  • col-xx-xx类
    • col-md-offset-[偏移列数] 类（列偏移）
列数 显示屏幕尺寸 -
col-xs-[列数]： 自适应 在超小屏幕下及以上展示几份
col-sm-[列数]： > = 768 在小屏幕下及以上展示几份
col-md-[列数]： > = 992 在中等屏幕下及以上展示几份
col-lg-[列数]： > = 1200 在大屏幕下及以上展示几份

Bootstrap中国官网：http://www.bootcss.com/