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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 2892 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

第 1 条附言 · 2016-12-25 14:21:39 +08:00

感谢各位的回复，确实用“媒体查询”（ Media Query ）可以实现。没有必要用 JavaScript 。我会“感谢回复者”。

PS

这个页面在华为手机上测试通过，我懒得折腾了——反正也能用，偷懒吧：-）

JavaScript

响应

原生

文档

9 条回复 • 2016-12-27 11:07:03 +08:00

chemzqm

2016-12-24 13:49:29 +08:00

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

liuzhiyong

2016-12-24 16:11:26 +08:00

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

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