原文链接 http://azq.space/blog/bigcan-lesson-1/
http://www.jianshu.com/p/ae5e2ec91786/
首先我先说两个概念,第一,响应式:一个页面在不同尺寸的浏览器中不同的表现;第二,自适应:一个页面在任何尺寸浏览器下表现一致.这里只说自适应。
1.简单粗暴型
zoom方式:
<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页面
css3的scale方式:
此方式bug众多,不适合新手,也不适合老司机,所以 略略略
2.温柔小巧型
meta-viewport-scale方式:
通过比例来对initial-scale等属性进行重置,少部分浏览器不识别重置
<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的问题,暂时没有发现什么问题,也许会有不清晰的现象,如果有同学在使用这种方法的时候遇到问题请及时告诉我,赶紧填坑
3.高端时尚型
这是个高清适配的方法,除了重置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){