这是一个创建于 3271 天前的主题，其中的信息可能已经有所发展或是发生改变。
现在搞“响应式设计”（手机 /平板 /桌面）大多使用“框架”，功能多得一塌糊涂，当然也非常臃肿。我给自己的一个网页做了“响应式设计”，原生 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