iphonex为模板的自适应

HTML代码

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./css/index.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script>
!(function (win, doc) {
function setFontSize() {
var winWidth = window.innerWidth;
doc.documentElement.style.fontSize = (winWidth / 1080) * 100 + 'px';
}
var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
var timer = null;
win.addEventListener(evt, function () {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}, false);
win.addEventListener("pageshow", function (e) {
if (e.persisted) {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}
}, false);
//初始化
setFontSize();
}(window, document));
</script>
</head>
<body>
<div class="title">
<div class="search">
<div class="search-1"><img src="waiting_search.png" alt=""></div>
<form action="">
<input type="text" placeholder="找影视剧,找人,影院">
</form>
</div>
</div>

<div class="daoh">
<div class="tb">
<img src="find_icon01.png" alt="">
<p>今日TOP10</p>
</div>
<div class="tb">
<img src="find_icon02.png" alt="">
<p>影视快讯</p>
</div>
<div class="tb">
<img src="find_icon03.png" alt="">
<p>好片推荐</p>
</div>
<div class="tb">
<img src="find_icon04.png" alt="">
<p>预告片速递</p>
</div>
<div class="tb">
<img src="find_icon05.png" alt="">
<p>大咖来了</p>
</div>
<div class="tb">
<img src="find_icon06.png" alt="">
<p>美图</p>
</div>
<div class="tb">
<img src="find_icon07.png" alt="">
<p>周边商城</p>
</div>
<div class="tb">
<img src="find_icon08.png" alt="">
<p>实时票房</p>
</div>
</div>


<div class="day">
<span>今天</span>
</div>


<div class="box1">
<p>电影扫地僧:心理研究者谈《惊天破》犯罪心理学套路</p>
<div class="pic">
<img src="app_discover_3_03.png" alt="">
<img src="app_discover_5_03.png" alt="">
<img src="app_discover_5_08_05.png" alt="">
</div>
<div class="zuozhe">
<span>电影扫地僧</span>
<img style="margin-left:4.5rem;" src="view.png" alt="">
<span>1875</span>
<img src="消息.png" alt="">
<span>6131</span>
</div>
</div>

<div class="box2">
<img style="height:3.4rem" src="app_discover_3_03.png" alt="">
<div class="box21">
<p>《全世界》超7.86亿,闯国产爱情电影票房新纪录</p>
<span>猫眼资讯</span>
<img style="margin-left:2rem;" src="view.png" alt="">
<span>1024</span>
<img src="消息.png" alt="">
<span>13</span>
</div>
</div>

<div class="box2">
<img style="height:3.4rem" src="app_discover_11_03.png" alt="">
<div class="box21">
<p>王菲有望献综艺首秀,节目记录演唱会诞生你过程</p>
<span>影讯速报</span>
<img style="margin-left:2rem;" src="view.png" alt="">
<span>55</span>
<img src="消息.png" alt="">
<span>1</span>
</div>
</div>


<div class="box1">
<p>能写满分作文的明星,除了胡歌,还有王凯董子健吴秀波</p>
<div class="pic">
<img src="app_discover_4_03.png" alt="">
<img src="app_discover_4_05.png" alt="">
<img src="app_discover_5_07.png" alt="">
</div>
<div class="zuozhe">
<span>毒药</span>
<img style="margin-left:4.5rem;" src="view.png" alt="">
<span>134</span>
<img src="消息.png" alt="">
<span>0</span>
</div>
</div>


<div class="box1">
<p>今年最棒的韩国片在豆瓣只有5分,这绝对是千古奇冤</p>
<div class="pic">
<img src="app_discover_4_12.png" alt="">
<img src="app_discover_4_13.png" alt="">
<img src="app_discover_4_14.png" alt="">
</div>
<div class="zuozhe">
<span>虹膜</span>
<img style="margin-left:4.5rem;" src="view.png" alt="">
<span>226</span>
<img src="消息.png" alt="">
<span>0</span>
</div>
</div>


<div class="box1">
<p>张嘉佳是要拿这部片子来谋害王家卫和梁朝伟吗?</p>
<div class="pic">
<img src="app_discover_4_05_033_03.png" alt="">
<img src="app_discover_11_06.png" alt="">
<img src="app_discover_11_08.png" alt="">
</div>
<div class="zuozhe">
<span>毒药</span>
<img style="margin-left:4.5rem;" src="view.png" alt="">
<span>185</span>
<img src="消息.png" alt="">
<span>0</span>
</div>
</div>




<div class="box2">
<img style="height:3.4rem" src="app_discover_4_07.png" alt="">
<div class="box21">
<p>刘强东朋友圈发飙:谁再提“奶茶妹妹”我跟谁急</p>
<span>影讯速报</span>
<img style="margin-left:2rem;" src="view.png" alt="">
<span>700</span>
<img src="消息.png" alt="">
<span>10</span>
</div>
</div>



<div class="foot">
<div class="tb"><a href="../电影-待映/daiying.html"><img src="movie_icon_02.png" alt="">电影</a></div>
<div class="tb"><a href="../影院/index.html"><img src="cinema_icon_01.png" alt="">影院</a></div>
<div class="tb"><a href=""><img src="find_icon_02.png" alt="">发现</a></div>
<div class="tb"><a href="../我的/index.html"><img src="mine_icon_01.png" alt="">我的</a></div>
</div>
</body>
</html>

猜你喜欢

转载自www.cnblogs.com/gao2/p/11375349.html
今日推荐