Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
400 views
in Technique[技术] by (71.8m points)

求助这个网页怎么实现自适应?

请教各位这个页面怎么实现让它在不同的手机端自适应屏幕去显示呢?

<html>
 <head></head>
 <body>

  <div class="wraper" style="width: 660px; height: 880px; position: absolute; left:0px; top:0px; overflow: hidden; ">
   <div class="text" style="width: 660px; height: 880px; position: absolute; left:0px; top:0px;">
    <div>
     <style type="text/css">.fs-2146a648-4 {font-size:17px; font-family:'Microsoft Yahei';  color:#28363e; position:absolute;} .fs-2146a648-a {font-size:17px; font-family:Arial;  color:#28363e; position:absolute;} .fs-2146a648-0 {font-size:26px; font-family:'Microsoft Yahei'; font-weight: 500; color:#28363e; position:absolute;} </style>
     <span class="fs-2146a648-4" style="left:147px; bottom:483px; ">。</span>
     <span class="fs-2146a648-4" style="left:148px; bottom:513px; ">东</span>
     <span class="fs-2146a648-4" style="left:79px; bottom:649px; ">:</span>
     <span class="fs-2146a648-4" style="left:62px; bottom:649px; ">版</span>
     <span class="fs-2146a648-4" style="left:442px; bottom:513px; ">P</span>
     <span class="fs-2146a648-a" style="left:328px; bottom:435px; "> </span>
     <span class="fs-2146a648-4" style="left:209px; bottom:708px; ">分</span>
     <span class="fs-2146a648-4" style="left:226px; bottom:708px; ">类</span>
     <span class="fs-2146a648-4" style="left:130px; bottom:708px; ">用</span>
     <span class="fs-2146a648-a" style="left:119px; bottom:649px; ">g</span>
     <span class="fs-2146a648-a" style="left:100px; bottom:561px; ">9</span>
     <span class="fs-2146a648-4" style="left:130px; bottom:619px; ">江</span>
     <span class="fs-2146a648-4" style="left:321px; bottom:513px; ">公</span>
     <span class="fs-2146a648-4" style="left:79px; bottom:590px; ">时</span>
     <span class="fs-2146a648-4" style="left:580px; bottom:513px; ">限</span>
     <span class="fs-2146a648-a" style="left:172px; bottom:561px; ">5</span>
     <span class="fs-2146a648-4" style="left:252px; bottom:513px; ">传</span>
     <span class="fs-2146a648-a" style="left:183px; bottom:708px; ">0</span>
     <span class="fs-2146a648-4" style="left:304px; bottom:513px; ">限</span>
     <span class="fs-2146a648-4" style="left:390px; bottom:513px; ">北</span>
     <span class="fs-2146a648-4" style="left:62px; bottom:678px; ">者</span>
     <span class="fs-2146a648-4" style="left:181px; bottom:619px; ">出</span>
     <span class="fs-2146a648-4" style="left:113px; bottom:678px; ">敏</span>
     <span class="fs-2146a648-4" style="left:192px; bottom:708px; ">词</span>
     <span class="fs-2146a648-4" style="left:45px; bottom:513px; ">本</span>
     <span class="fs-2146a648-a" style="left:404px; bottom:435px; ">&middot;</span>
     <span class="fs-2146a648-a" style="left:251px; bottom:435px; ">&middot;</span>
     <span class="fs-2146a648-a" style="left:189px; bottom:590px; ">-</span>
     <span class="fs-2146a648-4" style="left:528px; bottom:513px; ">商</span>
     <span class="fs-2146a648-a" style="left:139px; bottom:649px; ">t</span>
     <span class="fs-2146a648-a" style="left:60px; bottom:561px; ">B</span>
     <span class="fs-2146a648-a" style="left:180px; bottom:590px; ">7</span>
     <span class="fs-2146a648-4" style="left:147px; bottom:619px; ">教</span>
     <span class="fs-2146a648-a" style="left:136px; bottom:561px; ">5</span>
     <span class="fs-2146a648-4" style="left:96px; bottom:513px; ">北</span>
     <span class="fs-2146a648-a" style="left:107px; bottom:649px; ">i</span>
     <span class="fs-2146a648-a" style="left:190px; bottom:561px; ">4</span>
     <span class="fs-2146a648-4" style="left:113px; bottom:619px; ">浙</span>
     <span class="fs-2146a648-4" style="left:494px; bottom:513px; ">电</span>
     <span class="fs-2146a648-4" style="left:62px; bottom:619px; ">版</span>
     <span class="fs-2146a648-a" style="left:143px; bottom:649px; ">a</span>
     <span class="fs-2146a648-4" style="left:217px; bottom:513px; ">文</span>
     <span class="fs-2146a648-4" style="left:62px; bottom:513px; ">书</span>
     <span class="fs-2146a648-4" style="left:113px; bottom:483px; ">发</span>
     <span class="fs-2146a648-4" style="left:45px; bottom:649px; ">排</span>
     <span class="fs-2146a648-0" style="left:45px; bottom:754px; ">版</span>
     <span class="fs-2146a648-0" style="left:123px; bottom:754px; ">息</span>
     <span class="fs-2146a648-4" style="left:338px; bottom:513px; ">司</span>
     <span class="fs-2146a648-4" style="left:311px; bottom:435px; ">有</span>
     <span class="fs-2146a648-4" style="left:546px; bottom:513px; ">务</span>
     <span class="fs-2146a648-a" style="left:194px; bottom:590px; ">0</span>
     <span class="fs-2146a648-4" style="left:183px; bottom:513px; ">大</span>
     <span class="fs-2146a648-a" style="left:166px; bottom:590px; ">-</span>
     <span class="fs-2146a648-4" style="left:407px; bottom:513px; ">京</span>
     <span class="fs-2146a648-4" style="left:131px; bottom:513px; ">新</span>
     <span class="fs-2146a648-a" style="left:118px; bottom:561px; ">8</span>
     <span class="fs-2146a648-4" style="left:269px; bottom:513px; ">播</span>
     <span class="fs-2146a648-a" style="left:400px; bottom:435px; "> </span>
     <span class="fs-2146a648-a" style="left:256px; bottom:435px; "> </span>
     <span class="fs-2146a648-a" style="left:109px; bottom:561px; ">7</span>
     <span class="fs-2146a648-4" style="left:332px; bottom:435px; ">侵</span>
     <span class="fs-2146a648-a" style="left:128px; bottom:649px; ">S</span>
     <span class="fs-2146a648-a" style="left:130px; bottom:590px; ">2</span>
     <span class="fs-2146a648-4" style="left:96px; bottom:483px; ">与</span>
     <span class="fs-2146a648-4" style="left:366px; bottom:435px; ">必</span>
     <span class="fs-2146a648-4" style="left:62px; bottom:590px; ">版</span>
     <span class="fs-2146a648-a" style="left:171px; bottom:590px; ">0</span>
     <span class="fs-2146a648-a" style="left:49px; bottom:561px; ">S</span>
     <span class="fs-2146a648-a" style="left:174px; bottom:708px; ">0</span>
     <span class="fs-2146a648-a" style="left:96px; bottom:649px; ">K</span>
     <span class="fs-2146a648-4" style="left:286px; bottom:513px; ">有</span>
     <span class="fs-2146a648-4" style="left:45px; bottom:590px; ">出</span>
     <span class="fs-2146a648-4" style="left:45px; bottom:483px; ">司</span>
     <span class="fs-2146a648-4" style="left:598px; bottom:513px; ">公</span>
     <span class="fs-2146a648-a" style="left:208px; bottom:561px; ">1</span>
     <span class="fs-2146a648-4" style="left:79px; bottom:708px; ">:</span>
     <span class="fs-2146a648-a" style="left:409px; bottom:435px; "> </span>
     <span class="fs-2146a648-4" style="left:294px; bottom:435px; ">所</span>
     <span class="fs-2146a648-4" style="left:356px; bottom:513px; ">授</span>
     <span class="fs-2146a648-4" style="left:113px; bottom:708px; ">实</span>
     <span class="fs-2146a648-4" style="left:45px; bottom:619px; ">出</span>
     <span class="fs-2146a648-4" style="left:425px; bottom:513px; ">P</span>
     <span class="fs-2146a648-4" style="left:130px; bottom:483px; ">行</span>
     <span class="fs-2146a648-4" style="left:62px; bottom:483px; ">制</span>
     <span class="fs-2146a648-a" style="left:157px; bottom:590px; ">7</span>
     <span class="fs-2146a648-4" style="left:413px; bottom:435px; ">—</span>
     <span class="fs-2146a648-4" style="left:79px; bottom:483px; ">作</span>
     <span class="fs-2146a648-a" style="left:181px; bottom:561px; ">4</span>
     <span class="fs-2146a648-4" style="left:113px; bottom:590px; ">:</span>
     <span class="fs-2146a648-4" style="left:96px; bottom:708px; ">超</span>
     <span class="fs-2146a648-4" style="left:260px; bottom:708px; ">记</span>
     <span class="fs-2146a648-4" style="left:277px; bottom:435px; ">权</span>
     <span class="fs-2146a648-a" style="left:127px; bottom:561px; ">7</span>
     <span class="fs-2146a648-4" style="left:229px; bottom:435px; ">—</span>
     <span class="fs-2146a648-4" style="left:45px; bottom:708px; ">书</span>
     <span class="fs-2146a648-4" style="left:62px; bottom:708px; ">名</span>
     <span class="fs-2146a648-4" style="left:200px; bottom:513px; ">愚</span>
     <span class="fs-2146a648-4" style="left:349px; bottom:435px; ">权</span>
     <span class="fs-2146a648-a" style="left:45px; bottom:561px; ">I</span>
     <span class="fs-2146a648-a" style="left:165px; bottom:708px; ">0</span>
     <span class="fs-2146a648-4" style="left:79px; bottom:513px; ">由</span>
     <span class="fs-2146a648-4" style="left:198px; bottom:619px; ">版</span>
     <span class="fs-2146a648-4" style="left:96px; bottom:590px; ">间</span>
     <span class="fs-2146a648-4" style="left:79px; bottom:619px; ">社</span>
     <span class="fs-2146a648-a" style="left:199px; bottom:561px; ">6</span>
     <span class="fs-2146a648-4" style="left:114px; bottom:513px; ">京</span>
     <span class="fs-2146a648-a" style="left:203px; bottom:590px; ">1</span>
     <span class="fs-2146a648-4" style="left:83px; bottom:561px; ">:</span>
     <span class="fs-2146a648-4" style="left:165px; bottom:513px; ">方</span>
     <span class="fs-2146a648-4" style="left:459px; bottom:513px; ">科</span>
     <span class="fs-2146a648-4" style="left:164px; bottom:619px; ">育</span>
     <span class="fs-2146a648-a" style="left:247px; bottom:435px; "> </span>
     <span class="fs-2146a648-4" style="left:243px; bottom:708px; ">速</span>
     <span class="fs-2146a648-0" style="left:97px; bottom:754px; ">信</span>
     <span class="fs-2146a648-a" style="left:152px; bottom:649px; ">r</span>
     <span class="fs-2146a648-4" style="left:260px; bottom:435px; ">版</span>
     <span class="fs-2146a648-4" style="left:477px; bottom:513px; ">文</span>
     <span class="fs-2146a648-a" style="left:71px; bottom:561px; ">N</span>
     <span class="fs-2146a648-a" style="left:147px; bottom:708px; ">1</span>
     <span class="fs-2146a648-a" style="left:145px; bottom:561px; ">5</span>
     <span class="fs-2146a648-a" style="left:156px; bottom:708px; ">5</span>
     <span class="fs-2146a648-a" style="left:163px; bottom:561px; ">6</span>
     <span class="fs-2146a648-4" style="left:45px; bottom:678px; ">作</span>
     <span class="fs-2146a648-4" style="left:235px; bottom:513px; ">化</span>
     <span class="fs-2146a648-0" style="left:71px; bottom:754px; ">权</span>
     <span class=

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

flexible.js 这个库应该适合你这种情况

示例代码:

 <head>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>
  </head>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...