如果你的屏幕宽度小于 1080,建议使用移动端视图 https://2049bbs.xyz/view?tpl=mobile

现在的双栏改版还有很多的优化空间,本人对前端完全是现学现用,急切需要帮助,希望有大神能伸手帮一把。

小二 at 2020-01-13
1

@小二 #1 我跟楼主有同样的抱怨,因为最近改版时间线发布网站刚好学了一下css,现学现卖:

你这个点击按钮切换屏幕宽度的模式可以在css中用responsive website design来自动化实现:

具体介绍在这里,这里还有现成的css模板或者说模块可以直接添加到你的css文件里

简单来说,你要在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%宽度。

chinatimeline at 2020-01-13
2

而橱窗图片在手机下默认是100%宽度。注意,这里的宽度是container的宽度,而不是屏幕宽度。而我的container定义了最大宽度1440px,container宽度在浏览器窗口小于1440px的时候会自动100%。而你现在这样是固定宽度。

.container {
  margin: 0 auto;
  max-width: 1440px;
  padding: 0 10px;
  width: 100%;
}

你可以用chrome浏览器打开 https://chinatimeline.github.io/ 然后拖动改变浏览器窗口宽度,就能看到三种不同的样式去response不同的浏览器窗口宽度。

chinatimeline at 2020-01-13
3

更正一下2楼,代码没有框起来消失了


然后你的三栏可以参考 我的首页样式(画廊)

https://github.com/chinatimeline/chinatimeline.github.io/blob/master/index.html

比方说定义 <div class="col-3 col-s-6"> 就定义了每个项目的橱窗图片在电脑下是25%宽度,平板上50%宽度。

chinatimeline at 2020-01-13
4

貌似这个楼出了一个bug,看了半天没找出问题在哪儿……

小二 at 2020-01-13
5

终于找出来了,@chinatimeline <div class="col-3 col-s-6"> 直接被 markdown 解析器给解析了……

小二 at 2020-01-13
6

怀念之前的暗色调页面...

glow at 2020-01-13
7

@glow #7 有在考虑给已登录用户自定义界面,敬请期待

小二 at 2020-01-13
8

说回正题,2049bbs是通过user agent,即浏览器头来判断是移动还是桌面,而不是通过窗口宽度(并不获取这类数据),你可以通过插件自定义浏览器头。

小二 at 2020-01-13
9

@小二 #9 看来你对网页的基本概念不清楚啊,responsive web design的css样式表,服务器根本不需要获取任何信息,所有不同平台的浏览器获取的静态页面文件都是一样的,浏览器在本地根据css里头的定义自己去渲染网页。github page就是连服务器都没有的静态网页。

chinatimeline at 2020-01-13
10

@小二 #9 你打开我的网站,把网断了,颠倒你的手机或者平板或者拖动你的浏览器窗口尺寸,你窗口里的页面自动调整大小,所有的渲染都是浏览器自己根据下载下来的静态文件实现的。

chinatimeline at 2020-01-13
11

自tor推出9.0版本之後,很多操作沒有以前那麼麻煩了,建議好好看一眼9.0多了什麼,少了什麼。

比如9.0版本後,最大化窗口的網頁默認有一圈白邊,且沒有以前的匿名風險提示。

不得不說,這個自帶的白邊增加我用tor的使用率,那麼小的默認窗口,看着費勁真的不如用手機版。

波希米亞劍聖 at 2020-01-15
12

@波希米亞劍聖 #12 难道只有我讨厌那个白边吗?我一点都不担心屏幕尺寸的问题,但是这个白边太影响观感了

小二 at 2020-01-15
13

@小二 #13 Tor Browser的白边其实就是为了将窗口大小标准化,这样可以减少浏览器指纹的独特性

chinatimeline at 2020-01-17
14

@小二 #8 挖个坟~ 人性化设计不错哦

glow at 2020-01-24
15
登录 后发表评论