# jiqid

**Repository Path**: foolishchow/jiqid

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2017-06-12
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


## img 
 - lazy-load 
 	50%
 	多图页面和瀑布流加载的页面采取图片懒加载

 - 图片尺寸。 
 	当前主流的浏览器分辨率为414*3=1242px
 	主流dpr 3
 	- banner图片采用1242px的jpg图片
 	- 专辑图片采用jpg图片 
 		- 50%宽度  621px
 		- 10%宽度  124px
 	- 样式图标部分采用base64内嵌，不再引用外部图片，减少http请求次数
 	- 基础图标
 	 争取早日实现字体化[iconfont](http://www.iconfont.cn/)
 	 - 图标不会模糊
 	 - 大小会比base64小很多

 - 图片文件大小 
 	一般来说图片大小不会大于200k，banner图片也不会太大，
 	推荐[imageoptim](https://imageoptim.com/versions.html)压缩后再使用

 - 图片类型。
 	样式内使用png格式,banner 内容采用jpg


## scripts 
 - concat && minify  
  合并一些当前可合并的js文件，并压缩

 - gzip	
  css和js开启静态gzip大概可以减少文件40%的大小

## 编码格式。 样式加载速度
 - css引入在头部head
 加快默认样式的加载速度，提升首屏样式渲染速度，
 - js 引入在dom尾部
 将js放到body尾部加载，提升首屏样式渲染速度，

## rem样式编写规则
 - rem是什么
 	[rem](http://www.w3cplus.com/css3/define-font-size-with-css3-rem)这是我们当前项目实现的原理，但这个解决方案不能解决移动端页面等比例缩放的问题。   
 	[rem-wap](http://caibaojian.com/web-app-rem.html)这篇文章解释了如何使用rem实现wap的等比例缩放。   
 - 我们的实现标准
 	| 高保真宽度   |750px   |
 	| rem计算方式  |高保真px值/50|