# responsive

**Repository Path**: cenqingpeng/responsive

## Basic Information

- **Project Name**: responsive
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-01-07
- **Last Updated**: 2021-01-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 响应式页面布局
- 参考boostrap栅格，使用  **_scss_**  预编译语言写  **栅格布局**  样式，如下：

```
/* 超小屏幕 < 768px */
@media (max-width: $screen-xs-max) {
  .container {
    width: $screen-xs-width;
  }
  @for $i from 1 through $blocks {
    .col-xs-#{$i} {
      width: 100 / $blocks * 1% * $i;
    }
  }
}
/* 小屏幕 < 992px */
@media (min-width: $screen-sm-min) {
  ...
}
/* 中等屏幕 < 1200px */
@media (min-width: $screen-md-min) {
  ...
}
/* 大屏幕 >= 1200px */
@media (min-width: $screen-lg-min) {
  ...
}

```

- 使用  **jquery**  工具库处理业务逻辑
- 使用  **mockjs** 工具库 拦截ajax请求 以及 处理数据接口模拟

#### 命令
> 安装依赖： npm install <Br>
开发模式： npm run dev  <Br>
生产模式： npm run build <Br>

#### 预览
1. PC端 <br>
<img src="https://s3.ax1x.com/2021/01/09/sMtNS1.png" />
<img src="https://s3.ax1x.com/2021/01/09/sMwVxA.png" />
2. 移动端 <br>
<img src="https://s3.ax1x.com/2021/01/09/sMtUQx.png" />