移动端遇到大小适配的问题

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();
}