响应式主题给我的感觉真是遥不可及，那些主题很有质感，一看就是高级料，我还真认为我做不来，，就算弄出来也要费很大力气，没想到。。。今天查了下资料，再理解理解，就折腾出来了。貌似很简单的说

好吧，其实很早就想学这东西了，不过一直没动手查相关资料，这两天和Ashe聊天的时候，谈到了D7这个主题，然后自然就谈到了自适应，唉，Ashe对我期望还是蛮大的，他想让我也学学这玩意儿，好吧，既然我被包养了，当然不能只吃不干，我也努力有求必应，能力范围内的努力做到，让我学习自适应这东西，和我本身又没啥冲突，而且我也打算学习下，所以当然满口答应咯

好吧，说正事，关于响应式，百度百科的答案是这样的：

  • 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
  • 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

这东西对我没丝毫价值诶，想要学习，还是要靠自己。。。于是无节操的下载了几个响应式模板。。。

前后找了找，我以为是js控制的响应式，后来把js都删除了，发现还是能自适应，于是果断查看css。。。发现了诡异的东西：：：：：：

重点来啦

@media handheld and (max-width:950px), screen and (max-device-width:950px), screen and (max-width:950px) { 这里是响应式的css }

好吧，结合强大的网络资源，我了解到、、、黄色部分意思是当浏览器宽度小于950px，执行绿色部分的css

好吧，竟然如此简单，用到的是Css3。。。没节操啊

如果你也想给主题弄成响应式的，那就动手吧，，，结合自己的大脑，ComeOn

我是果断给主题弄了下，，，目前还只有小于950px的效果，，后期慢慢再加几个

另外如果想看我博客不想有广告的话。。。那就把浏览器缩小一下，，，清新无广告就出来啦

 

标签: 响应式, 自适应

已有 93 条评论

  1. 斌果 斌果

    沙发,我也学习学习.

    回复
    1. Tokin Tokin

      主题瞬间闲得高级了点有没有，哈哈

      回复
      1. 斌果 斌果

        呵呵,相当高级 :lol: :lol:

        回复
  2. oyoy oyoy

    节操

    回复
  3. oyoy oyoy

    把底部的广告美化一下，背景色和你的底部一致不行吗

    回复
    1. Tokin Tokin

      太麻烦了，把背景换黑，字体什么的又要改颜色，麻烦…

      回复
  4. ye,夜 ye,夜

    :mrgreen: :mrgreen: 我也学学，给自己的添加，哈哈，最近超有精力折腾，话说你的广告显示不了啊

    回复
    1. Tokin Tokin

      怎么个不显示法…只显示一个白色背景框？

      回复
      1. ye,夜 ye,夜

        :?: :?: :?: 可能我的浏览器拦截了，木有办法，本来想帮你们点点的

        回复
  5. 小五 小五

    主题的css3 效果挺多

    回复
    1. Tokin Tokin

      正在努力学习中，多应用应用，看看效果 :shock:

      回复
  6. Xider Xider

    相应式什么的最有爱了有木有 :razz: :razz:

    回复
    1. Tokin Tokin

      之前还以为多难实现，没想到…

      回复
      1. Xider Xider

        其实就是加一下meta标签，改改width的绝对定义而已 :mrgreen:

        回复
        1. Tokin Tokin

          唉真是高估它了，我看响应式都是一些主题高手弄的，然后我就以为这是高级玩意儿…
          对了，为啥每次我在你博客评论都说我是垃圾评论，要审核…

          回复
          1. Xider Xider

            ...TAT Akismet这渣渣，目测把你列入黑名单了

            回复
            1. Tokin Tokin

              那怎么走出黑名单额，而且，我没发过什么垃圾评论额，肿么会这样子…

              回复
              1. Xider Xider

                http://wangyueblog.com/2008/05/30/akismet-black-list/ 你可以看看这篇文章

                回复
  7. 飘零 飘零

    嘿嘿，响应式的主题很少

    回复
  8. 斌果 斌果

    元宵快乐什么的 :twisted: :twisted: :mrgreen: :mrgreen:

    回复
  9. ye,夜 ye,夜

    来发个回复，纪念我网站成功运行38天。。。。。。。。。 :arrow: :arrow: :arrow: :arrow:

    回复
  10. 爱软E 爱软E

    什么叫做响应是 不明白 :wink:

    回复
    1. Tokin Tokin

      笼统来说，就是让主题兼容不同大小的屏幕，电脑访问电脑版，平版访问时我平板版，能访问到手机版，而这些只用一个主题做到，就是让主题自己适应当前环境，给出一个最佳显示方案

      回复
  11. ye,夜 ye,夜

    :mrgreen: :mrgreen: :mrgreen: 你也下七牛的底部链接了啊 :twisted: :twisted: :twisted:

    回复
  12. 夏宇轩网赚博客 夏宇轩网赚博客

    博主讲解的很细

    回复
  13. 馒头饭madfan 馒头饭madfan

    很不错哦！

    回复
  14. haze haze

    城城 about怎么用不了？求救

    回复
    1. Tokin Tokin

      唉，你怎么用的，我的怎么能用

      回复
  15. 木头怀 木头怀

    不错，努力，少年！

    回复
  16. 我醒来了 我醒来了

    闲置一个景安的VPS 你需要么？免费提供.8月份到期.平时我只用来FTP的

    回复
    1. Tokin Tokin

      额，还真用不到，我就这一个网站

      回复
  17. 斌果 斌果

    新logo不怎么好看啊

    回复
    1. Tokin Tokin

      木有关系…应该理解个性…哈哈

      回复
      1. 斌果 斌果

        好吧，我想说你的无刷新评论也没了

        回复
        1. Tokin Tokin

          是翻页没了，还是提交没了，我博客这两天除了搬了一次家，我什么也没动

          回复
          1. 斌果 斌果

            貌似又有了

            回复
            1. 斌果 斌果

              不对,没有,翻页还有,提交评论没了

              回复
              1. 斌果 斌果

                再插句嘴，首页的翻页按钮貌似只有两个，叫我怎么翻

                回复
                1. Tokin Tokin

                  点2会出现3，点3会出现4…

                  回复
                  1. 斌果 斌果

                    对，很坑爹的，还有评论还没说法呢

                    回复
  18. 醉风云 醉风云

    表示没出来。。。

    回复
    1. Tokin Tokin

      我给去掉了

      回复
      1. 醉风云 醉风云

        对于异步加载和图片缓慢加载很是感兴趣，不知道怎么弄

        回复
        1. Tokin Tokin

          保存一下我任何一网页，应该都在里面了…
          图片延迟是js、图片渐显之前用的js，后来用css3了…

          回复
  19. ye,夜 ye,夜

    :!: :!: 来给你踩广告了

    回复
  20. ye,夜 ye,夜

    :???: :???: 邮箱写错了

    回复
  21. 王仁龙 王仁龙

    :oops: 向博主学习！！！

    回复
  22. 免费资源部落 免费资源部落

    我的博客的布局有很大的问题。

    回复
    1. Tokin Tokin

      我都习惯你博客的布局了，。。。感觉很多人都习惯了

      回复
      1. 免费资源部落 免费资源部落

        页面如果太长的话，我的博客就会加载出现缓慢的问题。

        回复
        1. blogfeng blogfeng

          最近发现用手机360浏览器访问，那个文章分段漂浮的框很大很碍眼。

          回复
    2. 斌果 斌果

      头像为什么如此模糊

      回复
    3. Tokin Tokin

      缓存下来了小图片

      回复
    4. 馒头饭madfan 馒头饭madfan

      习惯了，看上去蛮舒服的。

      回复
  23. 天域剑客 天域剑客

    浅城你的MC线路抽风了？ :arrow: :arrow:

    回复
    1. Tokin Tokin

      额，前几天好像是VPS问题，MC机房抽风没那么严重，抽风一般翻墙还能看…

      回复
      1. 天域剑客 天域剑客

        我勒个去，我今天刚给你留言说你的机房比较抽，结果我的Hostigation就抽了··· :arrow: :arrow: :arrow: :mad:

        回复
        1. Tokin Tokin

          好吧，这是MC的通病，什么时候被政府认定了，咱们就可以搬家了

          回复
  24. 单车岁月 单车岁月

    back2top已偷走 :mrgreen:

    回复
    1. Tokin Tokin

      蒽哼，那也是我扒别人的，哈哈

      回复
  25. 斌果 斌果

    颇有发叔的风范呀 :oops: :oops:

    回复
    1. Tokin Tokin

      我晕，那我就再继续折腾

      回复
      1. 斌果 斌果

        我的意思是很好

        回复
        1. Tokin Tokin

          汗，我以为你不满意呢…

          回复
          1. ye,夜 ye,夜

            :mrgreen: :mrgreen: :mrgreen: 不满意自己搞

            回复
  26. ye,夜 ye,夜

    :sad: :sad: 你的心情说怎么实现啊？ :mrgreen:

    回复
    1. Tokin Tokin

      在ZWW那里淘来的代码

      回复
      1. ye,夜 ye,夜

        :sad: :sad: 求地址

        回复
  27. ye,夜 ye,夜

    一个小小问题，ie下提交有点毛病

    回复
    1. Tokin Tokin

      什么问题

      回复
      1. ye,夜 ye,夜

        一直显示的ajax在提交，即使已经提交了

        回复
        1. Tokin Tokin

          测试了一下，没事儿啊

          回复
          1. ye,夜 ye,夜

            :sad: :sad: :sad: 可能我回学校了速度慢

            回复
  28. John Shine John Shine

    勤奋好学啊

    回复
    1. Tokin Tokin

      我现在这个主题样式差不多了，不过还需要调试，所以把这个响应式功能给去掉了

      回复
  29. 馒头饭madfan 馒头饭madfan

    试验了一下，还真是这样咦

    回复
    1. Tokin Tokin

      @馒头饭madfan: 怎么可能，我没有教你加meat，竟然也能用…

      回复
  30. 刘荣焕 刘荣焕

    话说手机模式下左边的小侧边栏挡住文字了

    回复
    1. Tokin Tokin

      @刘荣焕: 恩，周末会添加响应式的。

      回复
  31. 小五 小五

    留言这里的重写太大了，容易误点

    回复
    1. Tokin Tokin

      @小五：就是简单的改了下CSS

      回复
    2. 斌果 斌果

      @小五：我都是快捷键的

      回复
  32. OYOY OYOY

    撸一发

    回复
    1. Tokin Tokin

      @OYOY：您老慢点撸，小心大出血…

      回复
  33. Best Websites Best Websites

    我也学习一下

    回复
    1. Tokin Tokin

      @Best Websites：还需要meta标签…

      回复
  34. 梦月酱 梦月酱

    related_img 错位

    回复
    1. Tokin Tokin

      @梦月酱：什么位置的图片啊

      回复
      1. 梦月酱 梦月酱

        @Tokin：就我评论的这篇文章 标签已经写给你了

        回复
        1. Tokin Tokin

          @梦月酱：还是没明白，我去…
          你是刚醒还是还没睡，太无敌了，回复这么快

          回复
          1. 斌果 斌果

            @Tokin：我比她快 :shock: :shock: :shock: :shock: :shock:

            回复
  35. 斌果 斌果

    @media screen and (max-width:750px){
    这么写就行啊

    回复
  36. peascloud peascloud

    正在学习响应式。

    回复

添加新评论