HugerMusic静态页面

HugerMusic

实现一款响应式大屏webapp

HungerMusic 布局思路

1. 需要做大屏幕的响应式，不能出现滚动条
2. 窗口的字体也会等比的出现百分比的缩小
3. vh高度的百分之十，十分之一
4. 垂直高度可以用vh 水平可以加一下媒体查询

HugerMusic 布局答疑

1. 用vw的话缝隙特别长，用vh用户的高度正好满屏

静态页面

filter

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。

filter: blur(4px)

把页面的模糊度重新调增为模糊

calc

calc(100% - 24vh)

括号中间记得写空格

em

相对长度单位，这个单位表示元素的font-size的计算值。如果用在font-size 属性本身，它会继承父元素的font-size。

aligin-items

CSS align-items属性将所有直接子节点上的align-self值设置为一个组。 align-self属性设置项目在其包含块中在交叉轴方向上的对齐方式。

aligin-items: center

这行代码可以使得aligin-self上的选项重新变为居中状态

overflow:hidden

把超出页面范围的内容隐藏掉

预览地址

预览地址