整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
在响应式布局逐渐成为主流的今天，网页或者app的流式布局已经不算是一个新鲜的词汇了。今天我要讲的一个内容也是跟页面流式布局有关，如何让你的网页实现完美的缩放？
我们可以很快速的写出一个响应式布局的页面，首先看一下效果图。
网页布局
其中html部分的代码如下：
html部分代码
css中的item代码为：
css代码
通过以上代码，完成上述的流式布局后，在我们改变浏览器窗口大小时，div也会随之进行缩放。
But，你以为这就是我们想要的结果吗？
当然不是！在改变浏览器窗口大小时，我们发现虽然div的宽度是进行了缩放，但是高度却没变，因此div的宽高比并未保持原始比例，我们可以看下以下的效果。
缩放后宽高比
从上图中可以很容易看出，缩放后的div宽高比比之前小很多，这并不是我们想要的结果。
我们需要达到的效果是在改变浏览器窗口大小时，div也会随之进行等比例的缩放。
首先，可以使用Javascript代码去实现，这是没有问题的。但是绑定Javascript的onresize事件，在拖拽时可能会出卡顿现象，体验不是很好。
接下来我们通过CSS来实现以上的效果。
使用的核心属性是我们平时并不太注意的padding-bottom。
padding-bottom有一个很容易让人忽略的特性是，当取值为百分比形式时，其百分比的基数是父元素的宽度，而不是高度。
因此我们可以在不用给父元素设置高度的时候，就可以通过padding-bottom属性确定当前元素的高度。我们的做法如下。
将元素的height属性设为0，通过padding-bottom属性确定元素高度。
设置合理的padding-bottom值，例如上述的例子中，在宽度为21%时，如果需要高度是宽度的1.62倍，我们可以将padding-bottom取值为34%
修改后的CSS代码如下。
修改后的CSS
修改后，我们再次调整浏览器窗口的大小，就会发现div是等比例的进行缩放，完美达到了我们的要求。
修改后等比例缩放
在这里，可能会有人有疑问如果设置overflow:hidden;那么里面的文字会不会因为超过height，就会被隐藏了？
答案是不会的，根据CSS2.1的规范，overflow只会对处于padding外面的内容生效，即只有超出了 padding区域的内容才会被overflow属性隐藏掉。而在设置padding-bottom后，实际已经决定了元素的height属性，因此overflow:hidden;不会生效。
今天这篇文章主要讲解了利用CSS完成页面等比例缩放的最简单方式，你学会了吗？
切图网客户项目中碰到一个问题，有一个数字需要倾斜，这个便用到了css3的 rotate的旋转的属性，没有用 skew倾斜，因为倾斜以后的文字是被拉伸变形了，但我并不像这样，下面是css3详细，另外要说明的是，这个数字做了 滚动到当前屏幕的时候，数字增长。
用到了jquery插件
<script type='text/javascript' src='js/jquery-waypoints-2.0.3.js'></script> <!--滚动视差-->
<script type="text/javascript" src="js/jquery.countTo.js"></script> <!--数字增长-->
共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。
二.缩放 scale
用法：transform: scale(0.5) 或者 transform: scale(0.5, 2);
参数表示缩放倍数；
一个参数时：表示水平和垂直同时缩放该倍率
两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率。
三.倾斜 skew
用法：transform: skew(30deg) 或者 transform: skew(30deg, 30deg);
参数表示倾斜角度，单位deg
一个参数时：表示水平方向的倾斜角度；
两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。
四.移动 translate
用法：transform: translate(45px) 或者 transform: translate(45px, 150px);
参数表示移动距离，单位px，
一个参数时：表示水平方向的移动距离；
两个参数时：第一个参数表示水平方向的移动距离，第二个参数表示垂直方向的移动距离。
五.基准点 transform-origin
在使用transform方法进行文字或图像的变形时，是以元素的中心点为基准点进行的。使用transform-origin属性，可以改变变形的基准点。
用法：transform-origin: 10px 10px;
共两个参数，表示相对左上角原点的距离，单位px，第一个参数表示相对左上角原点水平方向的距离，第二个参数表示相对左上角原点垂直方向的距离；
两个参数除了可以设置为具体的像素值，其中第一个参数可以指定为left、center、right，第二个参数可以指定为top、center、bottom。
六.多方法组合变形
上面我们介绍了使用transform对元素进行旋转、缩放、倾斜、移动的方法，这里讲介绍综合使用这几个方法来对一个元素进行多重变形。
用法：transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);
这四种变形方法顺序可以随意，但不同的顺序导致变形结果不同，原因是变形的顺序是从左到右依次进行，这个用法中的执行顺序为1.rotate 2.scalse 3.skew 4.translate
原文地址：http://www.qietu.cn/thread-15197-1-1.html （切图社区）
加微信公众号：qietuwang （限做前端的人）
<html>
<head>
<style>
.over {position: fixed; left:0; top:0; width:100%; z-index:100;}
.tempContainer {position:fixed; width:100%; margin-right:0px; margin-left:0px; text-align:center; z-index:101;}
</style>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<body>
<div class="over"></div><!--背景层-->
<div class="logoImg amplifyImg"><!--注意：此处的amlifyImg不可少-->
< img src="test.jpg"/><!-- 此处是引入图片的路径 -->
</div>
<script>
$(document).ready(function () {
var imgsObj = $('.amplifyImg img');//需要放大的图像
if(imgsObj){
$.each(imgsObj,function(){
$(this).click(function(){
var currImg = $(this);
coverLayer(1);
var tempContainer = $('<div class=tempContainer></div>');//图片容器
with(tempContainer){//width方法等同于$(this)
appendTo("body");
var windowWidth=$(window).width();
var windowHeight=$(window).height();
//获取图片原始宽度、高度
var orignImg = new Image();
orignImg.src =currImg.attr("src") ;
var currImgWidth= orignImg.width;
var currImgHeight = orignImg.height;
if(currImgWidth<windowWidth){//为了让图片不失真，当图片宽度较小的时候，保留原图
if(currImgHeight<windowHeight){
var topHeight=(windowHeight-currImgHeight)/2;
if(topHeight>35){/*此处为了使图片高度上居中显示在整个手机屏幕中：因为在android,ios的微信中会有一个title导航，35为title导航的高度*/
topHeight=topHeight-35;
css('top',topHeight);
}else{
css('top',0);
}
html('< img border=0 src=' + currImg.attr('src') + '>');
}else{
css('top',0);
html('< img border=0 src=' + currImg.attr('src') + ' height='+windowHeight+'>');
}
}else{
var currImgChangeHeight=(currImgHeight*windowWidth)/currImgWidth;
if(currImgChangeHeight<windowHeight){
var topHeight=(windowHeight-currImgChangeHeight)/2;
if(topHeight>35){
topHeight=topHeight-35;
css('top',topHeight);
}else{
css('top',0);
}
html('< img border=0 src=' + currImg.attr('src') + ' width='+windowWidth+';>');
}else{
css('top',0);
html('< img border=0 src=' + currImg.attr('src') + ' width='+windowWidth+'; height='+windowHeight+'>');
}
}
}
tempContainer.click(function(){
$(this).remove();
coverLayer(0);
});
});
});
}
else{
return false;
}
//使用禁用蒙层效果
function coverLayer(tag){
with($('.over')){
if(tag==1){
css('height',$(document).height());
css('display','block');
css('opacity',1);
css("background-color","#FFFFFF");
css("background-color","rgba(0,0,0,0.7)" ); //蒙层透明度
}
else{
css('display','none');
}
}
}
});
</script>
</body>
</html>*请认真填写需求信息，我们会在24小时内与您取得联系。
