关于单独开发平板app，(apiCloud打包编译成ios,android),的一些疑问，如下图_JavaScript_论坛

关于单独开发平板app，(apiCloud打包编译成ios,android),的一些疑问，如下图

sk***e4 分类：JavaScript 人气：1150 回帖：1 发布于6年前收藏

问题

如何根据设计图单独开发平板app，(使用apiCloud，把网页打包编译成App)

问题说明

项目是首先写好html,然后由apiCloud封装打包编译成ios,android的App,现在手机版本差不多已经开发完成了，
现在要单独开发平板app，项目是一样的
手机版本的设计图宽度是750,我使用rem单位,如下代码，完美适配，只要把对应的宽度/100就可以了，如750px=0.75rem
```
    <script>
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
    </script>
```

我的问题

怎么适配平板

平板设计图的宽度是2048px,按照bootstrap的适配说明平板最大宽度是992px,最小宽度是768px

我的样式

最大宽度是992px,最小宽度是768px的网页中会执行下面的样式，但是平板设计图宽度是2048,怎么换算呢

我的部分示例代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/reset.css"/>
    <style>
        @media (min-width: 768px) and (max-width: 992px) {
            body{
                font-size: 12px;
            }
            .header{
                display: flex;
                height: 0.9rem;
                background-color: #fbe80b;
            }
            .header .header-left {
                flex:  0 0 2.05rem;
                width: 2.05rem;
            }
            .header .header-left img{
                width: 0.5rem;
                height: 0.5rem;
                margin-left: 1.45rem;
                margin-top: 0.2rem;
                border-radius: 50%;
            }
            .header .header-center{
                flex: 1;
                text-align: center;
                line-height: 0.9rem;
                font-size: 24px;
            }
            .header .header-right{
                flex:  0 0 2.05rem;
                width: 2.05rem;
            }
            .header .header-right img{
                display: inline-block;
                width: 0.26rem;
                height: 0.19rem;
                margin-top: 0.35rem;
            }
            .header .header-right p{
                display: inline-block;
                line-height: 0.9rem;
                font-size: 18px;
            }
            .main{
                display: flex;
            }
            .main .main-left{
                flex: 2.85rem;
                width: 2.85rem;
                border-right: 1px solid #d7d4d4;
            }
            .main .main-right{
                flex: 1;
            }
        }
    </style>
    <script>
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
    </script>
</head>
<body>
<header class="header">
    <div class="header-left">
        <img src="images/headerPerson.png" alt="person"/>
    </div>
    <div class="header-center">课后作业</div>
    <div class="header-right">
        <img src="images/goDwon.png" alt="goDown"/>
        <p>全部科目</p>
    </div>
</header>
<section class="main">
    <div class="main-left">sfsd</div>
    <div class="main-right"></div>
</section>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

apiCloud打包编译看我有ipad,没有安卓平板

手机设计图(width:750px)

平板设计图(width:2048px)

标签：android ios javascript java php

讨论这个帖子（1）垃圾回帖将一律封号处理……

Lv5 码农

pa***in 技术总监 6年前#1

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取