communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
javascript - 布局中如何实现如下需求（内有图示）？
PHPz
PHPz 2017-04-11 10:03:47
0
3
342

我们在做一个Web App，如所示，产品需求如下：
1.在14寸的屏幕下，不管用户电脑是1366768的像素还是19201080，甚至更高的像素。左侧灰色部分（切换用的tab）与右侧白色部分的比例都是一样的。红色卡片（具体内容）的“感官”效果也是一样的。如左侧上下两个图的对比所示。
2.在分辨率一样的情况下（如下面左右两图的图示），不管用户的电脑屏幕是多大，左侧灰色部分的“宽度”是一致的，右侧白色部分占满省下的空间。红色部分保持大小一致。
3.文字部分也要求在各种情况下“看起来”大小一致。

请问这种布局要求该怎么实现？
多谢。

PHPz
PHPz

学习是最好的投资！

répondre à tous(3)
Ty80
Ty802017-04-11 10:05:47 3 plancher

高分屏的用户会对页面进行缩放以获得合适的阅读体验，所以如果你硬是做成看起来一样大，经过缩放之后尺寸又会发生变化

Comme +0
Ajouter une réponse
大家讲道理
大家讲道理2017-04-11 10:05:47 2 plancher

老式实现（嵌套一层，滚动基于#content）;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <!-- ====================================================================================================================== 手持设备优化 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
        <!-- =========================================================== 老式Viewport 黑莓 -->
        <meta name="HandheldFriendly" content="true">

        <style>
            body{
                margin:0;
            }
            /*  //==================== 老式实现 */
            #sidebar{
                position:fixed;
                left:0;
                height:100%;
                width:5rem;
                background:red;
            }
            #content{
                display: block;
                position:absolute;
                width:100%;
                height:100%;
                box-sizing:border-box;
                padding-left:5rem;
                background:blue;
            }
        </style>
    </head>
        <!-- //==================== 老式实现 -->
        <p id="content">
            <p id="sidebar">
                sidebar
            </p>
            <p class="content">
                content
            </p>
        </p>
    </body>
</html>

略新实现：（少嵌套一层，滚动基于body）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <!-- ====================================================================================================================== 手持设备优化 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
        <!-- =========================================================== 老式Viewport 黑莓 -->
        <meta name="HandheldFriendly" content="true">

        <style>
            body{
                margin:0;
            }
            body{
                display: box;
                display: flex;
            }
            #sidebar{
                position:fixed;
                left:0;
                height:100%;
                max-width:5rem;
                min-width:5rem;
                background:red;
            }
            #content{
                height:100%;
                flex:1;
                background:blue;
            }
        </style>
    </head>
        <p id="sidebar">
            sidebar
        </p>
        <p id="content">
            content
        </p>
    </body>
</html>

至于右侧响应式布局不是根据分辨率而且根据物理屏幕大小，请使用下面的JS取得屏幕PPI后，依据其分辨率的比值，获得该匹配屏幕大小的CSS即可；

html

<p id="ppitest" style="width:1in;visible:hidden;padding:0px"></p>

js

screenPPI = document.getElementById('ppitest').offsetWidth;
Comme +0
Ajouter une réponse
洪涛
洪涛2017-04-11 10:05:47 1 plancher

bootstrap栅格系统带你飞，，，

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal