属性/方法 解释
    element.scrollHeight 返回元素的整体高度。
    element.scrollWidth 返回元素的整体宽度。
    element.scrollLeft 返回元素左边缘与视图之间的距离。
    element.scrollTop 返回元素上边缘与视图之间的距离。

    字符串DOM化:

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.     <title>上划加载和下拉刷新</title>
    8.     <style>
    9.      body{
    10.          margin: 0px;
    11.      }
    12.      html,body{
    13.          height: 100%;
    14.      }
    16.      header, footer{
    17.          width: 100%;
    18.          height: 40px;
    19.          position: absolute;
    20.          left: 0px;
    21.          text-align: center;
    22.          line-height: 40px;
    23.          background: #999999;
    24.          color: #ffffff;
    25.          z-index: 999;
    26.      }
    28.     header {
    29.         top: 0;
    30.     }
    32.     footer {
    33.         bottom: 0;
    34.     }
    36.     ul{
    37.         display: block;
    38.         width: 100%;
    39.         position: absolute;
    40.         top: 40px;
    41.         bottom: 40px;
    42.         overflow: auto;
    43.         list-style: none;
    44.         padding: 0px;
    45.         margin: 0px;
    46.     }
    47.     ul>li{
    48.         width: 100%;
    49.         height: 40px;
    50.         line-height: 40px;
    51.         text-indent: 20px;
    52.         border-bottom: 1px solid #666666;
    53.         background: #ffffff;
    54.         color: #333333;
    55.     }
    56.     #loading, #loadEnd{
    57.         width: 100%;
    58.         height: 40px;
    59.         line-height: 40px;
    60.         text-align: center;
    61.         color: #333333;
    62.         transition: all 0.5s;
    63.         position: absolute;
    64.         z-index: 1;
    65.     }
    66.     #loading{
    67.         background: orange;
    68.         top: 0;
    69.     }
    70.     #loadEnd{
    71.         background: green;
    72.         bottom: 0;
    73.     }
    75.     </style>
    76. </head>
    77. <body>
    78.     <header>
    79.         我是头部
    80.     </header>
    81.     <section id="con">
    82.         <div id="loading">loading...</div>
    83.         <ul id="list">
    85.         </ul>
    86.     </section>
    87.     <div id="loadEnd">All data is loaded...</div>
    88.     <footer>
    89.         我是尾部
    90.     </footer>
    91.     <script>
    92.         function $my(id){
    93.             return document.getElementById(id);
    94.         }
    96.         var list  = $my("list");
    97.         var loading  = $my("loading");
    99.         // 加载数据
    100.         function getData(){
    101.             var html ='';
    102.             for(var i=0;i<20;i++) {
    103.                 html += '<li>我是第' + (i+1) + '个li</li>';
    104.             }
    105.             console.log(html);
    107.             var length = list.children.length;
    108.             if(length === 0){
    109.                 list.innerHTML = html;
    110.             }
    111.             else if (length > 0 && length < 100){
    112.                 var newHtml = parseDom(html);
    113.                 insertAfter(newHtml, list.children[length-1]);
    114.             }
    115.         }
    117.         // 字符串DOM化
    118.         function parseDom(arg) {
    119.             var objEle = document.createElement('div');
    120.             objEle.innerHTML = arg;
    122.             return [...objEle.childNodes];
    123.         }
    125.         //在已有的元素后面添加元素
    126.         function insertAfter(newElement, targetElement){
    127.             newElement.forEach(element => {
    128.                 // 在目标后面插入元素，js新出的api after
    129.                 targetElement.after(element);
    130.             });
    131.         }
    133.         window.onload = ()=>{
    134.             getData();
    136.             list.addEventListener('scroll', function(){
    137.                 // ul的高度
    138.                 var listH = list.clientHeight;
    140.                 // li的高度
    141.                 var contentH = list.childNodes.length * 41;
    143.                 // ul离顶部的距离，可变的
    144.                 //console.log(list.scrollTop);
    146.                 //下拉刷新
    147.                 if (this.scrollTop === 0){
    148.                     list.style.top = "80px";
    149.                     loading.style.top = "40px";
    151.                     setTimeout(function(){
    152.                         loading.style.top = "0";
    153.                         list.style.top = "40px";
    154.                     }, 1000);
    155.                 }
    157.                 // 初始加载的li的总高和固定的ul的高度的差值
    158.                 var diffValue = contentH - listH;
    159.                 if (this.scrollTop + 50 >= diffValue){
    160.                     console.log('loading data...');
    161.                     getData();
    162.                 }
    163.             });
    164.         };
    166.     </script>
    167. </body>
    168. </html>

    响应式布局：
    image.png

    媒体查询：
    image.png

    vh，vw，和 %：
    % 是继承（基于）父级容器的百分比。
    vw 是屏幕尺寸（视口）的百分比。

    示例代码：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.     <title>Document</title>
    8.     <link rel="stylesheet" media="screen and (max-device-width:500px)" href='./css1.css'/>
    9.     <link rel="stylesheet" media="screen and (min-device-width:500px)" href='./css2.css'/>
    10. </head>
    11. <body>
    12.     <div>
    13.         <div class="con">
    14.             Hello
    15.         </div>
    16.     </div>
    17. </body>
    18. </html>

    移动端和PC端CSS样式分开写了。

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.     <title>Document</title>
    8.     <style>
    9.         .con{
    10.             width: 200px;
    11.             height: 200px;
    12.             background: green;
    13.         }
    14.         /* 屏幕max（小于等于）980px */
    15.         @media screen and (max-width:980px){
    16.             .con{
    17.                 width: 400px;
    18.             }
    20.         }
    22.         /* 屏幕 min (大于或等于) 1000px*/
    23.         @media screen and (min-width:1000px){
    24.             .con{
    25.                 width: 100px;
    26.             }
    27.         }
    28.     </style>
    29. </head>
    30. <body>
    31.     <div>
    32.         <div class="con">
    33.             Hello
    34.         </div>
    35.     </div>
    36. </body>
    37. </html>

    还可以这样写：

    1. <style>
    2.         .con{
    3.             width: 200px;
    4.             height: 200px;
    5.             background: green;
    6.         }
    7.         /* 屏幕max（小于等于）980px */
    8.         @media screen and (max-width:980px){
    9.             .con{
    10.                 width: 400px;
    11.             }
    13.         }
    15.         /* 屏幕 min (大于或等于) 1000px*/
    16.         @media screen and (min-width:1000px){
    17.             .con{
    18.                 width: 100px;
    19.             }
    20.         }
    22.         @media screen and (min-width: 1000px) and (max-width: 1030px){
    23.             .con{
    24.                 background-color: red;
    25.             }
    26.         }
    27.     </style>

    如果有多个区间段有冲突，则写在后面的生效（会覆盖前面的）。
    案例：

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    5.     <style>
    6.         *{
    7.             margin: 0;
    8.             padding: 0;
    9.         }
    10.         .main img {
    11.             width: 100%;
    12.         }
    14.         h1 {
    15.             font-size: 1.625em;
    16.         }
    18.         h2 {
    19.             font-size: 1.375em;
    20.         }
    22.         .header {
    23.             padding: 1%;
    24.             background-color: #f1f1f1;
    25.             border: 1px solid #e9e9e9;
    26.             text-align: center;
    27.         }
    29.         .menuitem {
    30.             margin: 4%;
    31.             margin-left: 0;
    32.             margin-top: 0;
    33.             padding: 4%;
    34.             border-bottom: 1px solid #e9e9e9;
    35.             cursor: pointer;
    36.         }
    38.         .main {
    39.             padding: 2%;
    40.         }
    42.         .right {
    43.             padding: 4%;
    44.             background-color: #CDF0F6;
    45.         }
    47.         .footer {
    48.             padding: 1%;
    49.             text-align: center;
    50.             background-color: #f1f1f1;
    51.             border: 1px solid #e9e9e9;
    52.             font-size: 0.625em;
    53.         }
    55.         .gridcontainer {
    56.             width: 100%;
    57.         }
    59.         .gridwrapper {
    60.             overflow: hidden;
    61.         }
    63.         .gridbox {
    64.             margin-bottom: 2%;
    65.             margin-right: 2%;
    66.             float: left;
    67.         }
    69.         .gridheader {
    70.             width: 100%;
    71.         }
    73.         .gridmenu {
    74.             width: 23.5%;
    75.         }
    77.         .gridmain {
    78.             width: 49%;
    79.         }
    81.         .gridright {
    82.             width: 23%;
    83.             margin-right: 0;
    84.         }
    86.         .gridfooter {
    87.             width: 100%;
    88.             margin-bottom: 0;
    89.         }
    91.         @media only screen and (max-width: 500px) {
    92.             .gridmenu {
    93.                 width: 100%;
    94.             }
    96.             .menuitem {
    97.                 margin: 1%;
    98.                 padding: 1%;
    99.             }
    101.             .gridmain {
    102.                 width: 100%;
    103.             }
    105.             .main {
    106.                 padding: 1%;
    107.             }
    109.             .gridright {
    110.                 width: 100%;
    111.             }
    113.             .right {
    114.                 padding: 1%;
    115.             }
    117.             .gridbox {
    118.                 margin-right: 0;
    119.                 float: left;
    120.             }
    121.         }
    122.     </style>
    123. </head>
    125. <body>
    126.     <div class="gridcontainer">
    127.         <div class="gridwrapper">
    128.             <div class="gridbox gridheader">
    129.                 <div class="header">
    130.                     <h1>这节课重点介绍一下我女朋友</h1>
    131.                 </div>
    132.             </div>
    133.             <div class="gridbox gridmenu">
    134.                 <div class="menuitem">列表一</div>
    135.                 <div class="menuitem">列表二</div>
    136.                 <div class="menuitem">列表三</div>
    137.                 <div class="menuitem">列表四</div>
    138.             </div>
    139.             <div class="gridbox gridmain">
    140.                 <div class="main">
    141.                     <h1>Wilson</h1>
    142.                     <p>我觉得网易最帅的就是Wilson了,我觉得网易最帅的就是Wilson了
    143.                         我觉得网易最帅的就是Wilson了我觉得网易最帅的就是Wilson了
    144.                     </p>
    145.                     <img src="./img/gf.jpg" alt="girlfriend" width="" height="">
    147.                 </div>
    148.             </div>
    149.             <d iv class="gridbox gridright">
    150.                 <div class="right">
    151.                     <h2>网易最帅讲师</h2>
    152.                     <p>wilson是真帅哥，网易一枝花，颜值担当！</p>
    153.                     <h2>网易最帅学员</h2>
    154.                     <p>在坐的都帅9999999999999</p>
    155.                     <h2>随便放</h2>
    156.                     <p>000000</p>
    157.                 </div>
    158.             </div>
    159.             <div class="gridbox gridfooter">
    160.                 <div class="footer">
    161.                     <p>今天学到东西了，很开心很开心。今天学到东西了，很开心很开心今天学到东西了，
    162.                         很开心很开心今天学到东西了，很开心很开心</p>
    163.                 </div>
    164.             </div>
    165.         </div>
    166.     </div>
    167. </body>
    169. </html>