search

Home  >  Q&A  >  body text

javascript - 适配不同屏幕的高度

项目需求 网页高度必须一屏， 适配不同屏幕的高度，各个模块的之间的间距随着各种屏幕高度的大小变化而变化，求 相关案例的可以参考一下，或者实现思路。

迷茫迷茫2902 days ago578

reply all(5)I'll reply

  • 怪我咯

    怪我咯2017-04-10 14:55:10

    宽度高度不要写死，用百分比来实现，自适应思想

    reply
    0
  • 巴扎黑

    巴扎黑2017-04-10 14:55:10

    用媒体查询为不同屏幕高度设置不同的css。

    reply
    0
  • 迷茫

    迷茫2017-04-10 14:55:10

    <!DOCTYPE html>
<title>hei</title>

<style>
html {
    height: 100%;
}

body {
    margin: 0;
    height: 100%;
    position: relative;
}

section {
    height: 33.333%;
    background: #ddd;
}

section::after {
    content: '\200b';
    display: block;
    height: 5%;
    background: #fff;
}

section:first-child::after {
    display: none;
}
</style>

<section></section>
<section></section>
<section></section>

    reply
    0
  • 阿神

    阿神2017-04-10 14:55:10

    你可以参考下semantic的关于responsive的间隔处理方式

    reply
    0
  • 大家讲道理

    大家讲道理2017-04-10 14:55:10

    像素密度比例关系

    一般需要五份不同尺寸的图标来适配不同的屏幕分辨率，系统可以自动根据分辨率的图标来创建低分辨率的图标。

    尺寸 dpi 倍数
    mdpi (Baseline) 160 dpi 1×
    hdpi 240 dpi 1.5×
    xhdpi 320 dpi 2×
    xxhdpi 490 dpi 3×
    xxxhdpi 640 dpi 4×

    启动项图标 (Launcher icons)

    Sizes (px) Format and naming
    48 × 48 (mdpi) .png
    72 × 72 (hdpi)
    96 × 96 (xhdpi)
    144 × 144 (xxhdpi)
    192 × 192 (xxxhdpi)
    512 × 512 (Google Play store)

    注意:制作一个立体的，有轻微的透视感，能使用户感知一些深度的图标

    Action bar, 对话框 & Tab页图标

    Sizes (px) Format and naming
    24 × 24 area in 32 × 32 (mdpi) .png
    36 × 36 area in 48 × 48 (hdpi)
    48 × 48 area in 64 × 64 (xhdpi)
    72 × 72 area in 96 × 96 (xxhdpi)
    96 × 96 area in 128 × 128 (xxxhdpi)

    注意 第一列数字是图标图案的大小，第二列是图标文件大小

    上下文图标 (Small Contextual Icons)

    Sizes (px) Format and naming
    16 × 16 (mdpi) .png
    24 × 24 (hdpi)
    32 × 32 (xhdpi)
    48 × 48 (xxhdpi)
    64 × 64 (xxxhdpi)

    注意 小图标用于表面动作或展示为特定的状态。例如，在Gmail应用程序，每封邮件都有邮件标记为重要的一个星形图标。

    通知栏图标 (Notification icons)

    Sizes (px) Format and naming
    22 × 22 area in 24 × 24 (mdpi) .png
    33 × 33 area in 36 × 36 (hdpi)
    44 × 44 area in 48 × 48 (xhdpi)
    66 × 66 area in 72 × 72 (xxhdpi)
    88 × 88 area in 96 × 96 (xxxhdpi)

    注意这些都是用在状态栏来表示的应用程序的通知。他们应该是白色，扁平化的效果。

    See also http://iconhandbook.co.uk/reference/chart/android/

    reply
    0
  • Cancelreply