[散修弟子]CSS-2081|2016年08月24日的日报-技能树.IT修真院

发表于： 2016-08-24 21:05:20

3 1135

很多图！

因为自己在task3上花了很多时间，一直做不到想要的自适应效果，最后好像勉强做了一个四不像==！整理一下，各位大神多多指教啊

先看效果

电脑

原版（图1） F12截屏1 640*1008 F12截屏2

手机自适应截屏1微信（竖）手机自适应截屏2自带浏览器（竖）手机自适应截屏3UC浏览器（竖）

手机自适应截屏4自带浏览器（横）

F12其他

【前天、昨天和今天完成的事情】

1.死磕task3 效果达成70%

2.域名、虚机备案，task3严重delay！

【明天计划的事情】

task 4，作死

【遇到的问题】

1.刚开始用ps cs6切图有问题，换了cc 2015版本，主要摸索：切图，量测

2.em/rem/px、%、vw、vh、各种居中问题、letter-spacing（区别word-spacing）、清除浮动（clear）等等基础问题

3.翻来覆去，自己做的task3的效果太差，改改改

4.UC浏览器浏览完全失败！其他尺寸有的会出现竖方向滚动条，width小了下方图标会挤到一起，某些尺寸最下方文字不能对齐（文字怎么和图标等比例缩放呢），感觉文字的适应能力好弱啊，一定是目前手段太少了。。。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>TASK3-魔镜</title>
    <meta name="viewport" content="user-scalable=0,initial-scale=1.0,width=device-width,min-width=240px">
    <style>
        img{
            max-width:100%;
            height:auto
        }
        #back{
            width:8.44%;
            margin-top:1.98%;
            margin-left:5.53%;
            margin-right:86.03%
        }
        .logo{
            text-align: center;
            margin:4vh auto 0 auto
        }
        .icon1{
            width:58.6%;
            margin:17.1vh auto 0 auto
        }
        .icon2{
            font-family:Arial;
            font-size: 22%;
            color:white;
        }
        .pgh {
            width: 71.88%;
            margin: 11.9vh auto 0 auto;
            font-family: 微软雅黑;
            font-size:2.68vh;
            letter-spacing:2px;
            line-height:1.5em;
            color: white;
        }


    </style>
</head>

<body style="background-color: #65cdd5">
<div id="back">
   <img src="./TASK3-img/1.png" style="width:3.38em;height:auto">
</div>
<div class="logo">
    <img src="./TASK3-img/2.png" style="width:29vw;height:auto">
</div>
<div class="pgh" >
    <div style="text-align: justify">
        葡萄藤轻游戏专注于桌游领域，提供在线杀人游戏，捉鬼，炸狼堡等多种聚会游戏，线上线下聚会桌游道具。
    </div>
</div>
<div class="icon1">
   <img src="./TASK3-img/3.png" style="width:auto;max-width: 60%;height:8.3vh;float:left">
   <img src="./TASK3-img/4.png" style="width:auto;max-width: 60%;height:8.3vh;float:right">
   <ul style="clear:both;margin:0 auto"></ul>
   <span style="float:left;font-size:8.3vh;line-height:1px ">
       <span class="icon2" >290560933</span>
   </span>
   <span style="float:right;font-size:8.3vh;line-height:1px ">
       <span class="icon2">BJPTTeng</span>
   </span>
   <ul style="clear:both;margin:0 auto"></ul>
</div>
</body>

</html>