整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
在響應式布局逐漸成為主流的今天，網頁或者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小時內與您取得聯系。
