适配不同屏幕的高度

资深bug创意
  • 420

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

回复
阅读 4.4k
5 个回答

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

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

<!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>

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

Logan_Guo
  • 5
新手上路,请多包涵

像素密度比例关系

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

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

启动项图标 (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/

宣传栏