css html 4图横向排列 自适应宽度，多图横向排列 li横向 li自适应

直接把苹果官网的抠出来给大家了，拿去happy吧!，先上效果图：

横屏一排的效果：


把浏览器拉小的效果：


激动的代码来了：


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" prefix="og: http://ogp.me/ns#">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8; IE=9" />


<meta charset="utf-8" />
<meta name="robots" content="noodp" />

<!--meta name="viewport" content="width=device-width, initial-scale=1" /-->


<!--link rel="stylesheet" type="text/css" href="/ac/globalnav/2.0/zh_CN/styles/ac-globalnav.built.css" />
<link rel="stylesheet" type="text/css" href="/ac/globalfooter/2.0/zh_CN/styles/ac-globalfooter.built.css" />
<link rel="stylesheet" type="text/css" href="/ac/localnav/3.0/styles/ac-localnav.built.css" /-->



<title>Apple (中国) - 官方网站</title>

<!--link rel="home" href="http://www.apple.com/cn/" />
<link rel="index" href="http://www.apple.com/cn/sitemap/" />
<link rel="stylesheet" href="/wss/fonts/?family=Myriad+Set+Pro&amp;v=2" type="text/css" media="all" />
<link rel="stylesheet" href="/wss/fonts/?family=Apple+Icons&amp;v=1" type="text/css" media="all" />
<link rel="stylesheet" href="http://images.apple.com/v/home/cz/built/styles/main.built.css" type="text/css" /-->
<link rel="stylesheet" href="main.built2.css" type="text/css" />
<!--link rel="stylesheet" href="http://images.apple.com/cn/home/styles/main.built.css" type="text/css" />
<link rel="stylesheet" href="http://images.apple.com/cn/home/styles/promos.css" type="text/css" />
<link rel="stylesheet" href="promos.css" type="text/css" /-->
<!--script src="head.built.js" type="text/javascript" charset="utf-8"></script>
<!--script src="http://images.apple.com/v/home/cz/built/scripts/head.built.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="/wss/fonts?family=HanHei+SC&amp;weights=300,400,600&amp;v=2" type="text/css" media="all">
<link rel="stylesheet" href="http://images.apple.com/cn/global/styles/hanhei.css" /-->

<!--[if IE]>
<link rel="stylesheet" href="/wss/fonts?family=HanHei+TC&amp;weights=100,300,400&amp;v=2" type="text/css" media="all">
<link rel="stylesheet" href="http://images.apple.com/cn/global/styles/hanhei-ie.css" />
<![endif]-->
<!--link rel="stylesheet" href="http://images.apple.com/cn/home/styles/font.css" type="text/css" /-->
</head>



<body>


<section id="promos" class="promos row" data-analytics-region="promos">
<ul>

<li id="promo-position-0" class="promo-position column large-3 medium-6 small-12" data-promo-type="show-hide">
<!-- 3个a，刷新时会自动更换,需要下面的main.built.js promo-tile-position-0  -->
<a
class="promo promo-holiday-music"
href="/cn/shop/gifts/music"
data-promo-id="holiday-music"
data-analytics-click="prop3:gift_guide,prefix:p"
data-analytics-title="promo-gift-guide">
<span>表达心意，也是门艺术。发现美妙音乐好礼。</span>
</a>
<!--a
class="promo-tile-position-0 promo promo-holiday-games"
href="/cn/shop/gifts/games-and-toys"
data-promo-id="holiday-games"
data-analytics-click="prop3:gift_guide,prefix:p"
data-analytics-title="promo-gift-guide">
<span>表达心意，也是门艺术。发现新奇游戏和玩具。</span>
</a>
<a
class="promo-tile-position-0 promo promo-holiday-photos"
href="/cn/shop/gifts/photography"
data-promo-id="holiday-photos"
data-analytics-click="prop3:gift_guide,prefix:p"
data-analytics-title="promo-gift-guide">
<span>表达心意，也是门艺术。发现精彩摄影好礼。</span>
</a-->
</li>

<li id="promo-position-3" class="promo-position column large-3 medium-6 small-12">
<a
class="promo promo-airpods"
href="/cn/airpods/"
data-analytics-click="prop3:airpods,prefix:p"
data-analytics-title="promo-airpods">
<span>AirPods 无线，无繁琐，只有妙不可言。</span>

</a>
</li>


<li id="promo-position-1" class="promo-position column large-3 medium-6 small-12">
<a
data-promo-id="os-1"
class="promo promo-ipad-pro"
href="/cn/ipad-pro/"
data-analytics-click="prop3:ipad-pro,prefix:p"
data-analytics-title="promo-ipad-pro">
<span>iPad Pro。你的下一台电脑。</span>
</a>
</li>


<li id="promo-position-2" class="promo-position column large-3 medium-6 small-12">
<a
class="promo promo-iphone-upgrade"
href="/cn/shop/goto/iphone/iphone_upgrade_program"
data-analytics-click="prop3:iphone_upgrade,prefix:p"
data-analytics-title="promo-iphone_upgrade">
<span>iPhone 年年焕新计划 每年都有一部新 iPhone，并享受 AppleCare+ 全方位服务计划。</span>
</a>
</li>
</ul>
</section>

</main>

<!--script src="http://images.apple.com/v/home/cz/built/scripts/main.built.js" type="text/javascript" charset="utf-8"></script-->

</body>
</html>


下面是CSS文件：

ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,hgroup,p,blockquote,figure,form,fieldset,input,legend,pre,abbr,button {
	margin:0;
	padding:0
}
article,aside,footer,header,nav,main,section,summary,details,hgroup,figure,figcaption {
	display:block
}

li li {
	font-size:1em
}
ul,ol {
	margin:1em 0 1em 1.11111em
}
ul ul,ul ol,ol ul,ol ol {
	margin-top:0;
	margin-bottom:0
}
nav ul,nav ol {
	list-style:none;
	margin:0
}

.row {
	position:relative;
	z-index:1
}
.row:before,.row:after {
	content:' ';
	display:table
}
.row:after {
	clear:both
}
.column {
	box-sizing:border-box;
	position:relative;
	z-index:1;
	margin:0;
	padding:0;
	float:left;
	min-height:2px
}
.medium-6 {
	width:50%
}
.small-12 {
	width:100%
}

.large-3 {
	width:25%
}
html.ie8 .large-3 {
	width:24.975%
}

/* 宽度自适应Start */
@media only screen and (min-width: 1442px) {
	.xlarge-offset-0 {
	margin-left:0
}
.xlarge-push-0 {
	left:auto;
	right:auto
}
.xlarge-pull-0 {
	right:auto;
	left:auto
}
.xlarge-1 {
	width:8.33333%
}
.xlarge-offset-1 {
	margin-left:8.33333%
}
.xlarge-push-1 {
	left:8.33333%;
	right:auto
}
.xlarge-pull-1 {
	right:8.33333%;
	left:auto
}
.xlarge-2 {
	width:16.66667%
}
.xlarge-offset-2 {
	margin-left:16.66667%
}
.xlarge-push-2 {
	left:16.66667%;
	right:auto
}
.xlarge-pull-2 {
	right:16.66667%;
	left:auto
}
.xlarge-3 {
	width:25%
}
.xlarge-offset-3 {
	margin-left:25%
}
.xlarge-push-3 {
	left:25%;
	right:auto
}
.xlarge-pull-3 {
	right:25%;
	left:auto
}
.xlarge-4 {
	width:33.33333%
}
.xlarge-offset-4 {
	margin-left:33.33333%
}
.xlarge-push-4 {
	left:33.33333%;
	right:auto
}
.xlarge-pull-4 {
	right:33.33333%;
	left:auto
}
.xlarge-5 {
	width:41.66667%
}
.xlarge-offset-5 {
	margin-left:41.66667%
}
.xlarge-push-5 {
	left:41.66667%;
	right:auto
}
.xlarge-pull-5 {
	right:41.66667%;
	left:auto
}
.xlarge-6 {
	width:50%
}
.xlarge-offset-6 {
	margin-left:50%
}
.xlarge-push-6 {
	left:50%;
	right:auto
}
.xlarge-pull-6 {
	right:50%;
	left:auto
}
.xlarge-7 {
	width:58.33333%
}
.xlarge-offset-7 {
	margin-left:58.33333%
}
.xlarge-push-7 {
	left:58.33333%;
	right:auto
}
.xlarge-pull-7 {
	right:58.33333%;
	left:auto
}
.xlarge-8 {
	width:66.66667%
}
.xlarge-offset-8 {
	margin-left:66.66667%
}
.xlarge-push-8 {
	left:66.66667%;
	right:auto
}
.xlarge-pull-8 {
	right:66.66667%;
	left:auto
}
.xlarge-9 {
	width:75%
}
.xlarge-offset-9 {
	margin-left:75%
}
.xlarge-push-9 {
	left:75%;
	right:auto
}
.xlarge-pull-9 {
	right:75%;
	left:auto
}
.xlarge-10 {
	width:83.33333%
}
.xlarge-offset-10 {
	margin-left:83.33333%
}
.xlarge-push-10 {
	left:83.33333%;
	right:auto
}
.xlarge-pull-10 {
	right:83.33333%;
	left:auto
}
.xlarge-11 {
	width:91.66667%
}
.xlarge-offset-11 {
	margin-left:91.66667%
}
.xlarge-push-11 {
	left:91.66667%;
	right:auto
}
.xlarge-pull-11 {
	right:91.66667%;
	left:auto
}
.xlarge-12 {
	width:100%
}
.xlarge-offset-12 {
	margin-left:100%
}
.xlarge-push-12 {
	left:100%;
	right:auto
}
.xlarge-pull-12 {
	right:100%;
	left:auto
}
.xlarge-centered {
	margin-left:auto;
	margin-right:auto;
	float:none
}
.xlarge-uncentered {
	margin-left:0;
	margin-right:0
}
.xlarge-last {
	float:right
}
.xlarge-notlast {
	float:left
}
}@media only screen and (max-width: 1068px) {
	.medium-offset-0 {
	margin-left:0
}
.medium-push-0 {
	left:auto;
	right:auto
}
.medium-pull-0 {
	right:auto;
	left:auto
}
.medium-1 {
	width:8.33333%
}
.medium-offset-1 {
	margin-left:8.33333%
}
.medium-push-1 {
	left:8.33333%;
	right:auto
}
.medium-pull-1 {
	right:8.33333%;
	left:auto
}
.medium-2 {
	width:16.66667%
}
.medium-offset-2 {
	margin-left:16.66667%
}
.medium-push-2 {
	left:16.66667%;
	right:auto
}
.medium-pull-2 {
	right:16.66667%;
	left:auto
}
.medium-3 {
	width:25%
}
.medium-offset-3 {
	margin-left:25%
}
.medium-push-3 {
	left:25%;
	right:auto
}
.medium-pull-3 {
	right:25%;
	left:auto
}
.medium-4 {
	width:33.33333%
}
.medium-offset-4 {
	margin-left:33.33333%
}
.medium-push-4 {
	left:33.33333%;
	right:auto
}
.medium-pull-4 {
	right:33.33333%;
	left:auto
}
.medium-5 {
	width:41.66667%
}
.medium-offset-5 {
	margin-left:41.66667%
}
.medium-push-5 {
	left:41.66667%;
	right:auto
}
.medium-pull-5 {
	right:41.66667%;
	left:auto
}
.medium-6 {
	width:50%
}
.medium-offset-6 {
	margin-left:50%
}
.medium-push-6 {
	left:50%;
	right:auto
}
.medium-pull-6 {
	right:50%;
	left:auto
}
.medium-7 {
	width:58.33333%
}
.medium-offset-7 {
	margin-left:58.33333%
}
.medium-push-7 {
	left:58.33333%;
	right:auto
}
.medium-pull-7 {
	right:58.33333%;
	left:auto
}
.medium-8 {
	width:66.66667%
}
.medium-offset-8 {
	margin-left:66.66667%
}
.medium-push-8 {
	left:66.66667%;
	right:auto
}
.medium-pull-8 {
	right:66.66667%;
	left:auto
}
.medium-9 {
	width:75%
}
.medium-offset-9 {
	margin-left:75%
}
.medium-push-9 {
	left:75%;
	right:auto
}
.medium-pull-9 {
	right:75%;
	left:auto
}
.medium-10 {
	width:83.33333%
}
.medium-offset-10 {
	margin-left:83.33333%
}
.medium-push-10 {
	left:83.33333%;
	right:auto
}
.medium-pull-10 {
	right:83.33333%;
	left:auto
}
.medium-11 {
	width:91.66667%
}
.medium-offset-11 {
	margin-left:91.66667%
}
.medium-push-11 {
	left:91.66667%;
	right:auto
}
.medium-pull-11 {
	right:91.66667%;
	left:auto
}
.medium-12 {
	width:100%
}
.medium-offset-12 {
	margin-left:100%
}
.medium-push-12 {
	left:100%;
	right:auto
}
.medium-pull-12 {
	right:100%;
	left:auto
}
.medium-centered {
	margin-left:auto;
	margin-right:auto;
	float:none
}
.medium-uncentered {
	margin-left:0;
	margin-right:0
}
.medium-last {
	float:right
}
.medium-notlast {
	float:left
}
}@media only screen and (max-width: 735px) {
	.small-offset-0 {
	margin-left:0
}
.small-push-0 {
	left:auto;
	right:auto
}
.small-pull-0 {
	right:auto;
	left:auto
}
.small-1 {
	width:8.33333%
}
.small-offset-1 {
	margin-left:8.33333%
}
.small-push-1 {
	left:8.33333%;
	right:auto
}
.small-pull-1 {
	right:8.33333%;
	left:auto
}
.small-2 {
	width:16.66667%
}
.small-offset-2 {
	margin-left:16.66667%
}
.small-push-2 {
	left:16.66667%;
	right:auto
}
.small-pull-2 {
	right:16.66667%;
	left:auto
}
.small-3 {
	width:25%
}
.small-offset-3 {
	margin-left:25%
}
.small-push-3 {
	left:25%;
	right:auto
}
.small-pull-3 {
	right:25%;
	left:auto
}
.small-4 {
	width:33.33333%
}
.small-offset-4 {
	margin-left:33.33333%
}
.small-push-4 {
	left:33.33333%;
	right:auto
}
.small-pull-4 {
	right:33.33333%;
	left:auto
}
.small-5 {
	width:41.66667%
}
.small-offset-5 {
	margin-left:41.66667%
}
.small-push-5 {
	left:41.66667%;
	right:auto
}
.small-pull-5 {
	right:41.66667%;
	left:auto
}
.small-6 {
	width:50%
}
.small-offset-6 {
	margin-left:50%
}
.small-push-6 {
	left:50%;
	right:auto
}
.small-pull-6 {
	right:50%;
	left:auto
}
.small-7 {
	width:58.33333%
}
.small-offset-7 {
	margin-left:58.33333%
}
.small-push-7 {
	left:58.33333%;
	right:auto
}
.small-pull-7 {
	right:58.33333%;
	left:auto
}
.small-8 {
	width:66.66667%
}
.small-offset-8 {
	margin-left:66.66667%
}
.small-push-8 {
	left:66.66667%;
	right:auto
}
.small-pull-8 {
	right:66.66667%;
	left:auto
}
.small-9 {
	width:75%
}
.small-offset-9 {
	margin-left:75%
}
.small-push-9 {
	left:75%;
	right:auto
}
.small-pull-9 {
	right:75%;
	left:auto
}
.small-10 {
	width:83.33333%
}
.small-offset-10 {
	margin-left:83.33333%
}
.small-push-10 {
	left:83.33333%;
	right:auto
}
.small-pull-10 {
	right:83.33333%;
	left:auto
}
.small-11 {
	width:91.66667%
}
.small-offset-11 {
	margin-left:91.66667%
}
.small-push-11 {
	left:91.66667%;
	right:auto
}
.small-pull-11 {
	right:91.66667%;
	left:auto
}
.small-12 {
	width:100%
}
.small-offset-12 {
	margin-left:100%
}
.small-push-12 {
	left:100%;
	right:auto
}
.small-pull-12 {
	right:100%;
	left:auto
}
.small-centered {
	margin-left:auto;
	margin-right:auto;
	float:none
}
.small-uncentered {
	margin-left:0;
	margin-right:0
}
.small-last {
	float:right
}
.small-notlast {
	float:left
}
}

/* 宽度自适应END */

.promos {
	border-bottom:2px solid #fff
}
.promos ul {
	margin:0;
	padding:0
}
.promos .promo-position {
	list-style-type:none;
	box-sizing:border-box;
	border-top:2px solid #fff;
	border-right:2px solid #fff
}
@media only screen and (max-width: 1068px) {
	.promos .promo-position.promo-tile-position-1 {
	border-right:none
}
}.promos .promo-position.promo-tile-position-3 {
	border-right:none
}
@media only screen and (max-width: 735px) {
	.promos .promo-position {
	border-right:none
}
}.promos .promo-tile {
	list-style-type:none;
	box-sizing:border-box;
	border-top:2px solid #fff;
	border-right:2px solid #fff
}
@media only screen and (max-width: 1068px) {
	.promos .promo-tile.promo-tile-position-1 {
	border-right:none
}
}.promos .promo-tile.promo-tile-position-3 {
	border-right:none
}
@media only screen and (max-width: 735px) {
	.promos .promo-tile {
	border-right:none
}
}.promos .promo {
	display:block;
	background-position:center center;
	height:200px
}
.promos .promo-label {
	position:absolute;
	clip:rect(1px 1px 1px 1px);
	clip:rect(1px, 1px, 1px, 1px);
	-webkit-clip-path:inset(0px 0px 99.9% 99.9%);
	clip-path:inset(0px 0px 99.9% 99.9%);
	overflow:hidden;
	height:1px;
	width:1px;
	padding:0;
	border:0
}
[data-promo-type] {
	visibility:hidden
}
[data-promo-type].promos-ready {
	visibility:visible
}
.no-js [data-promo-type],.no-enhanced-gallery [data-promo-type] {
	visibility:visible
}

/* 第一个宽屏 */
.promo-holiday-music {
    background-image: url("http://images.apple.com/cn/home/images/promos/gifts_music_b_large.jpg")
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    .promo-holiday-music {
        background-image: url("http://images.apple.com/cn/home/images/promos/gifts_music_b_large_2x.jpg")
    }
}

@media only screen and (min-width: 1442px) {
    .promo-holiday-music {
        background-image: url("http://images.apple.com/cn/home/images/promos/gifts_music_b_xlarge.jpg")
    }
}

@media only screen and (min-width: 1442px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width: 1442px) and (min-resolution: 1.5dppx), only screen and (min-width: 1442px) and (min-resolution: 144dpi) {
    .promo-holiday-music {
        background-image: url("http://images.apple.com/cn/home/images/promos/gifts_music_b_xlarge_2x.jpg")
    }
}

@media only screen and (max-width: 1068px) {
    .promo-holiday-music {
        background-image: url("http://images.apple.com/cn/home/images/promos/gifts_music_b_medium.jpg")
    }
}

@media only screen and (max-width: 1068px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px) and (min-resolution: 1.5dppx), only screen and (max-width: 1068px) and (min-resolution: 144dpi) {
    .promo-holiday-music {
        background-image: url("http://images.apple.com/cn/home/images/promos/gifts_music_b_medium_2x.jpg")
    }
}

@media only screen and (max-width: 735px) {
    .promo-holiday-music {
        background-image: url("http://images.apple.com/cn/home/images/promos/gifts_music_b_small.jpg")
    }
}

@media only screen and (max-width: 735px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 735px) and (min-resolution: 1.5dppx), only screen and (max-width: 735px) and (min-resolution: 144dpi) {
    .promo-holiday-music {
        background-image: url("http://images.apple.com/cn/home/images/promos/gifts_music_b_small_2x.jpg")
    }
}

/* 第二个宽屏 */
.promo-airpods {
	background-size:360px 200px;
	background-repeat:no-repeat;
	background-image:url("http://images.apple.com/v/home/cz/images/shared/promos/airpods_large.jpg")
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
	.promo-airpods {
	background-image:url("http://images.apple.com/v/home/cz/images/shared/promos/airpods_large_2x.jpg")
}
}@media only screen and (min-width: 1442px) {
	.promo-airpods {
	background-size:640px 200px;
	background-repeat:no-repeat;
	background-image:url("http://images.apple.com/v/home/cz/images/shared/promos/airpods_xlarge.jpg")
}
}@media only screen and (min-width: 1442px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width: 1442px) and (min-resolution: 1.5dppx), only screen and (min-width: 1442px) and (min-resolution: 144dpi) {
	.promo-airpods {
	background-image:url("http://images.apple.com/v/home/cz/images/shared/promos/airpods_xlarge_2x.jpg")
}
}@media only screen and (max-width: 1068px) {
	.promo-airpods {
	background-size:640px 200px;
	background-repeat:no-repeat;
	background-image:url("http://images.apple.com/v/home/cz/images/shared/promos/airpods_medium.jpg")
}
}@media only screen and (max-width: 1068px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px) and (min-resolution: 1.5dppx), only screen and (max-width: 1068px) and (min-resolution: 144dpi) {
	.promo-airpods {
	background-image:url("http://images.apple.com/v/home/cz/images/shared/promos/airpods_medium_2x.jpg")
}
}@media only screen and (max-width: 735px) {
	.promo-airpods {
	background-size:736px 200px;
	background-repeat:no-repeat;
	background-image:url("http://images.apple.com/v/home/cz/images/shared/promos/airpods_small.jpg")
}
}@media only screen and (max-width: 735px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 735px) and (min-resolution: 1.5dppx), only screen and (max-width: 735px) and (min-resolution: 144dpi) {
	.promo-airpods {
	background-image:url("http://images.apple.com/v/home/cz/images/shared/promos/airpods_small_2x.jpg")
}
}

/* 第三个宽屏 */
.promo-ipad-pro {
	background-size:360px 200px;
	background-repeat:no-repeat;
	background-image:url("http://images.apple.com/v/home/cz/images/shared/promos/ipad_pro_large.jpg")
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
	.promo-ipad-pro {
	background-image:url("http://images.apple.com/v/home/cz/images/shared/promos/ipad_pro_large_2x.jpg")
}
}@media only screen and (min-width: 1442px) {
	.promo-ipad-pro {
	background-size:640px 200px;
	background-repeat:no-repeat;
	background-image:url("http://images.apple.com/v/home/cz/images/shared/promos/ipad_pro_xlarge.jpg")
}
}@media only screen and (min-width: 1442px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width: 1442px) and (min-resolution: 1.5dppx), only screen and (min-width: 1442px) and (min-resolution: 144dpi) {
	.promo-ipad-pro {
	background-image:url("http://images.apple.com/v/home/cz/images/shared/promos/ipad_pro_xlarge_2x.jpg")
}
}@media only screen and (max-width: 1068px) {
	.promo-ipad-pro {
	background-size:640px 200px;
	background-repeat:no-repeat;
	background-image:url("http://images.apple.com/v/home/cz/images/shared/promos/ipad_pro_medium.jpg")
}
}@media only screen and (max-width: 1068px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px) and (min-resolution: 1.5dppx), only screen and (max-width: 1068px) and (min-resolution: 144dpi) {
	.promo-ipad-pro {
	background-image:url("http://images.apple.com/v/home/cz/images/shared/promos/ipad_pro_medium_2x.jpg")
}
}@media only screen and (max-width: 735px) {
	.promo-ipad-pro {
	background-size:736px 200px;
	background-repeat:no-repeat;
	background-image:url("http://images.apple.com/v/home/cz/images/shared/promos/ipad_pro_small.jpg")
}
}@media only screen and (max-width: 735px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 735px) and (min-resolution: 1.5dppx), only screen and (max-width: 735px) and (min-resolution: 144dpi) {
	.promo-ipad-pro {
	background-image:url("http://images.apple.com/v/home/cz/images/shared/promos/ipad_pro_small_2x.jpg")
}
}

/* 第四个宽屏 */
.promo-iphone-upgrade {
  background-size: 360px 200px;
  background-repeat: no-repeat;
  background-image: url("http://images.apple.com/cn/home/images/promos/iphone_upgrade_large.jpg");
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  .promo-iphone-upgrade {
    background-image: url("http://images.apple.com/cn/home/images/promos/iphone_upgrade_large_2x.jpg");
  }
}

@media only screen and (min-width: 1442px) {
  .promo-iphone-upgrade {
    background-size: 640px 200px;
    background-repeat: no-repeat;
    background-image: url("http://images.apple.com/cn/home/images/promos/iphone_upgrade_xlarge.jpg");
  }
}

@media only screen and (min-width: 1442px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width: 1442px) and (min-resolution: 1.5dppx), only screen and (min-width: 1442px) and (min-resolution: 144dpi) {
  .promo-iphone-upgrade {
    background-image: url("http://images.apple.com/cn/home/images/promos/iphone_upgrade_xlarge_2x.jpg");
  }
}

@media only screen and (max-width: 1068px) {
  .promo-iphone-upgrade {
    background-size: 640px 200px;
    background-repeat: no-repeat;
    background-image: url("http://images.apple.com/cn/home/images/promos/iphone_upgrade_medium.jpg");
  }
}

@media only screen and (max-width: 1068px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px) and (min-resolution: 1.5dppx), only screen and (max-width: 1068px) and (min-resolution: 144dpi) {
  .promo-iphone-upgrade {
    background-image: url("http://images.apple.com/cn/home/images/promos/iphone_upgrade_medium_2x.jpg");
  }
}

@media only screen and (max-width: 735px) {
  .promo-iphone-upgrade {
    background-size: 736px 200px;
    background-repeat: no-repeat;
    background-image: url("http://images.apple.com/cn/home/images/promos/iphone_upgrade_small.jpg");
  }
}

@media only screen and (max-width: 735px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 735px) and (min-resolution: 1.5dppx), only screen and (max-width: 735px) and (min-resolution: 144dpi) {
  .promo-iphone-upgrade {
    background-image: url("http://images.apple.com/cn/home/images/promos/iphone_upgrade_small_2x.jpg");
  }
}

html.ie8 .promo-iphone-upgrade {
    background-size: 640px 200px;
    background-repeat: no-repeat;
    background-image: url("http://images.apple.com/cn/home/images/promos/iphone_upgrade_medium.jpg");
    height: 200px;
    font-size: 0
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    html.ie8 .promo-iphone-upgrade {
        background-image: url("http://images.apple.com/cn/home/images/promos/iphone_upgrade_medium_2x.jpg")
    }
}


本文为3YL原创,转载无需联系,但请注明来自labisart.com。

原创文章不易，如果觉得有帮助，可打赏或点击右侧广告支持：

查看打赏记录

发表评论请遵守党国法律！后台审核后方可显示！
  • 最新评论
  • 总共0条评论
  • Blog v1.1© 2024 labisart.com 版权所有 | 联系：labartwork@163.com