@小二 #1 我跟楼主有同样的抱怨,因为最近改版时间线发布网站刚好学了一下css,现学现卖:
你这个点击按钮切换屏幕宽度的模式可以在css中用responsive website design来自动化实现:
具体介绍在这里,这里还有现成的css模板或者说模块可以直接添加到你的css文件里
- CSS样式设计: https://www.w3schools.com/css/css_rwd_intro.asp
简单来说,你要在css里定义N个break points,一般来说N=2,这样自动适应电脑、平板、手机三种屏幕。
这个break points就是屏幕的像素宽度,比如768px,600px,然后根据这两个break points定义三种列宽
手机(<600px)模式下,所有col都是100%屏宽,平板模式下(600-768px)定义列宽为col-s-*系列,大于768px的屏幕为col-*系列。
具体见319-376行
https://github.com/chinatimeline/chinatimeline.github.io/blob/master/style.scss
可以直接copy到你的css中。
然后你的三栏可以参考 我的首页样式(画廊)
https://github.com/chinatimeline/chinatimeline.github.io/blob/master/index.html
比方说定义 <div class="col-3 col-s-6"> 就定义了每个项目的橱窗图片在电脑下是25%宽度,平板上50%宽度。