手机端切图注意

亦凉 2021-09-15 10:18 314阅读 0赞

一.了解

以iPhone6设置屏幕大小， psd设置大小为750×1334。在切图的时候 以要屏幕的一半来切图（无论图片还是文字 间距 都除以2  ）

1.图片

要切2张， 一张是750×1334  屏幕下的  命名@2x；  另一张是 750×1334屏幕1.5倍的情况下   命名@3x

如：图片在 750×1334屏幕下是44×24 imgs@2x.png   那么imgs@3x.png就是66×36

2x 和3x 之间是1.5倍

.img{
    	width:22px;
    	height:12px;
    	background-image:url(imgs@2x.png");
    }
    
    @media(-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){
    	.img{
    		background-image:url(imgs@3x.png");
    	}
    }

2.使用flex布局时最好

![20180514110741204][]

<div class="title">
    	<div class="line"></div>
    	<div class="text">优惠信息</div>
    	<div class="line"></div>
    </div>
    .title{
    	display: flex;
    	width: 80%;
    	margin: 28px auto 24px auto;
    }
    .title .line{
    	flex: 1;
    	position: relative;
    	top: -6px;
    	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    .title .text{
    	padding: 0 12px;
    	font-weight: 700;
    	font-size: 14px;		            	
    }

3.垂直居中+border 1px

![20180514131829380][]

3.1垂直居中最好的布局是display: table;

.menu-item{
     display: table;
     height: 54px;
     width: 56px;
     padding: 0 12px;
     line-height: 14px;
     position: relative;
     .text{
     display: table-cell;
     width: 56px;
     vertical-align: middle;
     font-size: 12px;
     }
    }

3.2 border 1px 像素的兼容

//border 1px 处理
    @media(-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){
    	.border-1px{
    		&:after{
    			-webkit-transform:scaleY(0.7);
    			transform:scaleY(0.7);
    		}
    	}
    }
    
    @media(-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
    	.border-1px{
    		&:after{
    			-webkit-transform:scaleY(0.5);
    			transform:scaleY(0.5);
    		}
    	}
    }
    .border-1px{
    	position: relative;
    	&:after{
    		content:'';
    		position: absolute;
    		left:0;
    		bottom:0;
    		width:100%;
    		border-top:1px solid #ccc;
    		
    	}
    }

2.图片设置

自适应的精髓在于宽度，margin/padding设置百分比弥补了元素高度无法自适应地与元素宽度保持一致的缺陷。

参考：[巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）][margin_padding]

[20180514110741204]: /images/20210813/996fae4dd58c4a7bb3813b19c522bbc0.png
[20180514131829380]: /images/20210813/d5f8dc6d703945fbae93e807c07f9aee.png
[margin_padding]: https://segmentfault.com/a/1190000004231995