项目需求 网页高度必须一屏， 适配不同屏幕的高度，各个模块的之间的间距随着各种屏幕高度的大小变化而变化，求 相关案例的可以参考一下，或者实现思路。
业精于勤，荒于嬉;行成于思，毁于随。
宽度高度不要写死，用百分比来实现，自适应思想
用媒体查询为不同屏幕高度设置不同的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的间隔处理方式
一般需要五份不同尺寸的图标来适配不同的屏幕分辨率，系统可以自动根据分辨率的图标来创建低分辨率的图标。
注意:制作一个立体的，有轻微的透视感，能使用户感知一些深度的图标
注意 第一列数字是图标图案的大小，第二列是图标文件大小
注意 小图标用于表面动作或展示为特定的状态。例如，在Gmail应用程序，每封邮件都有邮件标记为重要的一个星形图标。
注意这些都是用在状态栏来表示的应用程序的通知。他们应该是白色，扁平化的效果。
See also http://iconhandbook.co.uk/reference/chart/android/
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
宽度高度不要写死，用百分比来实现，自适应思想
用媒体查询为不同屏幕高度设置不同的css。
你可以参考下semantic的关于responsive的间隔处理方式
像素密度比例关系
一般需要五份不同尺寸的图标来适配不同的屏幕分辨率，系统可以自动根据分辨率的图标来创建低分辨率的图标。
启动项图标 (Launcher icons)
注意:制作一个立体的，有轻微的透视感，能使用户感知一些深度的图标
Action bar, 对话框 & Tab页图标
注意 第一列数字是图标图案的大小，第二列是图标文件大小
上下文图标 (Small Contextual Icons)
注意 小图标用于表面动作或展示为特定的状态。例如，在Gmail应用程序，每封邮件都有邮件标记为重要的一个星形图标。
通知栏图标 (Notification icons)
注意这些都是用在状态栏来表示的应用程序的通知。他们应该是白色，扁平化的效果。
See also http://iconhandbook.co.uk/reference/chart/android/