网页自适应

• 抖音：https://v.douyin.com/hcBaVeP/

• B站：https://www.bilibili.com/video/BV19U4y1M7WV/

Demo：https://sunzsh.github.io/html-demos/dark_demo.html

代码：https://github.com/sunzsh/st-html-demo/blob/master/dark_demo.html

大家好我们来看这个页面哈

当它宽度小于一定程度以后会比较丑

所以我想让这张图片可以自动隐藏掉

那如果只是隐藏图片其实很简单

我们来试一下

其实就是这个 carol 层

我们把它 display 隐藏掉就可以了

好，我们看：它隐藏掉了

但是呢如果宽度小一定程度呢

由于这个

外层的 wrapper 设了一个固定宽度

所以我们要把这个固定宽度也设一下

这个 wrapper 不能固定宽度了

百分之百

这样他就居中啦

但是呢这两行样式只适用于

小于一定宽度的情况下的浏览器

所以这个应该怎么写呢

我们就要用到微点

media screen

我们加一个暗的

因为这个界限是900像素

那小于900像素就用下面这两个样式

那也就意味着

它的最大宽度是900的时候

适用于这两个样式

我们来看一下

大概没问题了

但是呢这个滚动还稍微有点问题

因为当他

小于900的时候就没必要这样滚动了

所以呢我们再把它滚动恢复一下

line-height的不用变

高度我们首先恢复默认

滚动也恢复默认

好 大家看！这样就可以了

宽的时候是这样滚的

窄的时候呢

是全屏滚动的

好今天就到这里谢谢大家