原文连接 http://azq.space/blog/bigcan-lesson-1/javascript
http://www.jianshu.com/p/ae5e2ec91786/
首先我先说两个概念，第一，响应式：一个页面在不一样尺寸的浏览器中不一样的表现；第二，自适应：一个页面在任何尺寸浏览器下表现一致.这里只说自适应。css
zoom方式：html
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"><!--必须,放在head标签中-->
<script>
var _SCALE_ = 1;
_SCALE_ = function (){
var deviceWidth = document.documentElement.clientWidth,
scale = deviceWidth / 640;
scale = scale > 1 ? 1 : scale;
document.body.style.zoom = scale;
return scale;//留着给js用
}();//在body下执行便可
</script>
以上是经过css属性zoom来缩放页面，设计稿宽度为640(如下设计稿尺寸都为640)，因此这样的好处就是直接按照原来设计稿的尺寸用px来写css，不过这个显然不够高大上，页面有时会不清晰，可是经过和%的配合也能够快速的构建你的h5页面java
css3的scale方式：webpack
此方式bug众多，不适合新手，也不适合老司机，因此 略略略css3
meta-viewport-scale方式：web
经过比例来对initial-scale等属性进行重置，少部分浏览器不识别重置npm
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"><!--必须,放在head标签中-->
<script>
var _SCALE_ = 1;
_SCALE_ = function (){
var deviceWidth = document.documentElement.clientWidth,
scale = deviceWidth / 640;
scale = scale > 1 ? 1 : scale;
var metaEl = document.querySelector('meta[name="viewport"]');
metaEl.setAttribute('content', 'width=640,initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
return scale;
}();
</script>
这种方式和zoom的方式相似也是采用缩放，css也是按照原始设计稿来写,也能解决1px的问题，暂时没有发现什么问题,也许会有不清晰的现象,若是有同窗在使用这种方法的时候遇到问题请及时告诉我,赶忙填坑gulp
这是个高清适配的方法,除了重置meta失效的浏览器浏览器
dpr，rem，meta
var dpr, rem, scale; var docEl = document.documentElement; var fontEl = document.createElement('style'); var metaEl = document.querySelector('meta[name="viewport"]'); dpr = window.devicePixelRatio || 1; rem = docEl.clientWidth * dpr / 10; scale = 1 / dpr; // 设置viewport，进行缩放，达到高清效果 metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no'); // 设置data-dpr属性，留做的css hack之用 docEl.setAttribute('data-dpr', dpr); // 动态写入样式 docEl.firstElementChild.appendChild(fontEl); fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}'; // 给js调用的，某一dpr下rem和px之间的转换函数 window.rem2px = function(v) { v = parseFloat(v); return v * rem; }; window.px2rem = function(v) { v = parseFloat(v); return v / rem; }; window.dpr = dpr; window.rem = rem;
而后为了方便咱们能够采用less或者sass、scss来对咱们的css样式进行管理，这里简单的介绍less
.px2rem(@name, @px){ @{name}: @px / 64 * 1rem; } .px2px(@name, @px){ @{name}: round(@px / 2) * 1px; [data-dpr="2"] & { @{name}: @px * 1px; } // for mx3 [data-dpr="2.5"] & { @{name}: round(@px * 2.5 / 2) * 1px; } // for 小米note [data-dpr="2.75"] & { @{name}: round(@px * 2.75 / 2) * 1px; } [data-dpr="3"] & { @{name}: round(@px / 2 * 3) * 1px } // for 三星note4 [data-dpr="4"] & { @{name}: @px * 2px; } } /*简单的圆角半径*/ .border-radius (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } /*四角的半径定制*/ .border-radius-custom (@topleft: 5px, @topright: 5px, @bottomleft: 5px, @bottomright: 5px) { -webkit-border-radius: @topleft @topright @bottomright @bottomleft; -moz-border-radius: @topleft @topright @bottomright @bottomleft; border-radius: @topleft @topright @bottomright @bottomleft; } /*方块阴影 Box Shadow*/ .box-shadow (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) { -webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha); -moz-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha); box-shadow: @x @y @blur rgba(0, 0, 0, @alpha); } /*元素过渡效果 Transition*/ .transition (@prop: all, @time: 1s, @ease: linear) { -webkit-transition: @prop @time @ease; -moz-transition: @prop @time @ease; -ms-transition: @prop @time @ease; transition: @prop @time @ease; } /*转换/旋转 Transform*/ .transform (@rotate: 90deg, @scale: 1, @skew: 1deg, @translate: 10px) { -webkit-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate); -moz-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate); -ms-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate); transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate); } /*线性渐变*/ .gradient (@origin: left, @start: #ffffff, @stop: #000000) { background-color: @start; background-image: -webkit-linear-gradient(@origin, @start, @stop); background-image: -moz-linear-gradient(@origin, @start, @stop); background-image: -ms-linear-gradient(@origin, @start, @stop); background-image: linear-gradient(@origin, @start, @stop); } /*快速渐变*/ .quick-gradient (@origin: left, @alpha: 0.2) { background-image: -webkit-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha)); background-image: -moz-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha)); background-image: -ms-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha)); background-image: linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha)); } /*镜像效果*/ .reflect (@length: 50%, @opacity: 0.2){ -webkit-box-reflect: below