代码敲击乐：让你了解前端的动静结合和移动端的适配性

一.什么是动静结合？

静是：由 html结构 + css样式构成的静态页面
动是：由js"导演"主导的动态交互体验

二.适配性问题

1. 由于在移动端的手机尺寸不同，常规的代码会导致显示不同

解决方案：

rem（相对于 HTML根元素的字体大小）,vh（相对于视窗）相对单位而不是像px这类的绝对单位
flex(弹性布局魔法) :Flex 布局是响应式设计的基石，简单几行代码，搞定复杂对齐。
background-size:cover-contain的使用:

2. 各个浏览器的一些默认设置不同也会造影响

例如：

Chrome 给 body 默认 margin
Safari 给 h1~h6 不同的 font-size
Firefox 给 ul 添加 list-style

所以CSS Reset是必不可少的。

CSS Reset 的作用是消除不同浏览器对HTML元素的默认样式差异，为网页开发提供一个一致、可预测的样式基础。
这里我们用的是业内推荐的 css reset代码

css 复制代码

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, i, u, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

这里我们开始列出所有的元素而不是使用 * 的原因是：性能更好

三.web应用

模块化职责分离 (很重要)：
专业、可维护、可扩展
css 负责样式 link 在head引入（尽早下载，避免"无样式内容闪烁"）
js 负责交互 scrpit 在body 的底部引入（防止阻塞html 的下载和执行）

html 结构：

首先一共有字母键盘第二行从A-L的九个键，由因为在一行内显示所有我们可以用一个大盒子包含九个小盒子，每个小盒子内分两部分：键和音。

<div 复制代码

        <div class="key">
            <h3>A</h3>
            <span class="sound">clap</span>
        </div>
        <div class="key">
            <h3>S</h3>
            <span class="sound">hihat</span>
        </div>
        <div class="key">
            <h3>D</h3>
            <span class="sound">kick</span>
        </div>
        <div class="key">
            <h3>F</h3>
            <span class="sound">openhat</span>
        </div>
        <div class="key">
            <h3>G</h3>
            <span class="sound">boom</span>
        </div>
        <div class="key">
            <h3>H</h3>
            <span class="sound">ride</span>
        </div>
        <div class="key">
            <h3>J</h3>
            <span class="sound">snare</span>
        </div>
        <div class="key">
            <h3>K</h3>
            <span class="sound">tom</span>
        </div>
        <div class="key">
            <h3>l</h3>
            <span class="sound">tink</span>
        </div>
     </div>

给类名方便我们后面写样式

css 样式:

在 css reset之后我们加入业务样式

css 复制代码

html,body {
    height: 100%;
  }

css 复制代码

 html {
    font-size: 10px;
    background:url('../music/background.jpg') bottom center;
    background-size: cover;
  }

这里确定整个内容的文字大小和背景图片的情况， background-size: cover;的使用上面有讲

css 复制代码

  .keys {
    display: flex;/*弹性布局*/
    min-height: 100vh; 
    /* background: green; 背景颜色调试法*/ 
    align-items: center;
    justify-content: center;
  }

这里就是弹性布局 的地方，vh是视窗，100vh是全屏
主轴（main axis） ：justify-content 控制
交叉轴（cross axis） ：align-items 控制

每个的细节 .playing的样式是按下按键后的效果

js交互:

javascript 复制代码

document.addEventListener('DOMContentLoaded',function(){
//页面加载完成后执行的代码
//可以获取页面元素、添加事件监听器等
function playSound(event){
  
    console.log(event.keyCode ,'//////');
    let keyCode=event.keyCode;
    let element=document.querySelector('.key[data-key="'+keyCode+'"]');
    //
    console.log(element);
    // 动态DOM编程
    element.classList.add('playing');
}
//事件监听
window.addEventListener('keydown',playSound);
});

DOMContentLoaded html 文档加载完后再执行
事件对象，在事件发生的时候会给回调函数
keyCode 按下的键的编码
记得在每个小盒子类类名后添加像A data-key="65"这样的数据属性

结语

我们可以自己添加一些喜欢的属性更好的玩转它