圖片移動端高清適配問題 image-set 屬性和@medie標籤

時間 2019-11-10

標籤圖片移動高清適配問題 image set 屬性 medie 標籤欄目無線简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.back{
			height:51px;
			width:51px;
			background:-webkit-image-set(url('wechat.png') 1x,url("wechat@2x.png") 2x) center;
		}
	</style>
</head>
<body>
	<!-- 
	image-set解決蘋果的高平請顯示圖片問題

	selector{
		background-image:url(no-image-set.png);
		background:image-set(url(foo-lowres.png) 1x,url(foo-highres.png) 2x) center;

		不支持image-set的瀏覽器下，他們解析background-image中的背景圖像；
		支持image-set:
			若是你的瀏覽器支持image-set,而是普通屏下，此時瀏覽器選擇image-set中1x背景圖像
			若是你的設備是高清屏幕下(ppi大於320時)時瀏覽器會選擇image-set中@2x背景圖像。

			僅支持background-image屬性，而不能使用在'<img>'標籤中，老的安卓4.4如下的不支持

			優勢：image-set不須要告訴瀏覽器使用什麼圖像，而是直接提供了圖像讓瀏覽器選擇
	}
	 -->

	<div class="back"></div>
</body>
</html>

@media標籤html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.back{
			height:51px;
			width:51px;
			background:url('wechat.png') no-repeat center;
			background-size:100%;
		}
		@media only screen and (-webkit-min-device-pixel-ratio:2){
			.back{
				background:url('wechat@2x.png') no-repeat;
				background-size:100%;
			}
		}
		/* 當dpr爲3時候也就是iphone6plus 是的時候加載這個圖片  */
		@media only screen and (-webkit-min-device-pixel-ratio:3){
			.back{
				background:url('wechat@3x.png') no-repeat;
				background-size:100%;
			}
		}
	</style>
</head>
<body>
	<!-- 缺點 直接給瀏覽器顯示特定的圖片，不靈活，假設在網速很差的狀況下，體驗很差 -->
	<div class="back"></div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。