这是一个创建于 2880 天前的主题，其中的信息可能已经有所发展或是发生改变。
现在搞“响应式设计”（手机 /平板 /桌面）大多使用“框架”，功能多得一塌糊涂，当然也非常臃肿。我给自己的一个网页做了“响应式设计”，原生 JavaScript 实现，文件非常小——如果你也在搞文档适配“各种设备的屏幕”，可能有帮助哦。
演示： http://liuzhiyong.me/ （可以调节浏览器窗口大小，看各种 CSS style 怎么动态适应窗口的）
GitHub ： https://github.com/httpliuzhiyongme/homepagejs （求 Star ，首页的 JS 已经“ minify ”了，这是源代码）
测试环境： 三星手机，小米手机， iPad ，笔记本，台式机（ Chrome/Firefox ）
演示： 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
这个页面在华为手机上测试通过，我懒得折腾了——反正也能用，偷懒吧 ：-）
PS
这个页面在华为手机上测试通过，我懒得折腾了——反正也能用，偷懒吧 ：-）
9 条回复 • 2016-12-27 11:07:03 +08:00
 |
1
chemzqm 2016-12-24 13:49:29 +08:00  1
感觉这种简单的情况用 css 就足够了。
|
 |
2
liuzhiyong OP @chemzqm 请问 CSS 应该怎么做呢？这个多图“文档型”页面实际上有多种情况：
A ：屏幕宽度足够（很可能是桌面电脑），那么页面背景灰色，页面顶部的简介（头像 /名字 /etc ）横着显示，照片全尺寸，内容（白纸黑字部分）的 margin 调大。 B ：屏幕很窄（多半是手机），页面顶部的简介竖着显示，照片宽度刚好到屏幕宽度，内容的 margin 调小。 C ：屏幕不宽不窄，页面背景必须是白色，顶部的简介横着显示，内容 margin 调大，照片全尺寸。 D ：显示图片还要考虑 devicePixelRatio （ 1/1.5/2 ），否则图片显示比较模糊。 |
 |
3
zhoushiya 2016-12-24 16:30:41 +08:00 1
难道媒体查询不能实现？
|
 |
4
cnZary 2016-12-24 16:31:40 +08:00 1
|
 |
5
guyskk 2016-12-24 17:13:39 +08:00 via Android 1
可以试试这个，超级方便
https://github.com/yegor256/tacit |
 |
6
Tokin 2016-12-24 17:17:57 +08:00 1
好奇， CSS 可以实现的东西，为撒要 js 。。。
|
 |
7
jiongxiaobu 2016-12-24 19:14:18 +08:00 1
看楼主都是搞硬件的，就不喷了
|
|
8
chemzqm 2016-12-24 19:22:01 +08:00 1
@liuzhiyong 上 MDN 搜索 media query ， flex box ， img 标签的 srcset 可以来做响应式图片
|
 |
9
davidzd 2016-12-27 11:07:03 +08:00
楼主是搞硬件的
|
Select Language