responsive-box v0.0.4

概要

该框架将移动端rem布局和pc端rem布局有机结合起来，使得pc端和移动端两端各自呈现最佳效果。

变量

$normalize

设置是否引入一致性样式处理，默认引入

$normalize:false;

$rem-baseline

设置rem布局基础单位，默认为37.5px

$rem-baseline: 37.5px;

$grid-breakpoints

设置各个终端的屏幕界限

$grid-breakpoints: (
  xs: 0, //xs ~ sm 移动端
  sm: 992px, // sm ~ lg 小屏幕
  lg: 1200px,
)

$container-max-widths

设置各个终端的内容宽度

$container-max-widths: (
  sm: 960px, //小屏幕
  lg: 1140px //大屏幕
)

样式css

默认分成12等分栅格布局，栅格之间没有间隔，采用flex布局方式排列

container

container会根据客户端容器来设置内容宽度，移动端为100%，pc终端会根据屏幕分辨率设置内容宽度，具体见col部分

container-full

内容宽度为100%，具体见col部分

row

定义子内容非flex布局，具体见col部分

col

   <div class="container"> //容器，会根据客户端屏幕宽度进行适配
    <div class="row"> //定义flex布局方式
      <div class="col">每列采用弹性布局，所有终端自动伸展均分</div>
      <div class="col">这是第二列</div>
      <div class="col">这是第三列</div>
    </div>
  </div>

col-{infix}

定义某个终端弹性布局自动伸展 infix代表终端标识，xs：移动端，sm: 小屏幕，lg：大屏幕

col-{num}

  <div class="container">
    <div>通用三端栅格方案方案</div>
    <div class="row">
      <div class="col-2">只占用2/12的宽度</div>
      <div class="col-2">这是第二列</div>
      <div class="col-2">这是第三列</div>
    </div>
  </div>

col-{infix}-{num}

col为默认方式，应该放到class最前面，会应用于所有终端，并弹性布局自动伸展， 其他class根据终端宽度由小到大设置

  <div class="container">
    <div class="row">
      <div class="col-auto">自身宽度根据内容宽度而定</div>
      <div class="col col-sm-5 col-lg-2">类名根据终端由小到大</div>
      <div class="col">这是第三列</div>
    </div>
  </div>

col-auto

根据内容宽度而撑开

offset-{num}

offset-{infix}-{num}

text-{align}

  <div class="text-left">所有终端居左显示</div>
  <div class="text-center">所有终端居中显示</div>
  <div class="text-right">所有终端居右显示</div>

text-{infix}-{num}

根据终端设置文字排版

.xs-only

  <div class="xs-only">该dom只在移动端显示</div>

.pc-only

  <div class="pc-only">该dom只在非移动端显示</div>

mixin

xs-only

只在h5端作用的样式

  @include xs-only(){
    .name{
      color: red;
    }
  }

xs-only

只在pc端作用的样式

  @include pc-only(){
    .name{
      color: red;
    }
  }

移动端rem布局解决方案

基础例子

在兼容移动端和pc端的时候，可以对两端分别写样式 如果要达到这种双端不同布局模式，需要在html页面加入rem.js中代码

.demo {
  height: 100px;
  @include rem(height, 120px);
}

.demo{
  height: 100px;
}
@media(max-width: 991.98px){
  .demo{
    height: 0.64865rem;
  }
}