Press "Enter" to skip to content

测试自适应主题的一个傻办法

Last updated on 2016年08月20日

刚才在大发那看到一个很酷的 demo,就是他的主题在 iPhone 和 ipad 下自适应的效果,让我想起自己用的一个很傻很天真的测试(或者应该说浏览)自适应主题的办法。

听到自适应主题很多人第一反应会和手机主题或者平板主题联系在一起,好像只有在手机和平板下才能看得到,这完全是一种意识的习惯导致的误区,其实不然,电脑浏览器下也可以正常看到自适应主题在各个客户端下的浏览效果,而且方法非常简单。

啰嗦一大堆,其实想看到自适应的效果方法就是:只要缩小你的浏览器窗口就可以了!

这个缩小不是按住键盘的 ctrl 然后滑动鼠标滚动轮的缩小,而是浏览器右上角最小化、向下还原、关闭三个按钮处的缩小,点击中间那个向下还原,然后鼠标拉住浏览器右侧窗口拖动宽度,你就会看到在不同宽度下自适应主题各自不同的效果,是不是方法很傻很天真。

你可以拿大发的博客试试就知道了,或者我那个 bluesky 的 demo 博客也可以,不过我那个 bluesky 的自适应还是半成品。

其实说到底,自适应只是将原来固定的宽度换成百分比而已,不同的是这种百分比的宽度限制不是死的,而是限制了在某宽度的浏览器窗口大小下才将这种百分比效果体现出来,上面的话说的好拗口,其实我自己也不知道自己在说什么。

所以,以后遇到谁的主题是不是自适应,不要急着掏手机,将浏览器窗口变小看看就知道了。

当然这一方法对那种纯粹手机主题是不适用的,比如我这个主题就没有只适应,而是做了个专门的手机主题,然后用一个插件当遇到手机之类的那个啥时自动切换主题,所以拉浏览器窗口时不起作用的。

一句话的方法,能废话这么多,真是佩服我自己。

电视不知道哪一台在唱《红旗飘啊飘》,窗外雨好大。。。

27 Comments

    • LMS
      LMS 2013年04月30日

      @公子 缩小了一下浏览器,得出结论,你的主题没做自适应。

      • 公子
        公子 2013年05月4日

        @LMS :mrgreen: 我没做自适应,作了移动版,手机访问会有变化,缩小就没反应了。。。 😆

      • xyixyixyi
        xyixyixyi 2013年05月6日

        @LMS 自动适应,我觉得还是很有需要的。啥时候折腾折腾 🙂

  1. 小蝴蝶
    小蝴蝶 2013年04月30日

    叔 你到今天才知道缩小浏览器能测试这个么…..

    • 小蝴蝶
      小蝴蝶 2013年04月30日

      @小蝴蝶 我再看了一篇叔你这篇文章 我觉得你是故意的 所以我后悔评论了

      • LMS
        LMS 2013年04月30日

        @小蝴蝶 我都不知道我自己是故意的,你哪里看出来我是故意的? :mrgreen:

  2. 夜枫
    夜枫 2013年05月2日

    嘿嘿~~~~自适应….自适应式潮流…之前弄过一款主题就是自适应的,还行~~就是添加CSS样式了~~~

  3. 张书杨
    张书杨 2013年05月2日

    最近才开始关注这个话题:自适应AND手机主题,确实是不同的两个概念,调整浏览器方法也是第一次,宝贵的第一次献给了你… :mrgreen: :mrgreen:

  4. 外贸网站建设
    外贸网站建设 2013年05月3日

    目前应该很多人都是1440*900 或1366*768的 应该很少会出现大小不一的

  5. 飘零
    飘零 2013年05月4日

    把网页放小就行了吧

  6. yxiao
    yxiao 2013年05月4日

    我很早就知道这么测试 了。 :mrgreen:

  7. Ansonyi
    Ansonyi 2013年05月5日

    试试评论,多说那货貌似防垃圾评论不给力啊??

  8. Gao DaoJing
    Gao DaoJing 2013年05月5日

    😆 我一直都是这么在测试自适应的网站的

  9. 梦月酱
    梦月酱 2013年05月6日

    啊 我用WP TOUCH 自适应懒得搞

发表评论

电子邮件地址不会被公开。 必填项已用*标注