像https://36kr.com/p/5085948.html 这样的响应式页面是怎么做到的？

Question

https://36kr.com/p/5085948.html

这个页面的响应式效果怎么做到的？改变浏览器大小，页面上菜单栏能变成不同的元素。

Answer 1

用的媒体查询，控制台审查元素可以看出来的

根据窗口宽度大小决定是display:none;或者display:block;

@media (max-width: 1020px) header.common-header .app-container

Answer 2

很简单, 媒体查询改变相应的 css 样式不改变结构就可以. 有空可以去看下 <<禅意花园>> 里面所有都是一个 html 文件, 只不过 css 不同.