# responsive-box

> a responsive framework for css

Latest version **0.0.4** (published 2019-09-03) · ISC license · 0 weekly downloads

## Install

```sh
npm install responsive-box
pnpm add responsive-box
yarn add responsive-box
bun add responsive-box
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2019-09-03 |
| First published | 2019-09-03 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 49.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | atlantis |
| Maintainers | xianfeng |
| Keywords | responsive-box, responsive |

## Links

- npm: https://www.npmjs.com/package/responsive-box
- npm.io page: https://npm.io/package/responsive-box

## Dependencies (3)

- [gulp](https://npm.io/package/gulp.md) ^4.0.2
- [gulp-sass](https://npm.io/package/gulp-sass.md) ^4.0.2
- [gulp-rename](https://npm.io/package/gulp-rename.md) ^1.4.0

## Recent versions

- 0.0.4 (latest) — 2019-09-03
- 0.0.3 — 2019-09-03
- 0.0.2 — 2019-09-03
- 0.0.1 — 2019-09-03

## README

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

## 变量

### $normalize
设置是否引入一致性样式处理，默认引入
```scss
$normalize:false;
```

### $rem-baseline
设置rem布局基础单位，默认为37.5px
```scss
$rem-baseline: 37.5px;
```

### $grid-breakpoints
设置各个终端的屏幕界限
```scss
$grid-breakpoints: (
  xs: 0, //xs ~ sm 移动端
  sm: 992px, // sm ~ lg 小屏幕
  lg: 1200px,
)
```

### $container-max-widths
设置各个终端的内容宽度
```scss
$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中代码

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

```

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

---
_Source: https://npm.io/package/responsive-box · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._