手机页面上如何显示图片。

Question

想要问一个问题 对于这种界面一般怎么做。
1.分数肯定是动态的。并且就想让其显示在某个位置上。是要使用position:absolute
2."1206510"也希望显示在某个位置上。这时候应该如何切图 应该如何编写
3.可能问题编写的也不点清楚。但对于图片在手机上显示的时候比较模糊 有没有这部分的文章。

Answer 1

• 不还是div相叠么。。。

• 对于那几个1206501这几个数字，叫ui做好雪碧图，用background-image切割显示比较好。然后就是简单地使用display:inline-block,利用父级text-align使其居中，或是使用flexbox布局，直接简单粗暴居中。。。

• 手机显示图片模糊，说到底还是图片分辨率的问题

Answer 2

I：
方法1： 分数动态，你就要假定一个最大值，然后图片就按照这个最大值时的宽度去设置
方法2： 若是要搞的夸张一点的话，那就通过 js 计算分数的长度，动态设置 div 的宽度 ， 高度 ， line-height
II： 切图我是不会的，编写的话：

总体框架：
  <section class='score'>
      // 设置标题
      <header class='header'>
        // 背景图片
        <div class='tit_bgi'><img src='' class='img' /></div>
        // 标题内容区域
        <div class='tit_txt'>
          // 主标题
          <h2 class='main_tit'>本轮总分</h2>
          // 副标题
          <h5 class='sub_tit'>xxxxxxxxx</h5>
        </div>
      </header>
      // 设置分数
      <div class='score'>
        // 背景图片
        <div class='bgi'><img src='' class='img' /></div>
        // 历史最高 啊什么的等级
        <div class='rank'><img src='' class='img' /></div>
        // SSS 评分
        <div class='level'><img src='' class='img'></div>
        // 分数
        <div class='points'>1206501</div>
      </div>
      // 内容区域
      <div class='con'>
        .....
      </div>
  </section>

  

III. 手机上模糊，若是专门做手机上的网页，那就得按照手机的尺寸来做图片，不然，高清大图，被缩小后，只能是模糊的...