https://github.com/zhchen7/suning
苏宁M-----less+rem 布局（内容，图片等适配）--------当然里面也有流式布局等。有原生轮播以及swiper轮播插件的使用。
https://github.com/zhchen7/suning
Last synced: 3 months ago
JSON representation
苏宁M-----less+rem 布局（内容，图片等适配）--------当然里面也有流式布局等。有原生轮播以及swiper轮播插件的使用。
- Host: GitHub
- URL: https://github.com/zhchen7/suning
- Owner: ZhChen7
- Created: 2019-04-20T08:36:35.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2019-07-12T09:38:05.000Z (almost 6 years ago)
- Last Synced: 2025-01-14T08:24:16.550Z (5 months ago)
- Language: JavaScript
- Homepage:
- Size: 893 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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写轮播
- 不运用任何插件
