手机端切图注意

最新推荐文章于 2023-06-19 15:48:05 发布

面条请不要欺负汉堡

最新推荐文章于 2023-06-19 15:48:05 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css+html 文章标签：手机端切图注意 border 1px 像素的兼容

本文链接：https://blog.youkuaiyun.com/gao_xu_520/article/details/80295072

css+html 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了针对iPhone6的UI设计适配方法，包括不同分辨率下的图片命名规范、使用Flex布局进行元素排列、实现文本与边框的垂直居中及自适应图片设置等技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.了解

以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布局时最好

<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

<li class="menu-item">
	<span class="text border-1px">精美热菜</span> 
</li>
<li class="menu-item">
	<span class="text border-1px">爽口凉菜</span> 
</li>
<li class="menu-item">
	<span class="text border-1px">精选套餐</span> 
</li>

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的百分比值实现高度自适应（多用于占位，避免闪烁）