原生 JavaScript 实现多图文档的“响应式设计”

[liuzhiyong]

现在搞“响应式设计”（手机 /平板 /桌面）大多使用“框架”，功能多得一塌糊涂，当然也非常臃肿。我给自己的一个网页做了“响应式设计”，原生 JavaScript 实现，文件非常小——如果你也在搞文档适配“各种设备的屏幕”，可能有帮助哦。

演示： http://liuzhiyong.me/ （可以调节浏览器窗口大小，看各种 CSS style 怎么动态适应窗口的）
GitHub ： https://github.com/httpliuzhiyongme/homepagejs （求 Star ，首页的 JS 已经“ minify ”了，这是源代码）

测试环境： 三星手机，小米手机， iPad ，笔记本，台式机（ Chrome/Firefox ）

[chemzqm]

感觉这种简单的情况用 css 就足够了。

[liuzhiyong]

@chemzqm 请问 CSS 应该怎么做呢？这个多图“文档型”页面实际上有多种情况：

A ：屏幕宽度足够（很可能是桌面电脑），那么页面背景灰色，页面顶部的简介（头像 /名字 /etc ）横着显示，照片全尺寸，内容（白纸黑字部分）的 margin 调大。
B ：屏幕很窄（多半是手机），页面顶部的简介竖着显示，照片宽度刚好到屏幕宽度，内容的 margin 调小。
C ：屏幕不宽不窄，页面背景必须是白色，顶部的简介横着显示，内容 margin 调大，照片全尺寸。
D ：显示图片还要考虑 devicePixelRatio （ 1/1.5/2 ），否则图片显示比较模糊。

[zhoushiya]

难道媒体查询不能实现？

[cnZary]

@liuzhiyong https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries

[guyskk]

可以试试这个，超级方便
https://github.com/yegor256/tacit

[Tokin]

好奇， CSS 可以实现的东西，为撒要 js 。。。

[jiongxiaobu]

看楼主都是搞硬件的，就不喷了

[chemzqm]

@liuzhiyong 上 MDN 搜索 media query ， flex box ， img 标签的 srcset 可以来做响应式图片

[davidzd]

楼主是搞硬件的