gallery-flex-c

gallery-flex-c

PC 端自适应方案，相对比与阿里移动端自适应方案此处

PC端与阿里移动端自适应方案对比

为了描述方便用 PC方案 代表 PC端自适应方案，用 阿里移动 代表阿里的移动端只适应方案。

1. 使用场景不同：

PC方案 使用的场景是当制作一个 html 页面在一个超大屏幕使用，一般来说制作过程中不会实时将页面在目标屏幕展示，第二如何使用设计交付的设计稿( 一般设计也不会给出跟目标屏幕一致的巨大的设计稿，大多数情况下是缩小版，如果是等比缩小还好，如果只是想当然的缩小那就呵呵了 )，比如间距啊、字体大小啊如何处理

阿里移动端设计和解决的问题是，如何使用一套设计稿兼容不同大小和分辨率的手机，更重要还有不同的设备像素比

1. 使用的方式不同

PC方案 使用非常简单，设计稿中大部分长度、宽度、间距、字体大小全部使用相对单位 (rem 、 %)，只有 DOM 元素的边线除外 border: 1px solid blue, 使用的是固定元素，当然如果边线非常粗也是应该使用 rem。

阿里移动的使用大部分情况是相同的，只有字体设置大小时不鼓励使用 rem，仍然使用 px。 这是为了在不同设备像素比的情况下显示效果更好(PC方案 使用场景一般不会遇到这种情况)。 当然阿里考虑的很周全，还有一套栅格系统

最新版本

0.0.1

用 Gulp 打包

运行 npm install，来安装依赖模块

运行 gulp，来对项目打包

使用方法

建议在 html head 头部引入 galleryFlex.min.js 文件

	<script src="./path-to/galleryFlex.min.js"></script>

执行这个 js 后，会在 html 上增加一个 data-dpr 属性，以及 font-size动态值

之后页面中的元素，都可以使用 rem 单位来设置。

如何使用

使用的关键是跟设计相互配合

举个例子，假如目标屏幕分辨率 5000*3000

设计可以缩小 4 倍，给出设计稿即：1250*750，这应该是一个靠谱的样稿了

关键的地方到，你说首先根据样稿修改 js 才能使用

	function refreshRem() {
		var width = docEl.getBoundingClientRect().width;

		/*
		 * width 获取视口的宽度
		 * 19.2 的值是根据设计稿确定
		 * 当设计稿为 750 时，可以的值是 7.5
		 * 当设计稿为 640 时，可以的值是 6.4
		 * 当设计稿为 1920 时，可以的值是 19.2
		 * 
		 */
		var rem = width / 19.2;
		docEl.style.fontSize = rem + 'px';
		galleryFlex.rem = win.rem = rem;
	}

此时，应该将 19.2 修改为 12.5 就完事大吉了

1rem = 1250 / 12.5 = 100

然后，设计稿中任何长度、宽度的值 (px) 都要变为以 rem 为单位在 css 中使用

 长度值 px => 长度值/100 rem