search

blinkfox / hexo-theme-matery

A beautiful hexo blog theme with material design and responsive design.一个基于材料设计和响应式设计而成的全面、美观的Hexo主题。国内访问：http://blinkfox.com
https://blinkfox.github.io/
Apache License 2.0
5.23k stars 1.25k forks source link

首页文章排列在1920*1080分辨率的显示器上，MacOS和Windows显示的列数不同？ #725

Open flyfrank opened 2 years ago

flyfrank commented 2 years ago

1. 环境简介

hexo-theme-matery： v2.0.0 hexo: 5.4.0 hexo-cli: 4.3.0 os: win32 10.0.19042 node: 14.18.1 v8: 8.4.371.23-node.84 uv: 1.42.0 zlib: 1.2.11 brotli: 1.0.9 ares: 1.17.2 modules: 83 nghttp2: 1.42.0 napi: 8 llhttp: 2.1.4 openssl: 1.1.1l cldr: 39.0 icu: 69.1 tz: 2021a unicode: 13.0

2.问题现象

首页的文章列表在1920*1080分辨率的显示器上，MacOS和Windows下显示的列不同； 在Windows下的只显示2列（截图如下），但是在MacOS下可以显示3列。 image

3.结论

通过分析发现目前主题使用瀑布流插件masonry进行首页文章的布局。 当前使用的masonry的版本为：v4.0.0 将masonry的版本升级到最新版本：v4.2.2后，windows平台下显示与MacOS一致均为3列（截图如下）。 image

HKMV commented 2 years ago

很早就遇到过，没发现具体什么原因导致的，好像和浏览器内核有关，我edge这样，chrome就没问题

Jf710001011 commented 1 year ago

是浏览器问题吧，我只有chrome 显示两列

Jf710001011 commented 1 year ago

我按照你说的，更新了没效果，chrome显示还是两列

flyfrank commented 1 year ago

可能masonry的版本与chrome的版本存在兼容问题，或者你看看是不是有缓存导致更新没有生效呢？我当时将masonry升级到v4.2.2后解决了这个问题的，后续没再继续使用这个主题了。

Jf710001011 commented 1 year ago

不是有缓存导致更新没有生效呢？我当时将masonry升级到v4.2.2后解决了这个问题的，后续没再继续使用这个主题了。

确实可能这个问题，现在显示正常了