zhaokui
zhaokui
  • 发布:2017-08-02 10:30
  • 更新:2017-08-02 10:31
  • 阅读:1221

多屏幕适配问题

分类:MUI

各位大神,帮忙看看,我的代码是哪里出现错误了吗 ? 怎么不能在不同的屏幕上进行适配啊。。谢谢啦。。

<!doctype html>
<html>

<head>  

    <meta charset="utf-8">  
    <title>Hello MUI</title>  
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <!--<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />-->  
    <link href="../../css/mui.min.css" rel="stylesheet" />  

</head>  

<body>  
    <header class="mui-bar mui-bar-nav">  
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
        <h1 class="mui-title">推广</h1>  
    </header>  
    <div class="mui-content" id="daiyanBeforeDiv">  
        <img style="width: 100%;" src="../../img/me/daiyanBefore.png"/>  
          <div id="float" style="height: 280px;top: 50%;width: 45%;left: 40%;background: ivory;position: absolute;">  
            <div id="" style="background: honeydew;width: 100%;height: 55px;">  
                <button style="border-radius: 10px;height: 20px;line-height: 18px;padding-top: 0px;float: right;" type="button" class="mui-btn mui-btn-yellow info">购买</button>  
            <span class="info" style="display: block;float: left;padding-top: 28px;height: 20px;line-height: 20px;font-size: 13px;">123</span>  
           </div>  
            <div id="" style="background: greenyellow;width: 100%;height: 55px;margin-top: 20px;">  
                <button style="border-radius: 10px;height: 20px;line-height: 18px;padding-top:0px;float: right;" type="button" class="mui-btn mui-btn-yellow info">立即申请</button>  
            <span class="info" style="display: block;float: left;padding-top: 28px;height: 20px;line-height: 20px;font-size: 13px;">456</span>  
           </div>  
            <div id="" style="background: honeydew;width: 100%;height: 55px;margin-top: 30px;">  
                <button style="border-radius: 10px;height: 20px;line-height: 18px;padding-top: 0px;float: right;" type="button" class="mui-btn mui-btn-yellow info">立即申请</button>  
            <span class="info" style="display: block;float: left;padding-top: 28px;height: 20px;line-height: 20px;font-size: 13px;">123</span>  
            </div>  
        </div>  
    </div>  
    <script src="../../js/mui.min.js"></script>  
    <script type="text/javascript">  
        mui.init();  
    </script>  
</body>  

</html>

2017-08-02 10:30 负责人:无 分享
已邀请:
zhaokui

zhaokui (作者) - 一个热衷新技术的苦逼程序员

<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--<meta charset="UTF-8">  
    <title></title>-->  
    <!--<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />-->  
    <link href="../../css/mui.min.css" rel="stylesheet" />  
    <link rel="stylesheet" type="text/css" href="../../fromework/iconfont/iconfont.css"/>  

    <style type="text/css">  
        /*#daiyanBeforeDiv{}  
        #daiyanBeforeDiv img{width: 100%;}  
        #daiyanBeforeDiv #float{position: absolute;}*/  

    </style>  
</head>  

<body>  
    <header class="mui-bar mui-bar-nav">  
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
        <h1 class="mui-title">代言推广</h1>  
        <span style="margin-top: 8px;" class="iconfont icon-dianhua1 mui-pull-right info"></span>  
    </header>  
    <div class="mui-content" id="daiyanBeforeDiv">  
        <img style="width: 100%;" src="../../img/me/daiyanBefore.png"/>  

        <div id="float" style="height: 280px;top: 50%;width: 45%;left: 40%;background: ivory;position: absolute;">  
            <div id="" style="background: honeydew;width: 100%;height: 55px;">  
                <button style="border-radius: 10px;height: 20px;line-height: 18px;padding-top: 0px;float: right;" type="button" class="mui-btn mui-btn-yellow info">购买</button>  
            <span class="info" style="display: block;float: left;padding-top: 28px;height: 20px;line-height: 20px;font-size: 13px;">123</span>  

            </div>  
            <div id="" style="background: greenyellow;width: 100%;height: 55px;margin-top: 20px;">  
                <button style="border-radius: 10px;height: 20px;line-height: 18px;padding-top:0px;float: right;" type="button" class="mui-btn mui-btn-yellow info">立即申请</button>  
            <span class="info" style="display: block;float: left;padding-top: 28px;height: 20px;line-height: 20px;font-size: 13px;">456</span>  

            </div>  
            <div id="" style="background: honeydew;width: 100%;height: 55px;margin-top: 30px;">  
                <button style="border-radius: 10px;height: 20px;line-height: 18px;padding-top: 0px;float: right;" type="button" class="mui-btn mui-btn-yellow info">立即申请</button>  
            <span class="info" style="display: block;float: left;padding-top: 28px;height: 20px;line-height: 20px;font-size: 13px;">123</span>  
            </div>  

        </div>  

    </div>

该问题目前已经被锁定, 无法添加新回复