响应式网站的产品需求和设计流程详解_图文_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
响应式网站的产品需求和设计流程详解
上传于||暂无简介
阅读已结束，如果下载本文需要使用2下载券
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩8页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢&人参与 | 时间：日 08:32
做过wap站、做过siteApp、做过第三方，也做过独立APP，现在又做了个自适应的模板。所谓“响应式网页设计(Responsive Web Design)”也就是自适应，就是可以自动识别屏幕宽度、并做出相应调整的网页设计。就是输入本站域名，手机、平板、PC端显示的效果不同的，但是URL确是相同的。响应式网站，(统一了URL)，利于用户体验，也利于用户分享，如下图所示：(图为iphone显示效果)(图为ipad显示效果，注意导航的变化)(图为安卓手机微信上显示效果)(PC版的直接就是现在这个界面了)这是怎么做的呢?其实完全是靠张力博主(QQ)的鼎力相助，他用的是本站移植到Wordpress的模板，后面经过多次修正与完善，制作了响应式的网页模板，后自发的为我制作了一套z-blog的自适应模板，可谓青出于蓝而胜于蓝。在他的协助下，我只用了一个下午时间，把卢松松博客的全站替换成了自适应主题。核心内容在于：导航栏和CSS的两个变化。希望学习的朋友请自行查看本站源代码，请注意：1，网站导航两个，一个PC端，一个移动端，注意加粗部分。PC段导航：&div id=&nav&&&#CACHE_INCLUDE_NAVBAR#&&/div&移动端导航：&nav id=&navs-wrap&&&div id=&logos&&&h1&&a href=&&#ZC_BLOG_HOST#&& title=&&#ZC_BLOG_TITLE#&&&&#ZC_BLOG_TITLE#&&/a&&/h1&&/div&&ul id=&navs& class=&menu&&&#CACHE_INCLUDE_FUNCTION28#&&/ul&&/nav&请注意HTML源文件里的一个判断语句：&meta name=&viewport& content=&width=device-width, initial-scale=1, maximum-scale=1&&在head里加入这条元标签，那移动浏览器中页面将以原始大小显示，并不能缩放。不让浏览器缩放目的是保证网页能自适应屏幕的完整性，避免网页混乱。width - viewport的宽度 height - viewport的高度initial-scale - 初始的缩放比例minimum-scale - 允许用户缩放到的最小比例maximum-scale - 允许用户缩放到的最大比例user-scalable - 用户是否可以手动缩放那么问题来了，如何让浏览器判断设备尺寸呢?有两种方式，一种是直接在link中判断设备的尺寸，然后引用不同的css文件，弃用。原因是博客CSS文件不大代码也不多，不需要多个CSS文件，也能减少并发。第二种就是我现在用的这种，请直接查看本站CSS文件，核心代码来了，开始研究响应式web设计朋友，CSS3 Media Queries是入门。在CSS中加入语句：@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/大家可以看到我博客里有多个判断，1024px，768px，650px，500px，400px，350px。这意味着宽度在1024px以下的屏幕，我博客会呈现六种不同的效果。但为了保证网页的连续性与完整性，同时也是图省事，下面六个CSS几乎相同。唯一不同的是加入了display:none，不显示某些内容。所以通过CSS观察发现，屏幕越小，显示的内容就越来越少。这也是文章开头为什么pad和移动端显示的界面不同的原因之一。要注意的是由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要，否则会出现横向滚动条。参考代码：核心CSS文件，适用于任何程序代码文件，鼠标右键查看本站源代码(注意导航代码的变化)，此代码仅供zblog用户参考。图省事的、试用WP系统的朋友可直接下载张力博客提供的WordPress主题：使用asp版卢松松主题的朋友，可以直接把本站的CSS拿去用。总结：只要制作两个导航，能看懂CSS文件就可以搞定，照猫画虎，人人都能做出响应式的网页设计，看似很难，实际上很简单。相关阅读：顶: 6踩: 0 来源：，欢迎分享，（联系QQ/微信：）
相关文章阅读更多：&&
如果没有一个伟大的功能响应网站SEO将是非常艰难顶: <ins data-digg="踩: <ins data-digg="
2楼&& 15:00:17 响应式布局真的很完美的顶: <ins data-digg="踩: <ins data-digg="
3楼&& 22:08:18 响应式测试推荐 跨屏测顶: <ins data-digg="踩: <ins data-digg="
4楼&& 17:15:52 哈哈 有价值的文章 真准备个人博客用您的主题呢顶: <ins data-digg="踩: <ins data-digg="
5楼&& 17:55:48 还是不太明白啊顶: <ins data-digg="踩: <ins data-digg="
6楼&& 14:21:26 想问一下，松松，网站手机端的头部为什么不添加导航栏呢顶: <ins data-digg="踩: <ins data-digg="
7楼&& 09:20:01 谢谢，看来吾辈还得继续努力学习！顶: <ins data-digg="踩: <ins data-digg="
8楼&& 08:50:25 这个真的很有用，值得学习。顶: <ins data-digg="踩: <ins data-digg="
9楼&& 16:16:52 搜索引擎和浏览器能不将就就不将就，最终肯定是要和国际接轨的。改革开放是大势所趋，我13亿人民不可能一直陪百度过家家，谷歌才是正道。顶: <ins data-digg="踩: <ins data-digg="
10楼&& 18:06:24 新手，对代码就晕！顶: <ins data-digg="踩: <ins data-digg="
11楼&& 16:24:29 这个模板以前用过，很不错哦。现在换成了wp博客，一直还未找到喜欢的模板。顶: <ins data-digg="踩: <ins data-digg="
12楼&& 22:49:08 楼主说的有道理，对建一个新站来说比较有用。如果是改版的话，还是不要自己做了。顶: <ins data-digg="踩: <ins data-digg="
13楼&& 13:42:30 厦门突围啊的响应式网站建站平台是自助式网站建站平台，挺不错的，不涉及代码，有兴趣的可以看看 顶: <ins data-digg="踩: <ins data-digg="
14楼&& 17:15:13 希望可以在模板下载里面加入这个响应式网页，快快升级模板吧！顶: <ins data-digg="踩: <ins data-digg="
15楼&& 11:50:14 现在很多网站都做不到自适应！顶: <ins data-digg="踩: <ins data-digg="
16楼&& 10:20:17 这个真的很有用，值得学习。顶: <ins data-digg="踩: <ins data-digg="
17楼&& 07:52:38 感谢卢老师的分享，学习了！顶: <ins data-digg="踩: <ins data-digg="
18楼&& 14:51:14 我就是个外行菜。。请教一个问题，就是响应式布局和html5的关系，看了看国外的网页设计貌似两者是相对应的，是不是html5在这方面是有优势的？大神们能否给扫扫盲 谢谢！顶: <ins data-digg="踩: <ins data-digg="
19楼&& 14:44:24 对于我的这个网站，不知道能不能做到，请大神们给个指点 顶: <ins data-digg="踩: <ins data-digg="
20楼&& 00:51:27 是啊，暂时用不了，只能等以后松哥更新了主题再用了。顶: <ins data-digg="踩: <ins data-digg="
21楼&& 00:43:09 啥时候研究出来了，还请在你博客分享给大家哦，让我们这些使用松哥这个主题的人也都能用上。顶: <ins data-digg="踩: <ins data-digg="
22楼&& 00:40:53 我很期待松哥这个主题啥时候能够升级为响应式，那时使用这个主题的所有朋友都可以使用上了。顶: <ins data-digg="踩: <ins data-digg="
23楼&& 13:22:00 非常感谢，学习了。顶: <ins data-digg="踩: <ins data-digg="
24楼&& 13:18:20 谢谢，看来吾辈还得继续努力学习！顶: <ins data-digg="踩: <ins data-digg="
25楼&& 17:27:56 暂时不共享，需要付费购买的！顶: <ins data-digg="踩: <ins data-digg="
26楼&& 11:39:30 文章不错，看了很多，受益非浅顶: <ins data-digg="踩: <ins data-digg="
27楼&& 15:51:16 html5+css3打造属于你的响应式网站顶: <ins data-digg="踩: <ins data-digg="
28楼&& 16:33:59 还是用bootstrap省心一些吧顶: <ins data-digg="踩: <ins data-digg="
29楼&& 23:26:23 网站的内容的确不错，粘在这里看了好多偏，还收藏了，明天接着看。新仔裤顶: <ins data-digg="踩: <ins data-digg="
30楼&& 12:43:49 这个网站真不错，点个赞吧。顶: <ins data-digg="踩: <ins data-digg="
31楼&& 14:38:40 真的很不错，不过我真没有搞定，搞了2个多小时，没有实现这个功能。顶: <ins data-digg="踩: <ins data-digg="
32楼&& 12:18:53 文章不错，很实用，同意点赞。顶: <ins data-digg="踩: <ins data-digg="
33楼&& 11:07:17 学习了 高手在民间啊顶: <ins data-digg="踩: <ins data-digg="
34楼&& 10:49:18 文章很不错，技术型人才可以试试，感谢分享，值得赞一个！顶: <ins data-digg="踩: <ins data-digg="
35楼&& 08:45:46 我之前不知道怎么设计网页看了卢松松的写的文章现在会了顶: <ins data-digg="踩: <ins data-digg="
36楼&& 23:08:26 看起来挺复杂啊，感谢分享！顶: <ins data-digg="踩: <ins data-digg="
37楼&& 18:19:08 看起来挺复杂啊，感谢分享！顶: <ins data-digg="踩: <ins data-digg="
38楼&& 10:13:41 博主大牛！受教！顶: <ins data-digg="踩: <ins data-digg="
39楼&& 09:28:45 查询浏览器宽度，改变css顶: <ins data-digg="踩: <ins data-digg="
40楼&& 22:13:20 非常好，不懂代码，不过非常喜欢顶: <ins data-digg="踩: <ins data-digg="
41楼&& 00:01:48 学习了 高手在民间啊顶: <ins data-digg="踩: <ins data-digg="
42楼&& 21:31:51 这篇文章可以说是我的大爱了。本人是做网赚的。也一直想要个响应式页面。设计分享。顶: <ins data-digg="踩: <ins data-digg="
43楼&& 17:10:00 松松肯定不会看到我的回复，哈哈顶: <ins data-digg="踩: <ins data-digg="
44楼&& 16:11:22 谢谢！好心人~顶: <ins data-digg="踩: <ins data-digg="
45楼&& 21:54:58 请教一下松哥，“使用asp版卢松松主题的朋友，可以直接把本站的CSS拿去用”，不行啊！模板文件和松哥的有很多不同，直接应用不行啊，希望可以在模板下载里面加入这个响应式网页，快快升级模板吧！顶: <ins data-digg="踩: <ins data-digg="
45楼&& 00:40:53 我很期待松哥这个主题啥时候能够升级为响应式，那时使用这个主题的所有朋友都可以使用上了。顶: <ins data-digg="踩: <ins data-digg="
46楼&& 13:18:50 感觉看起来有点复杂，就不操作了顶: <ins data-digg="踩: <ins data-digg="
47楼&& 12:38:08 我的是松松模板 可以直接用吗 css直接加进去就可以吗顶: <ins data-digg="踩: <ins data-digg="
48楼&& 12:16:55 对于我的这个网站，不知道能不能做到，请大神们给个指点顶: <ins data-digg="踩: <ins data-digg="
49楼&& 08:56:15 对于网络新手，这文章我确实看不懂顶: <ins data-digg="踩: <ins data-digg="
50楼&& 22:16:44 响应式网页很不错哦！就是不懂怎么弄顶: <ins data-digg="踩: <ins data-digg="
51楼&& 21:06:41 建议直接添加到模板升级里，自己修改好复杂，又会出错顶: <ins data-digg="踩: <ins data-digg="
52楼&& 20:59:10 很不错 不过还是用程序方便一些顶: <ins data-digg="踩: <ins data-digg="
53楼&& 16:44:28 很不错哈 可惜我是wp顶: <ins data-digg="踩: <ins data-digg="
54楼&& 22:00:25 正需要这个呢，自己修改有点难度顶: <ins data-digg="踩: <ins data-digg="
55楼&& 17:10:37 我替松哥解答一下吧，在他的一篇文章中提到过，没记错的话好像是华夏名网的主机。另外，从松哥博客的流量来看，主机应该不会很便宜的，价格可能最少在3，4千元左右吧？只是猜测，不对请勿拍砖！顶: <ins data-digg="踩: <ins data-digg="
55楼&& 16:11:22 谢谢！好心人~顶: <ins data-digg="踩: <ins data-digg="
56楼&& 17:01:55 discuz的有相关的模板,好像管理后台就可以直接设置,到 【界面】---&【风格管理】中看看。顶: <ins data-digg="踩: <ins data-digg="
57楼&& 16:56:39 浏览智能了,站长颓废了,太多的技术需要了解需要不断学习,稍微停下就要落后了.相信今后定会有更先进的网络技术出现,能把站长朋友从技术困围中解救出来.顶: <ins data-digg="踩: <ins data-digg="
58楼&& 16:42:45 你有什么想法吗?给大家分享一下!这个比多少$Money更有吸引力!顶: <ins data-digg="踩: <ins data-digg="
59楼&& 16:09:15 这个不好学呀顶: <ins data-digg="踩: <ins data-digg="
60楼&& 16:07:23 羡慕你们这些技术大牛哟顶: <ins data-digg="踩: <ins data-digg="
61楼&& 15:22:27 我们的站用的就是响应式的，的确很好！顶: <ins data-digg="踩: <ins data-digg="
62楼&& 15:21:06 又来学习了，真心不错！！顶: <ins data-digg="踩: <ins data-digg="
63楼&& 15:20:41 又学习了，真心不错！！顶: <ins data-digg="踩: <ins data-digg="
64楼&& 14:12:40 松哥真实牛，多么复杂的东西，在你文字里就是玩具一样作用自如。顶: <ins data-digg="踩: <ins data-digg="
65楼&& 13:39:35 有一点不好的就是，响应设计调用图片的时候调用的是同一张图片，手机打开会比较耗流量，速度也会慢一些顶: <ins data-digg="踩: <ins data-digg="
66楼&& 13:15:35 个人感觉 响应式可能不利于优化 以及广告位的布局顶: <ins data-digg="踩: <ins data-digg="
67楼&& 12:20:06 这个绝对是不错的选择顶: <ins data-digg="踩: <ins data-digg="
68楼&& 11:17:39 虽然有些看不懂，就当路过学习下吧。。。。。。顶: <ins data-digg="踩: <ins data-digg="
69楼&& 11:15:50 这种既满足用户体验，也是网站发展的趋势吧顶: <ins data-digg="踩: <ins data-digg="
70楼&& 10:45:46 感谢松哥的分享了。代码已拿去研究！顶: <ins data-digg="踩: <ins data-digg="
70楼&& 00:43:09 啥时候研究出来了，还请在你博客分享给大家哦，让我们这些使用松哥这个主题的人也都能用上。顶: <ins data-digg="踩: <ins data-digg="
71楼&& 09:16:21 对于我们这种代码白痴来说，难度太高了，完全看不懂啊顶: <ins data-digg="踩: <ins data-digg="
72楼&& 09:15:54 我的网站就是用的这个模板。感觉很好，就是主机太差啊。顶: <ins data-digg="踩: <ins data-digg="
73楼&& 09:08:31 感谢卢哥分享顶级干货顶: <ins data-digg="踩: <ins data-digg="
74楼&& 08:42:45 花了一个晚上终于完成响应式了，感谢松哥的教程，我现在直接吧wap插件删除了。其中的导航js我加载了无法完成下拉菜单，不知道松哥什么时候贡献下。顶: <ins data-digg="踩: <ins data-digg="
75楼&& 07:35:04 我的手机是3.5寸的屏，您的字体显示的太小，还要放大才可以看，不比卢老师的好。顶: <ins data-digg="踩: <ins data-digg="
76楼&& 00:20:51 响应式网页优点有以下几个：1、对用户友爱，针对不同分辨率，操作方便；2、积累分享：可以让网站通过单一的URL地址收集所有的社交分享链接。3、无重定向：响应式Web设计最大的优点之一是，你不必在乎任何重定向，它包含无用户代理定向。4、更少维护5、开发、维护、运营成本优势：页面只有一个，只是针对不同的分辨率、不同的设备环境进行了一些不同的设计，所以在开发、维护和运营上，相对多个版本，能节约成本。顶: <ins data-digg="踩: <ins data-digg="
77楼&& 00:15:23 响应式网页缺点有以下几个：1. 页面加载的代码多了，导致文件增大了，影响加载速度。为了适配不同的设备，响应式设计需要大量专门为不同设备打造的css及js代码，这影响了页面加载速度。尤其是js代码，若处理不好，在配置低的机子上浏览会很卡。虽然可以通过某些技术选择性地加载响应式设计代码，但浏览器对这方面的机制支持还不够完善。2. 在响应式设计中，图片、视频等资源一般是统一加载的，这就导致在低分辩率的机子上，实际加载了大于它的显示要求的图片或视频，导致不必要的流量浪费，影响加载速度。虽然现在有各种智能判断设备特性而加载不同图片或视频的技术，但浏览器支持同样不够完善。3. 对大型门户或电商网站来说，响应式设计目前确实不太适合。因为响应式设计的基本原则是不会因设备不同而给予用户不同的内容（比如在低分辩率设备上删减某些内容），而大型门户或电商网站的单页内容非常多，当缩减到低分辨率设备上，又要保证内容全部可浏览时，必然导致页面拉长，浏览困难度增加。所以很多大型门户或电商网站都会提供一个移动设备版的网站，或者干脆直接让用户缩放网页进行浏览。为不同的设备提供优化的浏览体验，这个肯定是网站开发所追求的目标，也是网站技术发展的趋势。但响应式设计只是实现这一目标的其中一个手段，只适用于某些类型的网站（博客，新闻资讯类），不可一概而论的。顶: <ins data-digg="踩: <ins data-digg="
78楼&& 23:55:44 discuz的怎么弄呢？顶: <ins data-digg="踩: <ins data-digg="
78楼&& 17:01:55 discuz的有相关的模板,好像管理后台就可以直接设置,到 【界面】---&【风格管理】中看看。顶: <ins data-digg="踩: <ins data-digg="
79楼&& 22:25:37 还是看不懂，一片糊涂！顶: <ins data-digg="踩: <ins data-digg="
80楼&& 22:16:51 卢大师，你用的是哪里的空间啊，速度比较快，推荐给我用下啦~谢谢~顶: <ins data-digg="踩: <ins data-digg="
80楼&& 17:10:37 我替松哥解答一下吧，在他的一篇文章中提到过，没记错的话好像是华夏名网的主机。另外，从松哥博客的流量来看，主机应该不会很便宜的，价格可能最少在3，4千元左右吧？只是猜测，不对请勿拍砖！顶: <ins data-digg="踩: <ins data-digg="
80楼&& 16:11:22 谢谢！好心人~顶: <ins data-digg="踩: <ins data-digg="
81楼&& 21:52:11 这些做大做强了确实还是蛮不错、、顶: <ins data-digg="踩: <ins data-digg="
82楼&& 19:16:13 好牛呀，会技术就是强！顶: <ins data-digg="踩: <ins data-digg="
83楼&& 19:13:49 有时间也研究下这种响应式网页，现在网站使用siteApp页面显示不理想.顶: <ins data-digg="踩: <ins data-digg="
84楼&& 15:14:31 具体实施起来还是需要很多知识点.这只是最后呈现的效果顶: <ins data-digg="踩: <ins data-digg="
85楼&& 14:49:09 现在流行这种顶: <ins data-digg="踩: <ins data-digg="
86楼&& 14:21:20 现在好像都特别流行这个响应式网页，挺松哥说得那么简单，有空我也深入研究看看自己能够也折腾出一套模版出来。顶: <ins data-digg="踩: <ins data-digg="
87楼&& 14:14:02 这个还不错，果断分享~顶: <ins data-digg="踩: <ins data-digg="
88楼&& 14:00:15 那么问题来了,哈哈哈顶: <ins data-digg="踩: <ins data-digg="
89楼&& 13:11:14 还是松松好，什么都拿出来分享。顶: <ins data-digg="踩: <ins data-digg="
90楼&& 13:05:48 这个倒是可以。记得刚到这个网站的时候还没有这个设计。今天听了刚发现顶: <ins data-digg="踩: <ins data-digg="
91楼&& 13:04:33 不错，discuz要是实现就好了顶: <ins data-digg="踩: <ins data-digg="
92楼&& 13:01:52 厉害，学习下，这个技术很以后很长时间是非常实用的。顶: <ins data-digg="踩: <ins data-digg="
93楼&& 12:41:57 为啥看不到我的评论，要审核吗顶: <ins data-digg="踩: <ins data-digg="
94楼&& 12:16:34 这个是不错的技术，学习了。顶: <ins data-digg="踩: <ins data-digg="
95楼&& 11:08:11 可惜了，对代码不熟悉顶: <ins data-digg="踩: <ins data-digg="
96楼&& 10:50:01 好嘛 来看看 了解学习一下顶: <ins data-digg="踩: <ins data-digg="
97楼&& 10:41:44 不错 点赞顶: <ins data-digg="踩: <ins data-digg="
98楼&& 10:19:57 张力一样的博客网页，看上去特别的美观。而且我还发现一个问题，360搜索引擎特别喜欢WP程序网页，我的网站是从ASP改版的。360直接把关键词排在首页第一位了。顶: <ins data-digg="踩: <ins data-digg="
99楼&& 10:17:21 松哥网站广告蛮多的，不知道一个月收入多少呀顶: <ins data-digg="踩: <ins data-digg="
99楼&& 16:42:45 你有什么想法吗?给大家分享一下!这个比多少$Money更有吸引力!顶: <ins data-digg="踩: <ins data-digg="
100楼&& 10:16:42 没学会顶: <ins data-digg="踩: <ins data-digg="
101楼&& 10:15:31 这个技术性很强额顶: <ins data-digg="踩: <ins data-digg="
102楼&& 09:55:15 不错顶: <ins data-digg="踩: <ins data-digg="
103楼&& 09:11:32 我的小说站需要啊，可是不会弄顶: <ins data-digg="踩: <ins data-digg="
104楼&& 08:32:04 我的也是响应式主题顶: <ins data-digg="踩: <ins data-digg="
105楼&& 07:20:23 用了都说好，我也急需要，我的博客：晨鸟seo,有文章更新啦顶: <ins data-digg="踩: <ins data-digg="
106楼&& 06:14:19 松哥的响应式没有我的好。顶: <ins data-digg="踩: <ins data-digg="
106楼&& 07:35:04 我的手机是3.5寸的屏，您的字体显示的太小，还要放大才可以看，不比卢老师的好。顶: <ins data-digg="踩: <ins data-digg="
106楼&& 07:20:23 用了都说好，我也急需要，我的博客：晨鸟seo,有文章更新啦顶: <ins data-digg="踩: <ins data-digg="
107楼&& 02:53:36 是WP程序么？？ 要添加三个菜单，一个是左边的主导航，一个是右边的次导航，还有一个是手机导航，每个菜单勾选其中一个就可以了。顶: <ins data-digg="踩: <ins data-digg="
108楼&& 00:50:39 谢谢分享!顶: <ins data-digg="踩: <ins data-digg="
109楼&& 00:41:31 每天都用IPAD看松哥的網站，不過現在不能縮放了，字好小了，真不習慣啊顶: <ins data-digg="踩: <ins data-digg="
110楼&& 00:37:05 正在学习响应式设计~~你的可以顶: <ins data-digg="踩: <ins data-digg="
111楼&& 00:36:02 响应式页面设计自然是不会差的~顶: <ins data-digg="踩: <ins data-digg="
112楼&& 23:55:54 真的不错，如果能做成插件，直接给广告wordpress用户下载使用，不是更好吗？顶: <ins data-digg="踩: <ins data-digg="
113楼&& 23:43:22 wordpress很好用的，我的博客也是顶: <ins data-digg="踩: <ins data-digg="
114楼&& 23:41:35 专业的选择源代码很重要顶: <ins data-digg="踩: <ins data-digg="
115楼&& 23:23:08 张力顶: <ins data-digg="踩: <ins data-digg="
116楼&& 22:34:33 我的wordpress也得考虑下。。。顶: <ins data-digg="踩: <ins data-digg="
116楼&& 23:43:22 wordpress很好用的，我的博客也是顶: <ins data-digg="踩: <ins data-digg="
117楼&& 22:07:03 拿来主义了。顶: <ins data-digg="踩: <ins data-digg="
118楼&& 22:04:42 估计现在没有这个程序吧。顶: <ins data-digg="踩: <ins data-digg="
119楼&& 22:04:13 这个好，实用。顶: <ins data-digg="踩: <ins data-digg="
120楼&& 22:02:12 很多都是专门定制手机版的，PC版的兼容性真的不是很好，各种意想不到的问题。顶: <ins data-digg="踩: <ins data-digg="
121楼&& 21:44:04 响应式网页设计的快速教程（适合个人站） 学习了顶: <ins data-digg="踩: <ins data-digg="
122楼&& 21:30:11 不懂代码的我，只能干瞪眼的份了。顶: <ins data-digg="踩: <ins data-digg="
123楼&& 21:16:08 这个很好，就盼着这种自适应的例子呢，一招就搞定了各种终端设备的浏览问题顶: <ins data-digg="踩: <ins data-digg="
124楼&& 21:15:16 额..看不懂代码还是直接用别人设计好的，要个性的就得定做，，，好伤感顶: <ins data-digg="踩: <ins data-digg="
124楼&& 22:04:42 估计现在没有这个程序吧。顶: <ins data-digg="踩: <ins data-digg="
125楼&& 20:57:09 移动端是趋势哈顶: <ins data-digg="踩: <ins data-digg="
126楼&& 20:50:22 张力的博客模板我也在用哦，确实很不错的，那天晚上问张力，说只要129元一个模板，还真便宜，我用了小半天的时间就整了一个跟松哥，张力一样的博客网页，看上去特别的美观。而且我还发现一个问题，360搜索引擎特别喜欢WP程序网页，我的网站是从ASP改版的。360直接把关键词排在首页第一位了。顶: <ins data-digg="踩: <ins data-digg="
127楼&& 20:44:31 呵呵……就是那个导航不会的，还在研究中的。顶: <ins data-digg="踩: <ins data-digg="
127楼&& 02:53:36 是WP程序么？？ 要添加三个菜单，一个是左边的主导航，一个是右边的次导航，还有一个是手机导航，每个菜单勾选其中一个就可以了。顶: <ins data-digg="踩: <ins data-digg="
128楼&& 20:21:59 对于我们这些不懂代码的情何以堪呀 顶: <ins data-digg="踩: <ins data-digg="
128楼&& 22:07:03 拿来主义了。顶: <ins data-digg="踩: <ins data-digg="
129楼&& 20:15:33 相当方便啊顶: <ins data-digg="踩: <ins data-digg="
130楼&& 20:02:18 看后觉得还真不错。顶: <ins data-digg="踩: <ins data-digg="
131楼&& 19:31:03 第一次看到这样的移动端，一下就喜欢上了。顶: <ins data-digg="踩: <ins data-digg="
132楼&& 19:09:51 真不错！！受益匪浅啊！！顶: <ins data-digg="踩: <ins data-digg="
133楼&& 18:08:32 学习了，很实用啊。顶: <ins data-digg="踩: <ins data-digg="
134楼&& 17:45:37 很强大，目前正缺手机版顶: <ins data-digg="踩: <ins data-digg="
134楼&& 22:02:12 很多都是专门定制手机版的，PC版的兼容性真的不是很好，各种意想不到的问题。顶: <ins data-digg="踩: <ins data-digg="
135楼&& 17:45:35 松哥继续出好文章啊。更倾向于专门的手机网站，同时绑定上响应的手机域名，这样的排名就会靠前…比如我们万恶的UC浏览器，如果你打开极速模式进入响应式网站，仍旧会提示什么百度转码什么的，或是极速模式下面的电脑端网页的一个精简版。这么说来意义就没有了，响应式网站虽然可以很好的兼容PC和移动，但是如果考虑到搜索引擎和一些浏览器本身的技术，那么恐怕还是得要分开做分开绑定域名才好把这么好的帖子，如果将来我再也看不到了，那我该怎么办？那我该怎么办？直到我毫不犹豫的把楼主的这个帖子收藏了。我内心的那种激动才逐渐平复下来。可是我立刻想到，这么好的帖子，倘若别人看不到，那么不是浪费楼主的心血吗？经过痛苦的思想斗争，我终于下定决心，我要把这个帖子一直往上顶，往上顶！顶到所有人都看到为止！顶: <ins data-digg="踩: <ins data-digg="
135楼&& 16:16:52 搜索引擎和浏览器能不将就就不将就，最终肯定是要和国际接轨的。改革开放是大势所趋，我13亿人民不可能一直陪百度过家家，谷歌才是正道。顶: <ins data-digg="踩: <ins data-digg="
136楼&& 17:39:58 wordpress是比较容易上手的。顶: <ins data-digg="踩: <ins data-digg="
137楼&& 17:28:53 有BUG~顶: <ins data-digg="踩: <ins data-digg="
138楼&& 17:25:25 一直都想换下zblog的手机模板，但是他们就是没有。。。。也找不到wap设置的文件是哪个？求大神告诉。顶: <ins data-digg="踩: <ins data-digg="
139楼&& 17:01:41 我用wordpress建站，现在很多模版也是响应式的了。移动互联网发展太快了。但是移动页面的变现还是比较困难。顶: <ins data-digg="踩: <ins data-digg="
140楼&& 16:09:59 不错是不错，但实施起来有点复杂顶: <ins data-digg="踩: <ins data-digg="
141楼&& 15:46:43 不是wap火了，而是移动端火了顶: <ins data-digg="踩: <ins data-digg="
142楼&& 15:39:47 用wordpress不用这么麻烦，直接套个模板搞定顶: <ins data-digg="踩: <ins data-digg="
143楼&& 15:27:32 可惜，不能直接用。主题不同的。顶: <ins data-digg="踩: <ins data-digg="
144楼&& 15:27:04 看着是有点难的。像我，得完全照搬才行，稍有变化就完蛋了。顶: <ins data-digg="踩: <ins data-digg="
145楼&& 15:25:43 响应式网站是移动互联网时代的标配，很值得学习。顶: <ins data-digg="踩: <ins data-digg="
146楼&& 15:14:23 不知道张力博主(QQ)是否共享WP的模板下载地址顶: <ins data-digg="踩: <ins data-digg="
146楼&& 17:27:56 暂时不共享，需要付费购买的！顶: <ins data-digg="踩: <ins data-digg="
147楼&& 14:44:16 看起来很不错的样子 很赞哟顶: <ins data-digg="踩: <ins data-digg="
148楼&& 14:42:43 这样的用户体验很好顶: <ins data-digg="踩: <ins data-digg="
149楼&& 14:42:16 判断浏览设备，从而调用不同的css顶: <ins data-digg="踩: <ins data-digg="
150楼&& 14:20:05 看起来好像很厉害的样子啊，哈哈哈哈顶: <ins data-digg="踩: <ins data-digg="
151楼&& 14:19:54 先留个记号在看，，，每天都能从松松的博客里学到知识，谢谢松松。。。。。顶: <ins data-digg="踩: <ins data-digg="
152楼&& 14:11:22 个人感觉我没有读懂啊顶: <ins data-digg="踩: <ins data-digg="
153楼&& 14:06:42 文章看不懂，我是来看评论的。顶: <ins data-digg="踩: <ins data-digg="
154楼&& 14:04:33 推广的方法很重要，顶: <ins data-digg="踩: <ins data-digg="
155楼&& 13:30:16 技术真的有这么重要吗？顶: <ins data-digg="踩: <ins data-digg="
156楼&& 13:29:57 更倾向于专门的手机网站，同时绑定上响应的手机域名，这样的排名就会靠前…比如我们万恶的UC浏览器，如果你打开极速模式进入响应式网站，仍旧会提示什么百度转码什么的，或是极速模式下面的电脑端网页的一个精简版。这么说来意义就没有了，响应式网站虽然可以很好的兼容PC和移动，但是如果考虑到搜索引擎和一些浏览器本身的技术，那么恐怕还是得要分开做分开绑定域名才好把顶: <ins data-digg="踩: <ins data-digg="
157楼&& 13:29:31 这么好的帖子，如果将来我再也看不到了，那我该怎么办？那我该怎么办？直到我毫不犹豫的把楼主的这个帖子收藏了。我内心的那种激动才逐渐平复下来。可是我立刻想到，这么好的帖子，倘若别人看不到，那么不是浪费楼主的心血吗？经过痛苦的思想斗争，我终于下定决心，我要把这个帖子一直往上顶，往上顶！顶到所有人都看到为止！顶: <ins data-digg="踩: <ins data-digg="
158楼&& 13:27:57 高端大气上档次！顶: <ins data-digg="踩: <ins data-digg="
159楼&& 13:22:02 css文件直接替换，错位。顶: <ins data-digg="踩: <ins data-digg="
159楼&& 00:51:27 是啊，暂时用不了，只能等以后松哥更新了主题再用了。顶: <ins data-digg="踩: <ins data-digg="
160楼&& 13:21:34 我是技术盲顶: <ins data-digg="踩: <ins data-digg="
161楼&& 13:06:54
呵呵，默默的为大神们点赞！顶: <ins data-digg="踩: <ins data-digg="
162楼&& 13:04:26 没什么感觉，对于手机站这方面不是太懂。顶: <ins data-digg="踩: <ins data-digg="
163楼&& 13:03:00 好像不错，不过响应式的网页达不到APP的效果。 如果是纯展示的网站当然不必在意这些 顶: <ins data-digg="踩: <ins data-digg="
164楼&& 12:56:13 这个很好，就盼着这种自适应的例子呢，一招就搞定了各种终端设备的浏览问题顶: <ins data-digg="踩: <ins data-digg="
165楼&& 12:47:03 还好，感兴趣的可以试一试，不用感谢了，哈哈顶: <ins data-digg="踩: <ins data-digg="
166楼&& 12:41:00 没有看懂，难道来此的都是SEO高手，像我这样啥都不懂的没有么？顶: <ins data-digg="踩: <ins data-digg="
167楼&& 12:40:32 确实不错，手机浏览挺方便的。前端模板也听牛X的，推荐。顶: <ins data-digg="踩: <ins data-digg="
168楼&& 12:07:51 成为肖森舟第274号梦想赞助商，我后悔了顶: <ins data-digg="踩: <ins data-digg="
169楼&& 11:54:42 留着以后有用顶: <ins data-digg="踩: <ins data-digg="
170楼&& 11:51:32 有个板凳坐着也不错，比蹲着好顶: <ins data-digg="踩: <ins data-digg="
171楼&& 11:49:48 这么早元旦假期就出来啦顶: <ins data-digg="踩: <ins data-digg="
172楼&& 11:47:48 我等小白，何时才能学会这些代码啊。五年还是十年啊……顶: <ins data-digg="踩: <ins data-digg="
173楼&& 11:47:28 响应式确实不错！顶: <ins data-digg="踩: <ins data-digg="
174楼&& 11:43:17 哎，不懂代码的飘过！顶: <ins data-digg="踩: <ins data-digg="
175楼&& 11:42:10 看似很难，实际上很简单。顶: <ins data-digg="踩: <ins data-digg="
176楼&& 11:39:33 看来织梦也是可以实现了顶: <ins data-digg="踩: <ins data-digg="
177楼&& 11:31:42 响应式网站好处就是可以完全贴合各种浏览器和操作系统，但是也有不方便的地方，such as不容易绑定二级域名…其实现在对有移动搜索引擎，更倾向于专门的手机网站，同时绑定上响应的手机域名，这样的排名就会靠前…比如我们万恶的UC浏览器，如果你打开极速模式进入响应式网站，仍旧会提示什么百度转码什么的，或是极速模式下面的电脑端网页的一个精简版。这么说来意义就没有了，响应式网站虽然可以很好的兼容PC和移动，但是如果考虑到搜索引擎和一些浏览器本身的技术，那么恐怕还是得要分开做分开绑定域名才好把…顶: <ins data-digg="踩: <ins data-digg="
178楼&& 11:30:36 目测一大堆博客估计要短暂的挂掉一两天，各位想改的赶紧打包备份，本地测试，OK之后，再上传，或者上传开个二级目录，测试OK之后在覆盖。顶: <ins data-digg="踩: <ins data-digg="
179楼&& 11:30:31 不错 高手啊 很快就能搭建一个响应式的网站顶: <ins data-digg="踩: <ins data-digg="
180楼&& 11:30:13 干货确实好知识顶: <ins data-digg="踩: <ins data-digg="
181楼&& 11:29:42 那就试试呗，或许成功了呢顶: <ins data-digg="踩: <ins data-digg="
182楼&& 11:27:17 公司的网站刚好遇到这样的问题！同事什么都不懂嘿嘿顶: <ins data-digg="踩: <ins data-digg="
183楼&& 11:23:01 真的不错，对我的网站有些帮助，谢谢。顶: <ins data-digg="踩: <ins data-digg="
184楼&& 11:22:54 iPhone下 回复，该留言： 导航栏绝对定位没起到作用。顶: <ins data-digg="踩: <ins data-digg="
185楼&& 11:22:38 不是沙发顶: <ins data-digg="踩: <ins data-digg="
186楼&& 11:22:14 也有好多人评论，不过就是松哥最近老是给人家打广告，让我们这些小粉丝。。。顶: <ins data-digg="踩: <ins data-digg="
187楼&& 11:19:36 终于见识到了响应式设计了，看上去不错顶: <ins data-digg="踩: <ins data-digg="
188楼&& 11:12:47 现在主题做到这样就好多了，方便阅读很多！顶: <ins data-digg="踩: <ins data-digg="
189楼&& 11:12:21 现在还是需要有个响应式的主题的。顶: <ins data-digg="踩: <ins data-digg="
190楼&& 11:11:12 这样改会不会影响SEO顶: <ins data-digg="踩: <ins data-digg="
191楼&& 11:06:14 松哥做得不错顶: <ins data-digg="踩: <ins data-digg="
192楼&& 10:59:55 不是太明白顶: <ins data-digg="踩: <ins data-digg="
193楼&& 10:58:37 这个是个好东西呀，学习了爆破测振仪-中科测控顶: <ins data-digg="踩: <ins data-digg="
194楼&& 10:56:54 呵呵，多看几遍，就懂啦顶: <ins data-digg="踩: <ins data-digg="
195楼&& 10:55:54 是啊，现在松哥的文章大多都是软文啦顶: <ins data-digg="踩: <ins data-digg="
196楼&& 10:43:00 非常不错，我还想把我的周星驰粉丝网也这样搞一下顶: <ins data-digg="踩: <ins data-digg="
197楼&& 10:35:49 写的太好了，，绝对是干货分享，，可是我不懂技术，一句没看懂顶: <ins data-digg="踩: <ins data-digg="
198楼&& 10:35:11 pad那个为什么不把导航放到logo旁边呢，那么大的屏幕，不像手机一样，个人不喜欢点导航再去找东西，感觉有点麻烦顶: <ins data-digg="踩: <ins data-digg="
199楼&& 10:34:56 写的太好了，，绝对是干货分享，，可是我不懂技术，一句没看懂顶: <ins data-digg="踩: <ins data-digg="
200楼&& 10:28:50 门户网站也是这么做的顶: <ins data-digg="踩: <ins data-digg="
201楼&& 10:19:22 谢谢松哥顶: <ins data-digg="踩: <ins data-digg="
202楼&& 10:17:32 很粗浅的文章，就算是个人网站那种分类简单的网站，也是要经过大量调试的，不然最后出来的效果，只不过是“你认为ok了”，当然这也没办法，并不是人人都是设计师。顶: <ins data-digg="踩: <ins data-digg="
203楼&& 10:03:56 这个要顶，技术贴，咱现在用的百度siteapp 移动站，以后要改，等帝国cms7.2版本出现。顶: <ins data-digg="踩: <ins data-digg="
204楼&& 10:03:13 NB 响应式开发很不错顶: <ins data-digg="踩: <ins data-digg="
205楼&& 10:02:56 挺不错的代码，呵呵，一套代码实现不同的平台下有好访问。【红博客】-关注中小企业及创业顶: <ins data-digg="踩: <ins data-digg="
206楼&& 09:54:47 这个很有帮助，稍后试一下，谢谢分享了顶: <ins data-digg="踩: <ins data-digg="
207楼&& 09:47:08 天书？没那么夸张吧？顶: <ins data-digg="踩: <ins data-digg="
208楼&& 09:45:36 这个很实用，设计网站要考虑到各种各样的浏览器及电脑屏幕尺寸分辨下的显示效果。顶: <ins data-digg="踩: <ins data-digg="
209楼&& 09:43:09 这个很实用，现在浏览器很多，电脑屏幕尺寸分辨率也很多，对网站设计要求高，要兼容各种各样的电脑及浏览器。顶: <ins data-digg="踩: <ins data-digg="
210楼&& 09:42:17 喜欢这种设计，很适合博客网站顶: <ins data-digg="踩: <ins data-digg="
211楼&& 09:40:36 这个不错，现在终端尺寸千奇百态，以后还要出模块化的顶: <ins data-digg="踩: <ins data-digg="
212楼&& 09:32:24 支持松哥技术型文章，讨厌软文，讨厌替人家打广告。体谅一下我们松粉吧。顶: <ins data-digg="踩: <ins data-digg="
212楼&& 10:55:54 是啊，现在松哥的文章大多都是软文啦顶: <ins data-digg="踩: <ins data-digg="
213楼&& 09:28:58 对我来说这就是天书顶: <ins data-digg="踩: <ins data-digg="
213楼&& 10:56:54 呵呵，多看几遍，就懂啦顶: <ins data-digg="踩: <ins data-digg="
213楼&& 09:47:08 天书？没那么夸张吧？顶: <ins data-digg="踩: <ins data-digg="
214楼&& 09:28:39 学习了，我的Wordpress的模板是大前端的！顶: <ins data-digg="踩: <ins data-digg="
215楼&& 09:28:25 怎么没有人评论。我想说这种东西松哥早都应该发啦。松哥原来的url是。现在改了,变成自适应了顶: <ins data-digg="踩: <ins data-digg="
215楼&& 11:22:14 也有好多人评论，不过就是松哥最近老是给人家打广告，让我们这些小粉丝。。。顶: <ins data-digg="踩: <ins data-digg="
216楼&& 09:26:16 这么牛，门户网站可以用这种吗。顶: <ins data-digg="踩: <ins data-digg="
216楼&& 11:29:42 那就试试呗，或许成功了呢顶: <ins data-digg="踩: <ins data-digg="
217楼&& 09:25:28 感谢老大很好多文章。元旦放假安排2015！ 顶: <ins data-digg="踩: <ins data-digg="
217楼&& 11:49:48 这么早元旦假期就出来啦顶: <ins data-digg="踩: <ins data-digg="
218楼&& 09:19:42 抢沙发，移动网页不咋整个呢顶: <ins data-digg="踩: <ins data-digg="
219楼&& 09:19:32 技术宅去折腾吧顶: <ins data-digg="踩: <ins data-digg="
220楼&& 09:18:53 不错，但是一直怀疑不知道用手机看的人多不多顶: <ins data-digg="踩: <ins data-digg="
221楼&& 09:17:47 网页设计很实用顶: <ins data-digg="踩: <ins data-digg="
222楼&& 09:10:07 是沙发吗？谢谢松松，很好的教程！顶: <ins data-digg="踩: <ins data-digg="
223楼&& 09:09:17 现在自适应的主题很受欢迎，当初找了很久，后然才发现，原来wordpress自带的主题就是自适应的！顶: <ins data-digg="踩: <ins data-digg="
224楼&& 09:08:30 不错!顶: <ins data-digg="踩: <ins data-digg="
225楼&& 09:08:11 响应式网页是趋势，比手机版简单快捷顶: <ins data-digg="踩: <ins data-digg="
226楼&& 09:04:43 那么问题来了，挖掘机技术哪家强顶: <ins data-digg="踩: <ins data-digg="
227楼&& 09:03:51 这个会使代码增多吧顶: <ins data-digg="踩: <ins data-digg="
228楼&& 09:03:25 感觉好简单，添加几段代码就可以了。我也想要让我的网站能够有自适应的效果。我的不是个人站，是不是实现起来就比较难。顶: <ins data-digg="踩: <ins data-digg="
229楼&& 09:02:27 因为用的wordpress，选的主题直接就是响应式的。太方便了。估计这篇是给技术类看的。顶: <ins data-digg="踩: <ins data-digg="
230楼&& 09:01:36 这个好，学习到了！顶: <ins data-digg="踩: <ins data-digg="
231楼&& 09:01:34 经改改版后，非常不错。非常有利于优化顶: <ins data-digg="踩: <ins data-digg="
232楼&& 09:01:16 做过wap站、做过siteApp、做过第三方，也做过独立APP，现在又做了个自适应的模板。所谓“响应式网页设计(Responsive Web Design)”也就是自适应，就是可以自动识别屏幕宽度、并做出相应调整的网页设计。就是输入本站域名，手机、平板、PC端显示的效果不同的，但是URL确是相同的。顶: <ins data-digg="踩: <ins data-digg="
233楼&& 08:57:45 wap站貌似火起来了！！！！！！！顶: <ins data-digg="踩: <ins data-digg="
233楼&& 15:46:43 不是wap火了，而是移动端火了顶: <ins data-digg="踩: <ins data-digg="
234楼&& 08:57:15 技术类，，琢磨中。。。顶: <ins data-digg="踩: <ins data-digg="
235楼&& 08:52:07 常识下试试顶: <ins data-digg="踩: <ins data-digg="
236楼&& 08:51:45 卢松松的博客都是实用性很强的文章，值得学习！顶: <ins data-digg="踩: <ins data-digg="
237楼&& 08:48:10 不错 ，关注过张力的模板顶: <ins data-digg="踩: <ins data-digg="
238楼&& 08:47:17 正在学习html5 响应式交互设计 这样用户体验更好了！顶: <ins data-digg="踩: <ins data-digg="
239楼&& 08:40:56 页面设计、美观也是重要的！顶: <ins data-digg="踩: <ins data-digg="
240楼&& 08:40:08 这个确认不错，值得学习。顶: <ins data-digg="踩: <ins data-digg="
241楼&& 08:37:20 学习了顶: <ins data-digg="踩: <ins data-digg="
242楼&& 08:36:06 这个不错，试试看顶: <ins data-digg="踩: <ins data-digg="
242楼&& 18:08:32 学习了，很实用啊。顶: <ins data-digg="踩: <ins data-digg="
(window.slotbydup=window.slotbydup || []).push({
id: '2398785',
container: s,
size: '760,90',
display: 'inlay-fix'
名 称 必填
邮 箱 选填
网 址 选填
◎已有人评论，微信：QQ
(window.slotbydup=window.slotbydup || []).push({
id: '2398769',
container: s,
size: '300,250',
display: 'inlay-fix'
最牛评论 85233922115715285
最近活动 大会新品上线双十一