# mobile-template

**Repository Path**: bemzhao/mobile-template

## Basic Information

- **Project Name**: mobile-template
- **Description**: 移动端初始模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## Mobile项目初始模板

### 1、文件及其版本
```
project/
   ├── css/
   │     ├── animate.css v3.7.0
   │     ├── bootstrap.min.css v3.3.7
   │     ├── font-awesome.min.css v4.7.0
   │     ├── font-other.css
   │     ├── style.less
   │     └── swiper.min.css v4.5.0
   ├── fonts/
   │     ├── arial.ttf
   │     ├── FontAwesome.otf v4.7.0 2016
   │     ├── fontawesome-webfont.eot
   │     ├── fontawesome-webfont.svg
   │     ├── fontawesome-webfont.ttf
   │     ├── fontawesome-webfont.woff
   │     └── fontawesome-webfont.woff2
   ├── images/
   │     ├── home/
   │     ├── side_icon.png
   │     └── side_icon-w.png
   ├── js/
   │     ├── bootstrap.min.js v3.3.7
   │     ├── jquery-2.1.1.min.js v2.1.1
   │     ├── less.min.js v3.8.0
   │     ├── main.js
   │     ├── rem.js
   │     ├── swiper.animate.min.js v1.0.3
   │     ├── swiper.min.js v4.5.0
   │     └── wow.min.js v1.1.3
   ├── README.MD
   └── template.html
```

### 2、rem响应

rem.js中 768 基于PSD页面的宽度，

所以在768px屏幕下，换算为 **1rem=100px**，并自动缩放

### 3、布局规范

HTML;
```html
<div class="home-header"></div>
<div class="home-content">
    <div class="home-section1">...</div>
    <div class="home-section2">...</div>
    <div class="home-section3">...</div>
    ...
</div>
<div class="home-footer"></div>

```

Less;
```less
.home{
    &-header{}
    &-content{}
    &-section1{}
    &-section2{}
    &-section3{}
    ...
    &-footer{}
}

```

### 4、存在的问题

如果您引用的其他插件和less.min.js之间存在冲突，或者你引用的其他插件总是出现灵异事件

请先自行编译less文件，然后再逐步排查问题;

> npm install -g less

> lessc style.less style.css 


### 5、其他帮助

目前在开发中已知的问题和解决方案;

[https://bemzhao.github.io/notes/](https://bemzhao.github.io/notes/)

### 6、写在最后

为避免与其他插件冲突，**完成项目后自行编译less文件，并屏蔽掉html中less.js的引用**;

在项目未上线之前，修改都应该在less文件中进行，然后再编译成css文件，重复这种操作，less文件的源代码可能会为以后的模块化处理起到作用

```html
<!-- less-->
<script src="js/less.min.js"></script>
<script>less.watch();</script>
```

---

# 请务必保持代码风格的统一，祝您生活愉快 ^ ^;