移動端遇到大小適配的問題

1.輪播圖圖片變形問題

同樣的圖片 同樣的二倍圖 在安卓和蘋果6等手機 圖片正常顯示 但是 在8p上 圖片發生壓縮變形 原因因爲寬高比不一樣 所以 圖片所在區域高度固定的時候 在8P上就會壓縮變形 解決方案如下 ：

給父元素設置指定高度並設置相對定位   讓圖片的寬度或者高度等於容器的寬度或高度，多餘的裁掉，然後讓圖片居中：

給子元素設置絕對定位 並設置寬度爲100% top left   各50% 再進行2D轉換 translate(x,y)

<style type="text/css">
    div{
        width: 210px;
        height: 210px;
        overflow: hidden;
        border: 2px solid red;
        position: relative;
    }
    img{
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); 
    }
</style>
    <div>
        <img src="1.png">
    </div>
    <br>
    <div>
        <img src="1.jpg">
    </div>

transform: none|transform-functions;     具體轉換效果如下 ：

值	描述
none	定義不進行轉換。
matrix(n,n,n,n,n,n)	定義 2D 轉換，使用六個值的矩陣。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定義 3D 轉換，使用 16 個值的 4x4 矩陣。
translate(x,y)	定義 2D 轉換。
translate3d(x,y,z)	定義 3D 轉換。
translateX(x)	定義轉換，只是用 X 軸的值。
translateY(y)	定義轉換，只是用 Y 軸的值。
translateZ(z)	定義 3D 轉換，只是用 Z 軸的值。
scale(x,y)	定義 2D 縮放轉換。
scale3d(x,y,z)	定義 3D 縮放轉換。
scaleX(x)	通過設置 X 軸的值來定義縮放轉換。
scaleY(y)	通過設置 Y 軸的值來定義縮放轉換。
scaleZ(z)	通過設置 Z 軸的值來定義 3D 縮放轉換。
rotate(angle)	定義 2D 旋轉，在參數中規定角度。
rotate3d(x,y,z,angle)	定義 3D 旋轉。
rotateX(angle)	定義沿着 X 軸的 3D 旋轉。
rotateY(angle)	定義沿着 Y 軸的 3D 旋轉。
rotateZ(angle)	定義沿着 Z 軸的 3D 旋轉。
skew(x-angle,y-angle)	定義沿着 X 和 Y 軸的 2D 傾斜轉換。
skewX(angle)	定義沿着 X 軸的 2D 傾斜轉換。
skewY(angle)	定義沿着 Y 軸的 2D 傾斜轉換。
perspective(n)	爲 3D 轉換元素定義透視視圖。

 

2.當在一個大的div中包含了兩個小的div 其中 大的div需要設置0.5px的邊框 而兩個小的div中又有點擊事件 這種時候就會出現點擊事件被僞類遮蓋 導致點擊事件無效的問題 解決方法：僞類中添加z-index:-999

.time_select_block::before{
    content: '';
    position: absolute;
    width: 220%;
    height: 235%;
    left: -3px;
    top: -1px;
    border: 1px solid #a8a8a8;
    transform-origin: 0 0;
    transform: scale(0.5, 0.5);
    -webkit-transform: scale(0.5,0.5);
    -moz-transform: scale(0.5,0.5);
    -ms-transform: scale(0.5,0.5);
    -o-transform: scale(0.5,0.5);
    box-sizing: border-box;
    z-index: -999;
}

3.一個大的div中有兩個小的div 當上面的div寬度是自適應的 下面的div也想和上面的div寬度一樣 就要設置下面的div寬度爲 100%

4.不同的設計圖在移動頁面大小設置不同

//oriWidth是原始設計果圖大小
var fontSizeAuto = function(oriWidth){
	return function(){
		var viewportWidth = document.documentElement.clientWidth || document.body.clientWidth;
		if(viewportWidth > oriWidth){ viewportWidth = oriWidth; }
		if(viewportWidth < 320){ viewportWidth = 320; }
		document.documentElement.style.fontSize = viewportWidth/(oriWidth/100) +'px';	
	}
}
fontSizeAuto(640)();
//如果原始設計圖的大小是750px。只需把參數改成750。
fontSizeAuto(750)();
window.onresize = fontSizeAuto(750);

 

也可以用另一種：

function resizeFont() {
//750是設計稿的寬度
    var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
    if (clientWidth > 750)
        document.getElementsByTagName('html').item(0).style.fontSize = '100px';
    else
        document.getElementsByTagName('html').item(0).style.fontSize = clientWidth / 750 * 100 + 'px';
}
resizeFont();
window.onresize = function () {
    resizeFont();
}