html/css 总结项目之一 app端机械师2

在手机端方面所有的px需要换算成 rem

设计稿的宽度刚好是1080px 所以刚好除以100就可以了

手机端没有鼠标而且需要检查的时候才能转换成手机的尺寸

所以调试的东西更多每一个img都要设置不然缩小的时候会保持他本身的尺寸

在抠雪碧图的时候在放大的时候显示正常但是在缩小成iphoneX的时候就只会截到

左上角一点不知道怎么解决这个问题最后还是把雪碧图抠下来了

手机端图片还是比较多的所以需要排版定位精确

猫眼的官网是做的响应式在你检查的时候把尺寸缩小到一定值的时候

再按刷新他就会响应到当前尺寸的排版

我们是直接做的自适应

抠雪碧图可以使用ppt 剪切的功能即可抠到想要的图片

<!DOCTYPE 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>机械师2：复活 详情介绍</title>
    <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>
    <link rel="stylesheet" href="css/my-app-info.css">
</head>

<body>
    <header>
        <div class="back-share">
            <img class="fl" src="./img/arrows.png" alt="">
            <img class="fr" src="./img/share.png" alt="">
        </div>
        <div class="banner">
            <img src="./img/app_showing_02.png" alt="" class="jxs2-poster">
            <div class="info-main">
                <h1>机械师2：复活
                </h1>
                <h5>Mechanic:Resurrection</h5>
                <div class="star">
                    <img src="./img/movie_p_icon.png" alt=""> 9.0
                </div>
                <p>(7092评分)</p>
                <p>动作 犯罪
                    <img src="./img/app_movie_3d.png" alt="">
                </p>
                <p>美国 法国/97分钟</p>
                <p>2016-10-21大陆上映》 </p>
            </div>
        </div>
        <div class="two-bu">
            <div>
                <img src="./img/like_03.png" alt=""> 想看
            </div>
            <div>
                <img class="star-pf" src="./img/star.png" alt="">评分</div>
        </div>
    </header>
    <section>
        <p class="info-de">
            影片讲述了职业杀手亚瑟为解救爱人不得不完成一系列不可能的暗杀任务。在一 桩看似意外的事件中，亚瑟·毕索（杰森·斯坦森 饰）的红颜知己梅（杨紫琼 饰）请求亚瑟解救屡遭毒打的神秘女子吉娜（杰西卡·阿尔芭 饰），哪料向来对 爱情免疫的亚瑟，竟与吉娜坠入了爱河，但因此打破了他已远离是非五年风平浪
            静的生活。亚瑟以为自己早已和过去的杀手生涯告别，然而宿命难敌的他竟被人 暗中盯上，他的身世之谜也渐渐浮出水面。原来亚瑟年幼时和小伙伴们被军火商 抓去，难以忍受被训练杀人的他从军火商手中逃脱，而他的一位小伙伴克雷恩 （山姆·哈兹尔丁
            饰）长大后却成了军火商的接班人。像亚瑟这种高手想要全 身而退谈何容易，一个组织绑架了吉娜来要挟亚瑟，让他被迫完成三次不可能的 暗杀行动，深知组织残暴的亚瑟在成功暗杀了前两个目标之后，与第三个暗杀目 标麦克斯（汤米·李·琼斯
            饰）联手结成同盟，一同对付他们共同的敌人。
        </p>
        <div class="text-expand-bu">
            <img src="./img/movie_p_arrows.png" alt="">
        </div>
    </section>
    <div class="division">
    </div>
    <div class="con">
        <div class="module">
            <div class="mod-title">
                <h3>演职人员</h3>
                <a href="">全部》</a>
            </div>
            <div class="mod-content">
                <div class="actor1">
                    <div class="actor1-1">
                        导演
                    </div>
                    <img src="./img/resurgence.actor01_03.png" alt="">
                    <p>XXX</p>
                </div>
                <div class="actor2">
                    <div class="actor2-1">演员</div>
                    <div class="actor2-2">
                        <div class="actor2-2-1">
                            <img src="./img/resurgence.actor02_03.png" alt="">
                            <p class="name1">杰森·斯坦森</p>
                            <!-- <p class="m-name">饰 ：高刚</p> -->
                        </div>
                        <div class="actor2-2-1">
                            <img src="./img/resurgence.actor03_03.png" alt="">
                            <p class="name1">XXX</p>
                            <!-- <p class="m-name">饰 ：方新武</p> -->
                        </div>
                        <div class="actor2-2-1">
                            <img src="./img/resurgence.actor04_03.png" alt="">
                            <p class="name1">XXX</p>
                            <!-- <p class="m-name">饰 ：郭冰</p> -->
                        </div>
                        <div class="actor2-2-1">
                            <img src="./img/resurgence.actor03_03.png" alt="">
                            <p class="name1">XXX</p>
                            <!-- <p class="m-name">饰 ：特警队长</p> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <a class="footer" href="my-app-seats.html">
        立即购票
    </a>  
</body>

</html>

a {
  text-decoration: none;
}

.red {
  color: #db403b;
}

* {
  margin: 0;
  padding: 0;
  font-size: 0.5rem;
  color: #999999;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

header {
  height: 7.8rem;
  width: 100%;
  background-image: url(../img/app_showing_bg.png);
  background-size: cover;
  background-repeat: no-repeat;
}
header .back-share {
  width: 90%;
  margin: auto;
  height: 1.1rem;
}
header .back-share img {
  margin-top: 0.25rem;
  height: 0.62rem;
  object-fit: contain;
}
header .banner {
  width: 90%;
  height: 5.3rem;
  margin: auto;
}
header .banner .jxs2-poster {
  width: 34%;
  vertical-align: top;
  object-fit: cover;
  border: 0.03rem solid white;
}
header .banner .info-main {
  width: 60%;
  display: inline-block;
  height: 4.5rem;
}
header .banner .info-main h1 {
  font-size: 0.55rem;
  color: white;
}
header .banner .info-main h5 {
  font-size: 0.3rem;
  color: white;
}
header .banner .info-main .star {
  height: 0.85rem;
  color: #fec600;
  margin: 0.1rem 0;
  padding-top: 0.1rem;
  box-sizing: border-box;
}
header .banner .info-main .star img {
  height: 0.5rem;
  object-fit: contain;
}
header .banner .info-main p {
  margin-bottom: 0.1rem;
  font-size: 0.4rem;
}
header .banner .info-main p img {
  height: 0.4rem;
}
header .two-bu {
  width: 90%;
  margin: auto;
  display: flex;
  justify-content: space-between;
}
header .two-bu img {
  height: 0.4rem;
  object-fit: cover;
  vertical-align: text-middle;
}
header .two-bu .star-pf {
  margin-right: 0.1rem;
}
header .two-bu div {
  border-radius: 10px;
  text-align: center;
  line-height: 1.05rem;
  color: white;
  background-color: #615a52;
  width: 45%;
  height: 1.05rem;
  border: 0.01rem solid #807772;
}

section {
  margin-top: 0.4rem;
  padding: 0 0.3rem;
}
section .info-de {
  height: 1.95rem;
  overflow: hidden;
  font-size: 0.47rem;
  color: #212121;
}
section .info-de:hover {
  height: 12rem;
}
section .text-expand-bu {
  color: #aaa;
  text-align: center;
  height: 0.44rem;
}
section .text-expand-bu img {
  vertical-align: middle;
  width: 0.3rem;
}

.division {
  height: 0.5rem;
  width: 100%;
  background-color: #f5f5f5;
}

.con {
  margin-bottom: 1.8rem;
}
.con .module {
  margin-bottom: 0.6rem;
  width: 100%;
}
.con .module .mod-title {
  margin-top: 0.4rem;
}
.con .module .mod-title h3 {
  display: inline-block;
  margin: 0;
  padding: 0;
  font-weight: 400;
  font-size: 0.40rem;
  color: #333;
  line-height: 0.40rem;
}
.con .module .mod-title h3:before {
  float: left;
  content: "";
  width: 0.04rem;
  height: 0.18rem;
  margin-right: 0.06rem;
  background-color: #ef4238;
}
.con .module .mod-title a {
  float: right;
  color: #212121;
  font-size: 0.30rem;
  margin-top: 0.15rem;
}
.con .module .mod-content {
  margin-top: 0.2rem;
  color: #212121;
}
.con .module .mod-content span {
  font-size: 0.30rem;
  line-height: 0.6rem;
}
.con .module .mod-content .actor1 {
  width: 18%;
  height: 2.0rem;
  float: left;
  object-fit: cover;
}
.con .module .mod-content .actor1 .actor1-1 {
  margin-bottom: 0.2rem;
}
.con .module .mod-content .actor1 img {
  width: 100%;
  object-fit: cover;
}
.con .module .mod-content .actor1 p {
  text-align: center;
  margin-top: 0.12rem;
}
.con .module .mod-content .actor2 {
  width: 78%;
  height: 2.42rem;
  margin-left: 1%;
  float: left;
}
.con .module .mod-content .actor2 .actor2-1 {
  margin-bottom: 0.18rem;
}
.con .module .mod-content .actor2 .actor2-2 .actor2-2-1 {
  width: 23%;
  float: left;
  margin-right: 1.5%;
  height: 1.8rem;
}
.con .module .mod-content .actor2 .actor2-2 .actor2-2-1 img {
  width: 100%;
  object-fit: cover;
}
.con .module .mod-content .actor2 .actor2-2 .actor2-2-1 .name1 {
  text-align: center;
  margin-top: 0.12rem;
}
.con .module .mod-content .actor2 .actor2-2 .actor2-2-1 .m-name {
  text-align: center;
  color: #999999;
  margin-top: 0.04rem;
  font-size: 0.30rem;
}

.footer {
  display: block;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 1.5rem;
  background-color: #db403b;
  font-size: 0.5rem;
  text-align: center;
  line-height: 1.5rem;
  color: white;
}

html/css 总结项目之一 app端 机械师2

html/css 总结项目之一 app端机械师2