# Suning

**Repository Path**: zxinc/Suning

## Basic Information

- **Project Name**: Suning
- **Description**: 苏宁M-----less+rem 布局（内容，图片等适配）--------当然里面也有流式布局等。
有原生轮播以及swiper轮播插件的使用。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2019-01-23
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 苏宁M站

**布局方式**：`less+rem 布局 ------当然里面也有流式布局等`

- index.html--------原生轮播
- index-swiper-----swiper插件使用



*#适配关键代码*：
***variable.less：***

```
@charset "utf-8";
//适配主流设备
@adapterDeviceList:750px,720px,640px,540px,480px,434px,414px,400px,384px,375px,360px,320px;
//设计稿尺寸
@psdwidth:750px;
//预设基准值
@baseFontSize:100px;
//设备种类数量
@len:length(@adapterDeviceList);
```

***mixins.less:***

```
.adapterMixin(@index) when (@index > 0){
  @media (min-width: extract(@adapterDeviceList,@index)){
    html{
      font-size: @baseFontSize/@psdwidth* extract(@adapterDeviceList,@index);
    }
  }
  .adapterMixin(@index - 1);
}
```

版本1.0：

- 运用原生js写轮播
- 不运用任何插件

![在这里插入图片描述](https://images.gitee.com/uploads/images/2019/0531/134616_23281bcc_2297434.png)

![在这里插入图片描述](https://images.gitee.com/uploads/images/2019/0531/134616_51cc194a_2297434.png)



![在这里插入图片描述](https://images.gitee.com/uploads/images/2019/0531/134621_95176452_2297434.png)



![在这里插入图片描述](https://images.gitee.com/uploads/images/2019/0531/134616_bf1f6bdd_2297434.png)

![在这里插入图片描述](https://images.gitee.com/uploads/images/2019/0531/134616_1ba3e4fc_2297434.png)