先改meta—可以直接参考淘宝的

1.JS设置滚动条

  • 竖向滚动条

    1. window.scrollTo(x,y)
    2. window.scrollTo(0,0)    //竖向滚动条置顶
    3. window.scrollTo(0,99999)    //粗暴一点，直接设置到99999,每次都自动往下拉--置底

    加到每次执行完 innerHTML 这里
    image.png

  • 横向滚动条

    1. word-break: break-all;    //加到CSS样式，自动换行

    2.加媒体查询

    image.png手机上执行，滚动条没问题，但是太极有一部分被遮住了
    手机上应该是上下结构，太极在上，代码在下，那么就让HTML和div高度都是50%

    加媒体查询

    image.png

  • [x] 首先在里面设置一个和原本不一样的颜色，然后切换手机模式，字体改变说明这个媒体查询可行，再详细改其他的

    • 设置高度 50vh，变成了个椭圆

image.png

  • 前面设置了position，这里要把它消掉

不能用static，会有问题；用relative，相对于自身定位
image.png

  • 这还是个椭圆，这是因为屏幕不够大，前面设置的400px，那么就把它改成200px吧

image.png结果变成了一个这样的椭圆，怎么回事呢
是因为设置了高度50vh，媒体查询里的优先级高于JS里的style

  • 不得以加一个div，给div1一个包装，height: 50vh; 放到外面的div里

image.png

  • 为了上下区分开，加个overflow

image.png

  • 出现一个新的问题，html不会自己滚动了，这是因为之前只是设置了window的滚动条

image.png

  • 我的太极为什么跑到上面去了。。。（找了好久。。。）

image.png
原来是我之前把媒体查询外面的div1改成了div1Wrapper