响应式设计时代，我们该如何设计网站？
发表于 11:44|
来源Smashing Magazine|
作者Vasilis van Gemert
摘要：随着各种屏幕尺寸设备的兴起以及交互方式的多样性，之前采用的网站设计方法已不再适用。我们需要更新设计方法，更新设计观念，更新设计工具。该文从分析Web发生了哪些变化入手，引出我们该采用的新的设计理念。
不久以前，我们进行的Web设计均是针对默认的屏幕大小和输入类型。但随着各种屏幕尺寸设备的兴起，以及交互方式的多样性，这些默认值已不再适用。现在我们进行网站设计所用到的所有默认值均需要更新。Web近年来所发生的变化人们一直在谈论Web发生了改变，让我们首先看看Web究竟发生了哪些变化。屏幕尺寸90年代，Web页为640像素宽，21世纪初，其宽增长到800像素。几年以前，我们将它调整为1024像素。但就在5年前，“奇怪的事”突然发生了。小屏幕设备进入市场。一时间，我们对Web设定的宽就不再适合了。不久，平板电脑进入市场。现在屏幕视窗的高超过了宽。屏幕尺寸已没有固定的值（图片来自：）现在我们无法了解用户所使用窗体的大小。我们只能假设其宽是一个令用户舒服的随机数。这些数字是任意的，总会有一些用户会看到不完整的Web页面。在这里，我们可以先忽略这些用户。“每个人都有一个鼠标”我们总是默认每个用户都有一个鼠标。虽然我们知道，这并不总是事实。大部分设计师会忽略为不使用鼠标的用户设计交互方式。不管什么原因，那些不得不使用键盘的用户往往很难与我们的网站进行交互。但由于大部分用户确实使用鼠标，当时很多设计者认为设计只要满足大部分人就可以了，所以我们设计出的网站还是有很多人是无法使用的。事实证明，这个数据一直在增加。很多依靠鼠标进行的交互，在触摸设备上是完全不起作用的。因为用户喜欢这些设备，甚至管理者和设计师都在用它们，所以它们是很难被忽略掉。“每个人都有宽带互联网”我们另一个默认情况就是每个人都有速度超快的互联网，至少和我们的一样快。如果他们现在没有它，不久也会有的。这似乎又是实事。网速确实越来越快。但是，今天越来越多的人在使用差劲的、不可靠的3G网络。如果你曾在火车上使用3G网络，你就会明白我所说的。如果你曾在酒店使用其提供的免费Wi-Fi，你就会明白我们假设互联网越来越快是不成立的。这是我们思维中的一大变化，我们确实应该为这些用户考虑。这将对我们的设计外观产生较大影响。“大家的电脑一年比一年快”电脑越来越快，过去是这样的。如果在买电脑之前再等半年，同样的价格你就可以买一台快两倍的电脑。这主要针对新式台式机，但对于移动设备，其有比处理器速度更重要的事。例如，对于手机，最重要的是电池待机时间：你不想每次打完电话后都必须充电吧。还有另一个趋势：现在的制造商开始销售价格更低廉的设备，而非速度更快的设备。相比处理器速度，很多用户更关注价格和电池待机时间。你的老式电脑怎么样了？你可能卖了，也可能扔了。但用户仍保留并使用着。并不是每个人都拥有与我们设计师同样的硬件设备。“所有的显示器均校准过”我们很清楚这一条是不对的。只有那些可视化专业人士的显示器才进行过校准。其他人的显示器大部分都无法正确显示色彩，很多显示器还是十分差劲的。我所测试过的大部分移动手机有着相当棒的显示屏。可当在阳光下使用时，如果你幸运，或许还可以看得见内容，但却无法看到低对比度设计下的微妙渐变。人们总会使用那些低劣的显示器，而且访问你网站的人往往视力不好。越来越多的人正在看不合格的调色板。与其购买一款专业的艺术类显示器，不如购买一款廉价的显示器和几台低端设备来测试你的作品，这是更好的投资。Web在最近5年里发生了变化，创建网站的老方式已不再适用。我们需要新的方法论。，该网站为响应式设计提供了很好的资源。过去几年里，我们一直在积极地研究新方法，以解决Web在不同尺寸屏幕上的显示问题。除了响应式设计，在日益增长的设备上存在越来越多的挑战。我们必须寻找新的交互模式：我们需要可以工作于任何设备上的界面。设计过程中，一些新的约定俗成正在产生，即新的默认。下文将列出我所收集到的新的默认情况。新的默认：激活方式本想用“触控”一词，但考虑到大家对该词的理解不同，所以改为了“激活”。对于所有设备，无论他们需要怎样的输入方式，都需要用户以某种方法来激活某件事。对于鼠标，就是点击；对于触控设备，就是滑动；对于键盘，就是敲击。还有声音、在空中挥动手臂等激活方法。很多设备往往提供多种交互方式。对于各种设备，其共同点就是必须通过激活动作来完成某件事。最近，我们开始思考用户输入的其他方法。我们曾经假设人们都使用鼠标。当鼠标移至上面时显示内容，移开后则隐藏内容。在触控设备进入市场之前，该方法一直为大部分人所采用。当内容只有通过鼠标操作才能显示的话，那对于没有鼠标的触控设备该怎么办呢？不同设备要有不同的解决方案。下面看看这个下拉菜单。当鼠标停在主菜单项上，子菜单便出现。此外，你还可以点击它打开该链接。现在，你在触摸设备上敲击该菜单项，会发生什么？子菜单出现了吗？链接激活了吗？两者都发生了？还是发生了其他事情呢？在iOS上，其他事情发生了。你第一次敲击该链接时，子菜单出现了，即引发了鼠标停在主菜单项上的事件。但你需要再敲击一下这个链接，才能打开它。我们可以针对不同的输入设备定义不同的交互方式。但我认为更好的办法是确保默认的交互方式适用于所有用户。如果你确实要这么做，你可以针对特定的用户来增强这种默认体验。例如，你确定有人正在使用鼠标，那你要保证靠鼠标进行的交互方式可用；如果你确定某人的手指较粗，那你要把小按钮做得再大些。只要大家对此无疑问，只要这种改善有利于交互，就可以这样做，但默认的交互方式除外。在这些假设中，有一些，比如鼠标的使用，是很难去除的——尤其在可以提供多种交互方式的设备上，如可安装鼠标、带有触摸键盘、相机、麦克风、键盘和触摸屏的笔记本。对此要认真思考一下。你确实需要针对鼠标进行优化吗？新的默认：小屏幕正如把一辆小汽车进行压缩，虽说更美观了，但却没有以前实用了。在网站上也同样，桌面上的网站进行压缩后用到小屏幕设备上，并不一定能带来同样的用户体验。构建适用于所有屏幕上的响应式网站，首先针对小屏幕进行设计是最容易的。它会迫使你专注于真正重要的事情上：不适于小屏幕的，很可能就是不重要。它会迫使你更好地思考布局，思考页面中内容的展现顺序。上文提到的交互设计方法同样适用于图形设计——首先设计激活事件，之后再改善它。我们首先设计每个人都能看见的东西，即内容。无论屏幕大小，无论浏览器功能多少，其均能显示字符。这是我们唯一确定的事情，所以从文本开始设计是原则（大部分Kindles不支持色彩，老版本的浏览器无法支持新版CSS中的很多特性，布局在小屏幕设备上处于次要位置。）我们可以从设计不同大小字体间的布局着手。无论每个人有怎样的设备，他们都可以看到该布局。该布局设计好后，你就可以针对更大屏幕设计布局。你可以把它看成针对使用更大屏幕用户的一次改善。之后，当不同的布局完成之后，你就可以为该网站增加其他“修饰” 了，如颜色、渐变、边框等。不能同时考虑其他方面。我也正尝试寻找所有不同设备（具有不同的屏幕大小，不同的特性）之间的共同点。首先针对这些共同点进行设计是合理的。而奇观的是，该一点往往被忽视：Web专业人员倾向于在高配置的设备（运行着最新版本的浏览器）上审视他们的作品。他们仅看到了改善部分，却忽略了提供基本体验的这些共同点。新的默认：内容直到最近，我们都是这样设计网站的：在顶部放上带有Logo的Banner图和导航，将子导航放在左边，右边放一些小部件，页脚放在底部。当所有这些完成后，我们再把内容塞在中部的小小空间中。这就好像我们对我们的内容很不自信，尝试提供一些用户可能会喜欢的其他东西。我们应该专注于中间的部分，保证它正常工作，看起来美观、具有可读性。确保所有人理解它，发现它有用。一旦你完成了内容部分，你可以自问一下，该内容确实需要一个Banner？Logo？子导航？它必须要有一个导航吗？它确实需要所有的这些小部件吗？显然最后一个问题的答案是“不”。我不理解这些小部件有什么用。在我看来，没有任何小部件比空白区域更美观。从内容开始着手，可以帮助我们找出很多有趣的解决方案。例如，Logo确实需要放在每页的顶部吗？在很多网页中，放在页脚部分效果可能更好，如在数字类型的导航中，或在注册页面中。子导航中的很多链接放在主要内容区域的相关部分效果可能更好。当观看页面布局时，主要导航比主要内容更重要吗？大部分情况下，并不是。我通常认为导航属于页脚内容。在页面顶部放一个“跳转”链接可以把访问者引导至导航处，也可获得导航，并将其显示在顶部。在响应式Web设计时代，我们需要很多新的、聪明的解决方案。过程改进看完上面内容后，你可能明白这只是过程改进。从文本开始，对文本进行设计，根据不同的屏幕大小和设备对它进行优化，之后再针对特殊属性进一步优化，如鼠标的使用，针对胖手指的设计。很多Web开发人员基于该原则构建网站。他们把漂亮的Photoshop制图转化成上述不同的层。如果开发者有很好的设计感且关注细节，这可以产生很好的效果。但如果他们并非如此（大部分情况是这样的），便很容易设计出可用性不好、简陋的产品。我并不是说不让设计者使用Photoshop。如果那是你的工具，继续使用它。但要记住，你正在设计Web的不同层，不是Photoshop中的层。一个Web要比单张漂亮图片包含更多内容。人们会以各种方式看我们的设计，我们在为所有这些人进行设计。请记住，我们不仅仅为使用笔记本的CEO设计，还为在火车上或使用免费Wi-Fi的人设计。工具上面也提到了，在设计Web过程中，Photoshop一直被滥用。好设计工具的缺失是造成过程改进难以进行的原因之一。我们所使用的工具大部分是帮助我们为网站增加“修饰”，而不是设计其核心。很幸运，针对特定功能的小型设计工具越来越多。如Gridset帮助我们针对不同的屏幕尺寸设计网格。好的设计工具可以帮助我们定义排版。把这些设计工具融入到我们的设计过程中，我们可以设计出更好的作品。结论现在的网站设计与以前已大不同。固定、单一的交互方式已不再适用。我们的设计过程需要新的起点。除了上文提到的，还有很多。就拿我们常用的表单来说吧，它足够用一系列文章来讲述。希望大家在设计过程中，可以创新出更多好方法。（编译/陈秋歌 责编/魏兵）原文链接：
推荐阅读相关主题：
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章您的赞赏，是对我创作的最大鼓励。|赞赏
收藏已收藏 | 15赞 | 15
分享到微信扫码分享到微信
投稿、稿件问题联系Q：
1540篇作品18.5m阅读总量
热门问题12345678910匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。网页布局之响应式设计简明指南
作者：佚名
字体：[ ] 来源：互联网 时间：04-12 14:44:13
这篇文章主要介绍了网页布局的响应式设计简明指南,通俗易懂,实例讲解,需要的朋友可以参考下
一、为什么要使用响应式设计？
我们想让我们的网站通过响应用户的行为、设备的屏幕大小和屏幕方向，从而在所有设备上都能用。
二、一个碎片化的世界
截止2013年，有成千上万种不同的设备在浏览网页，所以我们不可能设计出适应所有屏幕大小的网页。相反，我们必须得采用一种更加流畅的方式去设计。
三、移动优先
最近一个比较火的词叫移动优先。它的意思是，先为移动端设计样式，然后再根据需求去优化更大屏幕的样式。换句话说，假如你把移动端样式当成网站的默认样式，且以后不用去优化它，一步到位。那就更省事了！代码如下:&假定默认使用一个灵活但简单的布局，你的确可以适配各种浏览器，但这还不算是完全做到了响应式布局。所以当我们谈论「移动优先」，实际上是在说「渐进增强」。&&Ethan Marcotte
四、用 Min-width 进行媒体查询（ Media Queries ）
现在来介绍一种特别的布局方式。 通过 min-width 来界定不同屏幕该如何布局。它能就近检测出不同设备的屏幕大小（即 media queries，可直译为媒体查询），比在样式表末尾或一个单独文件中处理更简单。
代码如下:/* Small screens (default) */html { font-size: 100%; } /* Medium screens (640px) */@media (min-width: 40rem) {
html { font-size: 112%; }} /* Large screens (1024px) */@media (min-width: 64rem) {
html { font-size: 120%; }}
1、不是所有浏览器生而平等
同一份 CSS，不同浏览器渲染出来的效果不一样。为了避免出现这种情况，你可以使用类似 Normalize.css 这种更好的 CSS 来帮助你实现跨浏览器显示。当然，你要把这份CSS放在你样式表最前面。代码如下:&link rel="stylesheet" href="/css/normalize.css"&&link rel="stylesheet" href="/css/grid.css"&
2、在 Viewport 里加 Meta 标签
在你 HTML 的&head& 代码里添加 Meta 标签。它可以使 media queries 在不同设备上起作用代码如下:&meta name="viewport" content="width=device-width, initial-scale=1"&
3、CSS 盒模型
基础很重要！在深入响应式设计之前，最好把像 HTML 元素如何在浏览器中生成并渲染这类知识搞清楚。CSS 盒模型由以下四部分组成。
4、设置 box-sizing: border-box
在 CSS 文件最顶端设置 box-sizing。运用 * 通用选择器使其应用到页面的每个元素上。代码如下:*, *:before, *:after {
-moz-box-sizing: border-
-webkit-box-sizing: border-
box-sizing: border-}
5、你的选择
CSS 有个常见 BUG。是否设置 box-sizing，将意味着 border 和 padding 的值是否计算在 width 之内。
6、创建容器
一个容器将包含页面所有标签，并控制页面最大宽度. 运用容器，让我们的响应式设计更进了一步！代码如下:.container {
max-width: 48
width: 90%;}&div class="container"&
&!-- Your Content --&&/div&
在移动优先里，列默认均是 block 级别的（可以占满整行的宽度）。不需要额外的样式！代码如下:&div class="container"&
&div class="column"&
&!-- Your Content --&
&/div&&/div&
8、创建列宽
在大屏中，用 float: left 将列水平排列。然后运用 padding 设置相邻两列之间的间隙，忘掉传统的margin吧。
代码如下:&div class="container"&
&div class="row clearfix"&
&div class="column half"&
&!-- Your Content --&
&div class="column half"&
&!-- Your Content --&
&/div&&/div&&/p&
&p&@media (min-width: 40rem) {
padding-left: 1
padding-right: 1
.column.full { width: 100%; }
.column.two-thirds { width: 66.7%; }
.column.half { width: 50%; }
.column.third { width: 33.3%; }
.column.fourth { width: 25%; }
.column.flow-opposite { float: }
列应该包裹在行内，以避免其他元素堆放在其旁边造成布局混乱。否则就会出现广为人知的 clearing 问题。出现之后可以使用由 Nicolas Gallagher 发明的 clearfix 解决。代码如下:&div class="container"&
&div class="row clearfix"&
&div class="column half"&
&!-- Your Content --&
&div class="column half"&
&!-- Your Content --&
&div class="row clearfix"&
&div class="column half"&
&!-- Your Content --&
&div class="column half"&
&!-- Your Content --&
&/div&&/div&.clearfix:before,.clearfix:after {
content: " ";
display:} .clearfix:after {
clear:} .clearfix {
*zoom: 1;}
10、相对流（ Flow Opposite ）
给你想让它在移动端优先显示，而在大屏幕中右侧显示的列，添加 .flow-opposite 类。代码如下:&div class="container"&
&div class="row clearfix"&
&div class="column half flow-opposite"&
&!-- Your Content --&
&div class="column half"&
&!-- Your Content --&
&/div&&/div&@media (min-width: 40rem) {
.column.flow-opposite { float: }}
五、熟能生巧
通过这些简单的步骤，你已经走上了响应式设计之路。坚持练习，会让你的网页更好更实用。
大家感兴趣的内容
12345678910
最近更新的内容&人参与 | 时间：日 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/微信：）
1楼&& 13:24:44 我的网站用的自适应模板，不过这网上免费下载来的并不完美，谷歌站长工具还是检测出响应页面布局设计不符合移动端体验，悲催了顶: <ins data-digg="踩: <ins data-digg="
2楼&& 14:28:16 如果没有一个伟大的功能响应网站SEO将是非常艰难顶: <ins data-digg="踩: <ins data-digg="
3楼&& 15:00:17 响应式布局真的很完美的顶: <ins data-digg="踩: <ins data-digg="
4楼&& 22:08:18 响应式测试推荐 跨屏测顶: <ins data-digg="踩: <ins data-digg="
5楼&& 17:15:52 哈哈 有价值的文章 真准备个人博客用您的主题呢顶: <ins data-digg="踩: <ins data-digg="
6楼&& 17:55:48 还是不太明白啊顶: <ins data-digg="踩: <ins data-digg="
7楼&& 14:21:26 想问一下，松松，网站手机端的头部为什么不添加导航栏呢顶: <ins data-digg="踩: <ins data-digg="
8楼&& 09:20:01 谢谢，看来吾辈还得继续努力学习！顶: <ins data-digg="踩: <ins data-digg="
9楼&& 08:50:25 这个真的很有用，值得学习。顶: <ins data-digg="踩: <ins data-digg="
10楼&& 16:16:52 搜索引擎和浏览器能不将就就不将就，最终肯定是要和国际接轨的。改革开放是大势所趋，我13亿人民不可能一直陪百度过家家，谷歌才是正道。顶: <ins data-digg="踩: <ins data-digg="
11楼&& 18:06:24 新手，对代码就晕！顶: <ins data-digg="踩: <ins data-digg="
12楼&& 16:24:29 这个模板以前用过，很不错哦。现在换成了wp博客，一直还未找到喜欢的模板。顶: <ins data-digg="踩: <ins data-digg="
13楼&& 22:49:08 楼主说的有道理，对建一个新站来说比较有用。如果是改版的话，还是不要自己做了。顶: <ins data-digg="踩: <ins data-digg="
14楼&& 13:42:30 厦门突围啊的响应式网站建站平台是自助式网站建站平台，挺不错的，不涉及代码，有兴趣的可以看看 顶: <ins data-digg="踩: <ins data-digg="
15楼&& 17:15:13 希望可以在模板下载里面加入这个响应式网页，快快升级模板吧！顶: <ins data-digg="踩: <ins data-digg="
16楼&& 11:50:14 现在很多网站都做不到自适应！顶: <ins data-digg="踩: <ins data-digg="
17楼&& 10:20:17 这个真的很有用，值得学习。顶: <ins data-digg="踩: <ins data-digg="
18楼&& 07:52:38 感谢卢老师的分享，学习了！顶: <ins data-digg="踩: <ins data-digg="
19楼&& 14:51:14 我就是个外行菜。。请教一个问题，就是响应式布局和html5的关系，看了看国外的网页设计貌似两者是相对应的，是不是html5在这方面是有优势的？大神们能否给扫扫盲 谢谢！顶: <ins data-digg="踩: <ins data-digg="
20楼&& 14:44:24 对于我的这个网站，不知道能不能做到，请大神们给个指点 顶: <ins data-digg="踩: <ins data-digg="
21楼&& 00:51:27 是啊，暂时用不了，只能等以后松哥更新了主题再用了。顶: <ins data-digg="踩: <ins data-digg="
22楼&& 00:43:09 啥时候研究出来了，还请在你博客分享给大家哦，让我们这些使用松哥这个主题的人也都能用上。顶: <ins data-digg="踩: <ins data-digg="
23楼&& 00:40:53 我很期待松哥这个主题啥时候能够升级为响应式，那时使用这个主题的所有朋友都可以使用上了。顶: <ins data-digg="踩: <ins data-digg="
24楼&& 13:22:00 非常感谢，学习了。顶: <ins data-digg="踩: <ins data-digg="
25楼&& 13:18:20 谢谢，看来吾辈还得继续努力学习！顶: <ins data-digg="踩: <ins data-digg="
26楼&& 17:27:56 暂时不共享，需要付费购买的！顶: <ins data-digg="踩: <ins data-digg="
27楼&& 11:39:30 文章不错，看了很多，受益非浅顶: <ins data-digg="踩: <ins data-digg="
28楼&& 15:51:16 html5+css3打造属于你的响应式网站顶: <ins data-digg="踩: <ins data-digg="
29楼&& 16:33:59 还是用bootstrap省心一些吧顶: <ins data-digg="踩: <ins data-digg="
30楼&& 23:26:23 网站的内容的确不错，粘在这里看了好多偏，还收藏了，明天接着看。新仔裤顶: <ins data-digg="踩: <ins data-digg="
31楼&& 12:43:49 这个网站真不错，点个赞吧。顶: <ins data-digg="踩: <ins data-digg="
32楼&& 14:38:40 真的很不错，不过我真没有搞定，搞了2个多小时，没有实现这个功能。顶: <ins data-digg="踩: <ins data-digg="
33楼&& 12:18:53 文章不错，很实用，同意点赞。顶: <ins data-digg="踩: <ins data-digg="
34楼&& 11:07:17 学习了 高手在民间啊顶: <ins data-digg="踩: <ins data-digg="
35楼&& 10:49:18 文章很不错，技术型人才可以试试，感谢分享，值得赞一个！顶: <ins data-digg="踩: <ins data-digg="
36楼&& 08:45:46 我之前不知道怎么设计网页看了卢松松的写的文章现在会了顶: <ins data-digg="踩: <ins data-digg="
37楼&& 23:08:26 看起来挺复杂啊，感谢分享！顶: <ins data-digg="踩: <ins data-digg="
38楼&& 18:19:08 看起来挺复杂啊，感谢分享！顶: <ins data-digg="踩: <ins data-digg="
39楼&& 10:13:41 博主大牛！受教！顶: <ins data-digg="踩: <ins data-digg="
40楼&& 09:28:45 查询浏览器宽度，改变css顶: <ins data-digg="踩: <ins data-digg="
41楼&& 22:13:20 非常好，不懂代码，不过非常喜欢顶: <ins data-digg="踩: <ins data-digg="
42楼&& 00:01:48 学习了 高手在民间啊顶: <ins data-digg="踩: <ins data-digg="
43楼&& 21:31:51 这篇文章可以说是我的大爱了。本人是做网赚的。也一直想要个响应式页面。设计分享。顶: <ins data-digg="踩: <ins data-digg="
44楼&& 17:10:00 松松肯定不会看到我的回复，哈哈顶: <ins data-digg="踩: <ins data-digg="
45楼&& 16:11:22 谢谢！好心人~顶: <ins data-digg="踩: <ins data-digg="
46楼&& 21:54:58 请教一下松哥，“使用asp版卢松松主题的朋友，可以直接把本站的CSS拿去用”，不行啊！模板文件和松哥的有很多不同，直接应用不行啊，希望可以在模板下载里面加入这个响应式网页，快快升级模板吧！顶: <ins data-digg="踩: <ins data-digg="
46楼&& 00:40:53 我很期待松哥这个主题啥时候能够升级为响应式，那时使用这个主题的所有朋友都可以使用上了。顶: <ins data-digg="踩: <ins data-digg="
47楼&& 13:18:50 感觉看起来有点复杂，就不操作了顶: <ins data-digg="踩: <ins data-digg="
48楼&& 12:38:08 我的是松松模板 可以直接用吗 css直接加进去就可以吗顶: <ins data-digg="踩: <ins data-digg="
49楼&& 12:16:55 对于我的这个网站，不知道能不能做到，请大神们给个指点顶: <ins data-digg="踩: <ins data-digg="
50楼&& 08:56:15 对于网络新手，这文章我确实看不懂顶: <ins data-digg="踩: <ins data-digg="
51楼&& 22:16:44 响应式网页很不错哦！就是不懂怎么弄顶: <ins data-digg="踩: <ins data-digg="
52楼&& 21:06:41 建议直接添加到模板升级里，自己修改好复杂，又会出错顶: <ins data-digg="踩: <ins data-digg="
53楼&& 20:59:10 很不错 不过还是用程序方便一些顶: <ins data-digg="踩: <ins data-digg="
54楼&& 16:44:28 很不错哈 可惜我是wp顶: <ins data-digg="踩: <ins data-digg="
55楼&& 22:00:25 正需要这个呢，自己修改有点难度顶: <ins data-digg="踩: <ins data-digg="
56楼&& 17:10:37 我替松哥解答一下吧，在他的一篇文章中提到过，没记错的话好像是华夏名网的主机。另外，从松哥博客的流量来看，主机应该不会很便宜的，价格可能最少在3，4千元左右吧？只是猜测，不对请勿拍砖！顶: <ins data-digg="踩: <ins data-digg="
56楼&& 16:11:22 谢谢！好心人~顶: <ins data-digg="踩: <ins data-digg="
57楼&& 17:01:55 discuz的有相关的模板,好像管理后台就可以直接设置,到 【界面】---&【风格管理】中看看。顶: <ins data-digg="踩: <ins data-digg="
58楼&& 16:56:39 浏览智能了,站长颓废了,太多的技术需要了解需要不断学习,稍微停下就要落后了.相信今后定会有更先进的网络技术出现,能把站长朋友从技术困围中解救出来.顶: <ins data-digg="踩: <ins data-digg="
59楼&& 16:42:45 你有什么想法吗?给大家分享一下!这个比多少$Money更有吸引力!顶: <ins data-digg="踩: <ins data-digg="
60楼&& 16:09:15 这个不好学呀顶: <ins data-digg="踩: <ins data-digg="
61楼&& 16:07:23 羡慕你们这些技术大牛哟顶: <ins data-digg="踩: <ins data-digg="
62楼&& 15:22:27 我们的站用的就是响应式的，的确很好！顶: <ins data-digg="踩: <ins data-digg="
63楼&& 15:21:06 又来学习了，真心不错！！顶: <ins data-digg="踩: <ins data-digg="
64楼&& 15:20:41 又学习了，真心不错！！顶: <ins data-digg="踩: <ins data-digg="
65楼&& 14:12:40 松哥真实牛，多么复杂的东西，在你文字里就是玩具一样作用自如。顶: <ins data-digg="踩: <ins data-digg="
66楼&& 13:39:35 有一点不好的就是，响应设计调用图片的时候调用的是同一张图片，手机打开会比较耗流量，速度也会慢一些顶: <ins data-digg="踩: <ins data-digg="
67楼&& 13:15:35 个人感觉 响应式可能不利于优化 以及广告位的布局顶: <ins data-digg="踩: <ins data-digg="
68楼&& 12:20:06 这个绝对是不错的选择顶: <ins data-digg="踩: <ins data-digg="
69楼&& 11:17:39 虽然有些看不懂，就当路过学习下吧。。。。。。顶: <ins data-digg="踩: <ins data-digg="
70楼&& 11:15:50 这种既满足用户体验，也是网站发展的趋势吧顶: <ins data-digg="踩: <ins data-digg="
71楼&& 10:45:46 感谢松哥的分享了。代码已拿去研究！顶: <ins data-digg="踩: <ins data-digg="
71楼&& 00:43:09 啥时候研究出来了，还请在你博客分享给大家哦，让我们这些使用松哥这个主题的人也都能用上。顶: <ins data-digg="踩: <ins data-digg="
72楼&& 09:16:21 对于我们这种代码白痴来说，难度太高了，完全看不懂啊顶: <ins data-digg="踩: <ins data-digg="
73楼&& 09:15:54 我的网站就是用的这个模板。感觉很好，就是主机太差啊。顶: <ins data-digg="踩: <ins data-digg="
74楼&& 09:08:31 感谢卢哥分享顶级干货顶: <ins data-digg="踩: <ins data-digg="
75楼&& 08:42:45 花了一个晚上终于完成响应式了，感谢松哥的教程，我现在直接吧wap插件删除了。其中的导航js我加载了无法完成下拉菜单，不知道松哥什么时候贡献下。顶: <ins data-digg="踩: <ins data-digg="
76楼&& 07:35:04 我的手机是3.5寸的屏，您的字体显示的太小，还要放大才可以看，不比卢老师的好。顶: <ins data-digg="踩: <ins data-digg="
77楼&& 00:20:51 响应式网页优点有以下几个：1、对用户友爱，针对不同分辨率，操作方便；2、积累分享：可以让网站通过单一的URL地址收集所有的社交分享链接。3、无重定向：响应式Web设计最大的优点之一是，你不必在乎任何重定向，它包含无用户代理定向。4、更少维护5、开发、维护、运营成本优势：页面只有一个，只是针对不同的分辨率、不同的设备环境进行了一些不同的设计，所以在开发、维护和运营上，相对多个版本，能节约成本。顶: <ins data-digg="踩: <ins data-digg="
78楼&& 00:15:23 响应式网页缺点有以下几个：1. 页面加载的代码多了，导致文件增大了，影响加载速度。为了适配不同的设备，响应式设计需要大量专门为不同设备打造的css及js代码，这影响了页面加载速度。尤其是js代码，若处理不好，在配置低的机子上浏览会很卡。虽然可以通过某些技术选择性地加载响应式设计代码，但浏览器对这方面的机制支持还不够完善。2. 在响应式设计中，图片、视频等资源一般是统一加载的，这就导致在低分辩率的机子上，实际加载了大于它的显示要求的图片或视频，导致不必要的流量浪费，影响加载速度。虽然现在有各种智能判断设备特性而加载不同图片或视频的技术，但浏览器支持同样不够完善。3. 对大型门户或电商网站来说，响应式设计目前确实不太适合。因为响应式设计的基本原则是不会因设备不同而给予用户不同的内容（比如在低分辩率设备上删减某些内容），而大型门户或电商网站的单页内容非常多，当缩减到低分辨率设备上，又要保证内容全部可浏览时，必然导致页面拉长，浏览困难度增加。所以很多大型门户或电商网站都会提供一个移动设备版的网站，或者干脆直接让用户缩放网页进行浏览。为不同的设备提供优化的浏览体验，这个肯定是网站开发所追求的目标，也是网站技术发展的趋势。但响应式设计只是实现这一目标的其中一个手段，只适用于某些类型的网站（博客，新闻资讯类），不可一概而论的。顶: <ins data-digg="踩: <ins data-digg="
79楼&& 23:55:44 discuz的怎么弄呢？顶: <ins data-digg="踩: <ins data-digg="
79楼&& 17:01:55 discuz的有相关的模板,好像管理后台就可以直接设置,到 【界面】---&【风格管理】中看看。顶: <ins data-digg="踩: <ins data-digg="
80楼&& 22:25:37 还是看不懂，一片糊涂！顶: <ins data-digg="踩: <ins data-digg="
81楼&& 22:16:51 卢大师，你用的是哪里的空间啊，速度比较快，推荐给我用下啦~谢谢~顶: <ins data-digg="踩: <ins data-digg="
81楼&& 17:10:37 我替松哥解答一下吧，在他的一篇文章中提到过，没记错的话好像是华夏名网的主机。另外，从松哥博客的流量来看，主机应该不会很便宜的，价格可能最少在3，4千元左右吧？只是猜测，不对请勿拍砖！顶: <ins data-digg="踩: <ins data-digg="
81楼&& 16:11:22 谢谢！好心人~顶: <ins data-digg="踩: <ins data-digg="
82楼&& 21:52:11 这些做大做强了确实还是蛮不错、、顶: <ins data-digg="踩: <ins data-digg="
83楼&& 19:16:13 好牛呀，会技术就是强！顶: <ins data-digg="踩: <ins data-digg="
84楼&& 19:13:49 有时间也研究下这种响应式网页，现在网站使用siteApp页面显示不理想.顶: <ins data-digg="踩: <ins data-digg="
85楼&& 15:14:31 具体实施起来还是需要很多知识点.这只是最后呈现的效果顶: <ins data-digg="踩: <ins data-digg="
86楼&& 14:49:09 现在流行这种顶: <ins data-digg="踩: <ins data-digg="
87楼&& 14:21:20 现在好像都特别流行这个响应式网页，挺松哥说得那么简单，有空我也深入研究看看自己能够也折腾出一套模版出来。顶: <ins data-digg="踩: <ins data-digg="
88楼&& 14:14:02 这个还不错，果断分享~顶: <ins data-digg="踩: <ins data-digg="
89楼&& 14:00:15 那么问题来了,哈哈哈顶: <ins data-digg="踩: <ins data-digg="
90楼&& 13:11:14 还是松松好，什么都拿出来分享。顶: <ins data-digg="踩: <ins data-digg="
91楼&& 13:05:48 这个倒是可以。记得刚到这个网站的时候还没有这个设计。今天听了刚发现顶: <ins data-digg="踩: <ins data-digg="
92楼&& 13:04:33 不错，discuz要是实现就好了顶: <ins data-digg="踩: <ins data-digg="
93楼&& 13:01:52 厉害，学习下，这个技术很以后很长时间是非常实用的。顶: <ins data-digg="踩: <ins data-digg="
94楼&& 12:41:57 为啥看不到我的评论，要审核吗顶: <ins data-digg="踩: <ins data-digg="
95楼&& 12:16:34 这个是不错的技术，学习了。顶: <ins data-digg="踩: <ins data-digg="
96楼&& 11:08:11 可惜了，对代码不熟悉顶: <ins data-digg="踩: <ins data-digg="
97楼&& 10:50:01 好嘛 来看看 了解学习一下顶: <ins data-digg="踩: <ins data-digg="
98楼&& 10:41:44 不错 点赞顶: <ins data-digg="踩: <ins data-digg="
99楼&& 10:19:57 张力一样的博客网页，看上去特别的美观。而且我还发现一个问题，360搜索引擎特别喜欢WP程序网页，我的网站是从ASP改版的。360直接把关键词排在首页第一位了。顶: <ins data-digg="踩: <ins data-digg="
100楼&& 10:17:21 松哥网站广告蛮多的，不知道一个月收入多少呀顶: <ins data-digg="踩: <ins data-digg="
100楼&& 16:42:45 你有什么想法吗?给大家分享一下!这个比多少$Money更有吸引力!顶: <ins data-digg="踩: <ins data-digg="
101楼&& 10:16:42 没学会顶: <ins data-digg="踩: <ins data-digg="
102楼&& 10:15:31 这个技术性很强额顶: <ins data-digg="踩: <ins data-digg="
103楼&& 09:55:15 不错顶: <ins data-digg="踩: <ins data-digg="
104楼&& 09:11:32 我的小说站需要啊，可是不会弄顶: <ins data-digg="踩: <ins data-digg="
105楼&& 08:32:04 我的也是响应式主题顶: <ins data-digg="踩: <ins data-digg="
106楼&& 07:20:23 用了都说好，我也急需要，我的博客：晨鸟seo,有文章更新啦顶: <ins data-digg="踩: <ins data-digg="
107楼&& 06:14:19 松哥的响应式没有我的好。顶: <ins data-digg="踩: <ins data-digg="
107楼&& 07:35:04 我的手机是3.5寸的屏，您的字体显示的太小，还要放大才可以看，不比卢老师的好。顶: <ins data-digg="踩: <ins data-digg="
107楼&& 07:20:23 用了都说好，我也急需要，我的博客：晨鸟seo,有文章更新啦顶: <ins data-digg="踩: <ins data-digg="
108楼&& 02:53:36 是WP程序么？？ 要添加三个菜单，一个是左边的主导航，一个是右边的次导航，还有一个是手机导航，每个菜单勾选其中一个就可以了。顶: <ins data-digg="踩: <ins data-digg="
109楼&& 00:50:39 谢谢分享!顶: <ins data-digg="踩: <ins data-digg="
110楼&& 00:41:31 每天都用IPAD看松哥的網站，不過現在不能縮放了，字好小了，真不習慣啊顶: <ins data-digg="踩: <ins data-digg="
111楼&& 00:37:05 正在学习响应式设计~~你的可以顶: <ins data-digg="踩: <ins data-digg="
112楼&& 00:36:02 响应式页面设计自然是不会差的~顶: <ins data-digg="踩: <ins data-digg="
113楼&& 23:55:54 真的不错，如果能做成插件，直接给广告wordpress用户下载使用，不是更好吗？顶: <ins data-digg="踩: <ins data-digg="
114楼&& 23:43:22 wordpress很好用的，我的博客也是顶: <ins data-digg="踩: <ins data-digg="
115楼&& 23:41:35 专业的选择源代码很重要顶: <ins data-digg="踩: <ins data-digg="
116楼&& 23:23:08 张力顶: <ins data-digg="踩: <ins data-digg="
117楼&& 22:34:33 我的wordpress也得考虑下。。。顶: <ins data-digg="踩: <ins data-digg="
117楼&& 23:43:22 wordpress很好用的，我的博客也是顶: <ins data-digg="踩: <ins data-digg="
118楼&& 22:07:03 拿来主义了。顶: <ins data-digg="踩: <ins data-digg="
119楼&& 22:04:42 估计现在没有这个程序吧。顶: <ins data-digg="踩: <ins data-digg="
120楼&& 22:04:13 这个好，实用。顶: <ins data-digg="踩: <ins data-digg="
121楼&& 22:02:12 很多都是专门定制手机版的，PC版的兼容性真的不是很好，各种意想不到的问题。顶: <ins data-digg="踩: <ins data-digg="
122楼&& 21:44:04 响应式网页设计的快速教程（适合个人站） 学习了顶: <ins data-digg="踩: <ins data-digg="
123楼&& 21:30:11 不懂代码的我，只能干瞪眼的份了。顶: <ins data-digg="踩: <ins data-digg="
124楼&& 21:16:08 这个很好，就盼着这种自适应的例子呢，一招就搞定了各种终端设备的浏览问题顶: <ins data-digg="踩: <ins data-digg="
125楼&& 21:15:16 额..看不懂代码还是直接用别人设计好的，要个性的就得定做，，，好伤感顶: <ins data-digg="踩: <ins data-digg="
125楼&& 22:04:42 估计现在没有这个程序吧。顶: <ins data-digg="踩: <ins data-digg="
126楼&& 20:57:09 移动端是趋势哈顶: <ins data-digg="踩: <ins data-digg="
127楼&& 20:50:22 张力的博客模板我也在用哦，确实很不错的，那天晚上问张力，说只要129元一个模板，还真便宜，我用了小半天的时间就整了一个跟松哥，张力一样的博客网页，看上去特别的美观。而且我还发现一个问题，360搜索引擎特别喜欢WP程序网页，我的网站是从ASP改版的。360直接把关键词排在首页第一位了。顶: <ins data-digg="踩: <ins data-digg="
128楼&& 20:44:31 呵呵……就是那个导航不会的，还在研究中的。顶: <ins data-digg="踩: <ins data-digg="
128楼&& 02:53:36 是WP程序么？？ 要添加三个菜单，一个是左边的主导航，一个是右边的次导航，还有一个是手机导航，每个菜单勾选其中一个就可以了。顶: <ins data-digg="踩: <ins data-digg="
129楼&& 20:21:59 对于我们这些不懂代码的情何以堪呀 顶: <ins data-digg="踩: <ins data-digg="
129楼&& 22:07:03 拿来主义了。顶: <ins data-digg="踩: <ins data-digg="
130楼&& 20:15:33 相当方便啊顶: <ins data-digg="踩: <ins data-digg="
131楼&& 20:02:18 看后觉得还真不错。顶: <ins data-digg="踩: <ins data-digg="
132楼&& 19:31:03 第一次看到这样的移动端，一下就喜欢上了。顶: <ins data-digg="踩: <ins data-digg="
133楼&& 19:09:51 真不错！！受益匪浅啊！！顶: <ins data-digg="踩: <ins data-digg="
134楼&& 18:08:32 学习了，很实用啊。顶: <ins data-digg="踩: <ins data-digg="
135楼&& 17:45:37 很强大，目前正缺手机版顶: <ins data-digg="踩: <ins data-digg="
135楼&& 22:02:12 很多都是专门定制手机版的，PC版的兼容性真的不是很好，各种意想不到的问题。顶: <ins data-digg="踩: <ins data-digg="
136楼&& 17:45:35 松哥继续出好文章啊。更倾向于专门的手机网站，同时绑定上响应的手机域名，这样的排名就会靠前…比如我们万恶的UC浏览器，如果你打开极速模式进入响应式网站，仍旧会提示什么百度转码什么的，或是极速模式下面的电脑端网页的一个精简版。这么说来意义就没有了，响应式网站虽然可以很好的兼容PC和移动，但是如果考虑到搜索引擎和一些浏览器本身的技术，那么恐怕还是得要分开做分开绑定域名才好把这么好的帖子，如果将来我再也看不到了，那我该怎么办？那我该怎么办？直到我毫不犹豫的把楼主的这个帖子收藏了。我内心的那种激动才逐渐平复下来。可是我立刻想到，这么好的帖子，倘若别人看不到，那么不是浪费楼主的心血吗？经过痛苦的思想斗争，我终于下定决心，我要把这个帖子一直往上顶，往上顶！顶到所有人都看到为止！顶: <ins data-digg="踩: <ins data-digg="
136楼&& 16:16:52 搜索引擎和浏览器能不将就就不将就，最终肯定是要和国际接轨的。改革开放是大势所趋，我13亿人民不可能一直陪百度过家家，谷歌才是正道。顶: <ins data-digg="踩: <ins data-digg="
137楼&& 17:39:58 wordpress是比较容易上手的。顶: <ins data-digg="踩: <ins data-digg="
138楼&& 17:28:53 有BUG~顶: <ins data-digg="踩: <ins data-digg="
139楼&& 17:25:25 一直都想换下zblog的手机模板，但是他们就是没有。。。。也找不到wap设置的文件是哪个？求大神告诉。顶: <ins data-digg="踩: <ins data-digg="
140楼&& 17:01:41 我用wordpress建站，现在很多模版也是响应式的了。移动互联网发展太快了。但是移动页面的变现还是比较困难。顶: <ins data-digg="踩: <ins data-digg="
141楼&& 16:09:59 不错是不错，但实施起来有点复杂顶: <ins data-digg="踩: <ins data-digg="
142楼&& 15:46:43 不是wap火了，而是移动端火了顶: <ins data-digg="踩: <ins data-digg="
143楼&& 15:39:47 用wordpress不用这么麻烦，直接套个模板搞定顶: <ins data-digg="踩: <ins data-digg="
144楼&& 15:27:32 可惜，不能直接用。主题不同的。顶: <ins data-digg="踩: <ins data-digg="
145楼&& 15:27:04 看着是有点难的。像我，得完全照搬才行，稍有变化就完蛋了。顶: <ins data-digg="踩: <ins data-digg="
146楼&& 15:25:43 响应式网站是移动互联网时代的标配，很值得学习。顶: <ins data-digg="踩: <ins data-digg="
147楼&& 15:14:23 不知道张力博主(QQ)是否共享WP的模板下载地址顶: <ins data-digg="踩: <ins data-digg="
147楼&& 17:27:56 暂时不共享，需要付费购买的！顶: <ins data-digg="踩: <ins data-digg="
148楼&& 14:44:16 看起来很不错的样子 很赞哟顶: <ins data-digg="踩: <ins data-digg="
149楼&& 14:42:43 这样的用户体验很好顶: <ins data-digg="踩: <ins data-digg="
150楼&& 14:42:16 判断浏览设备，从而调用不同的css顶: <ins data-digg="踩: <ins data-digg="
151楼&& 14:20:05 看起来好像很厉害的样子啊，哈哈哈哈顶: <ins data-digg="踩: <ins data-digg="
152楼&& 14:19:54 先留个记号在看，，，每天都能从松松的博客里学到知识，谢谢松松。。。。。顶: <ins data-digg="踩: <ins data-digg="
153楼&& 14:11:22 个人感觉我没有读懂啊顶: <ins data-digg="踩: <ins data-digg="
154楼&& 14:06:42 文章看不懂，我是来看评论的。顶: <ins data-digg="踩: <ins data-digg="
155楼&& 14:04:33 推广的方法很重要，顶: <ins data-digg="踩: <ins data-digg="
156楼&& 13:30:16 技术真的有这么重要吗？顶: <ins data-digg="踩: <ins data-digg="
157楼&& 13:29:57 更倾向于专门的手机网站，同时绑定上响应的手机域名，这样的排名就会靠前…比如我们万恶的UC浏览器，如果你打开极速模式进入响应式网站，仍旧会提示什么百度转码什么的，或是极速模式下面的电脑端网页的一个精简版。这么说来意义就没有了，响应式网站虽然可以很好的兼容PC和移动，但是如果考虑到搜索引擎和一些浏览器本身的技术，那么恐怕还是得要分开做分开绑定域名才好把顶: <ins data-digg="踩: <ins data-digg="
158楼&& 13:29:31 这么好的帖子，如果将来我再也看不到了，那我该怎么办？那我该怎么办？直到我毫不犹豫的把楼主的这个帖子收藏了。我内心的那种激动才逐渐平复下来。可是我立刻想到，这么好的帖子，倘若别人看不到，那么不是浪费楼主的心血吗？经过痛苦的思想斗争，我终于下定决心，我要把这个帖子一直往上顶，往上顶！顶到所有人都看到为止！顶: <ins data-digg="踩: <ins data-digg="
159楼&& 13:27:57 高端大气上档次！顶: <ins data-digg="踩: <ins data-digg="
160楼&& 13:22:02 css文件直接替换，错位。顶: <ins data-digg="踩: <ins data-digg="
160楼&& 00:51:27 是啊，暂时用不了，只能等以后松哥更新了主题再用了。顶: <ins data-digg="踩: <ins data-digg="
161楼&& 13:21:34 我是技术盲顶: <ins data-digg="踩: <ins data-digg="
162楼&& 13:06:54
呵呵，默默的为大神们点赞！顶: <ins data-digg="踩: <ins data-digg="
163楼&& 13:04:26 没什么感觉，对于手机站这方面不是太懂。顶: <ins data-digg="踩: <ins data-digg="
164楼&& 13:03:00 好像不错，不过响应式的网页达不到APP的效果。 如果是纯展示的网站当然不必在意这些 顶: <ins data-digg="踩: <ins data-digg="
165楼&& 12:56:13 这个很好，就盼着这种自适应的例子呢，一招就搞定了各种终端设备的浏览问题顶: <ins data-digg="踩: <ins data-digg="
166楼&& 12:47:03 还好，感兴趣的可以试一试，不用感谢了，哈哈顶: <ins data-digg="踩: <ins data-digg="
167楼&& 12:41:00 没有看懂，难道来此的都是SEO高手，像我这样啥都不懂的没有么？顶: <ins data-digg="踩: <ins data-digg="
168楼&& 12:40:32 确实不错，手机浏览挺方便的。前端模板也听牛X的，推荐。顶: <ins data-digg="踩: <ins data-digg="
169楼&& 12:07:51 成为肖森舟第274号梦想赞助商，我后悔了顶: <ins data-digg="踩: <ins data-digg="
170楼&& 11:54:42 留着以后有用顶: <ins data-digg="踩: <ins data-digg="
171楼&& 11:51:32 有个板凳坐着也不错，比蹲着好顶: <ins data-digg="踩: <ins data-digg="
172楼&& 11:49:48 这么早元旦假期就出来啦顶: <ins data-digg="踩: <ins data-digg="
173楼&& 11:47:48 我等小白，何时才能学会这些代码啊。五年还是十年啊……顶: <ins data-digg="踩: <ins data-digg="
174楼&& 11:47:28 响应式确实不错！顶: <ins data-digg="踩: <ins data-digg="
175楼&& 11:43:17 哎，不懂代码的飘过！顶: <ins data-digg="踩: <ins data-digg="
176楼&& 11:42:10 看似很难，实际上很简单。顶: <ins data-digg="踩: <ins data-digg="
177楼&& 11:39:33 看来织梦也是可以实现了顶: <ins data-digg="踩: <ins data-digg="
178楼&& 11:31:42 响应式网站好处就是可以完全贴合各种浏览器和操作系统，但是也有不方便的地方，such as不容易绑定二级域名…其实现在对有移动搜索引擎，更倾向于专门的手机网站，同时绑定上响应的手机域名，这样的排名就会靠前…比如我们万恶的UC浏览器，如果你打开极速模式进入响应式网站，仍旧会提示什么百度转码什么的，或是极速模式下面的电脑端网页的一个精简版。这么说来意义就没有了，响应式网站虽然可以很好的兼容PC和移动，但是如果考虑到搜索引擎和一些浏览器本身的技术，那么恐怕还是得要分开做分开绑定域名才好把…顶: <ins data-digg="踩: <ins data-digg="
179楼&& 11:30:36 目测一大堆博客估计要短暂的挂掉一两天，各位想改的赶紧打包备份，本地测试，OK之后，再上传，或者上传开个二级目录，测试OK之后在覆盖。顶: <ins data-digg="踩: <ins data-digg="
180楼&& 11:30:31 不错 高手啊 很快就能搭建一个响应式的网站顶: <ins data-digg="踩: <ins data-digg="
181楼&& 11:30:13 干货确实好知识顶: <ins data-digg="踩: <ins data-digg="
182楼&& 11:29:42 那就试试呗，或许成功了呢顶: <ins data-digg="踩: <ins data-digg="
183楼&& 11:27:17 公司的网站刚好遇到这样的问题！同事什么都不懂嘿嘿顶: <ins data-digg="踩: <ins data-digg="
184楼&& 11:23:01 真的不错，对我的网站有些帮助，谢谢。顶: <ins data-digg="踩: <ins data-digg="
185楼&& 11:22:54 iPhone下 回复，该留言： 导航栏绝对定位没起到作用。顶: <ins data-digg="踩: <ins data-digg="
186楼&& 11:22:38 不是沙发顶: <ins data-digg="踩: <ins data-digg="
187楼&& 11:22:14 也有好多人评论，不过就是松哥最近老是给人家打广告，让我们这些小粉丝。。。顶: <ins data-digg="踩: <ins data-digg="
188楼&& 11:19:36 终于见识到了响应式设计了，看上去不错顶: <ins data-digg="踩: <ins data-digg="
189楼&& 11:12:47 现在主题做到这样就好多了，方便阅读很多！顶: <ins data-digg="踩: <ins data-digg="
190楼&& 11:12:21 现在还是需要有个响应式的主题的。顶: <ins data-digg="踩: <ins data-digg="
191楼&& 11:11:12 这样改会不会影响SEO顶: <ins data-digg="踩: <ins data-digg="
192楼&& 11:06:14 松哥做得不错顶: <ins data-digg="踩: <ins data-digg="
193楼&& 10:59:55 不是太明白顶: <ins data-digg="踩: <ins data-digg="
194楼&& 10:58:37 这个是个好东西呀，学习了爆破测振仪-中科测控顶: <ins data-digg="踩: <ins data-digg="
195楼&& 10:56:54 呵呵，多看几遍，就懂啦顶: <ins data-digg="踩: <ins data-digg="
196楼&& 10:55:54 是啊，现在松哥的文章大多都是软文啦顶: <ins data-digg="踩: <ins data-digg="
197楼&& 10:43:00 非常不错，我还想把我的周星驰粉丝网也这样搞一下顶: <ins data-digg="踩: <ins data-digg="
198楼&& 10:35:49 写的太好了，，绝对是干货分享，，可是我不懂技术，一句没看懂顶: <ins data-digg="踩: <ins data-digg="
199楼&& 10:35:11 pad那个为什么不把导航放到logo旁边呢，那么大的屏幕，不像手机一样，个人不喜欢点导航再去找东西，感觉有点麻烦顶: <ins data-digg="踩: <ins data-digg="
200楼&& 10:34:56 写的太好了，，绝对是干货分享，，可是我不懂技术，一句没看懂顶: <ins data-digg="踩: <ins data-digg="
201楼&& 10:28:50 门户网站也是这么做的顶: <ins data-digg="踩: <ins data-digg="
202楼&& 10:19:22 谢谢松哥顶: <ins data-digg="踩: <ins data-digg="
203楼&& 10:17:32 很粗浅的文章，就算是个人网站那种分类简单的网站，也是要经过大量调试的，不然最后出来的效果，只不过是“你认为ok了”，当然这也没办法，并不是人人都是设计师。顶: <ins data-digg="踩: <ins data-digg="
204楼&& 10:03:56 这个要顶，技术贴，咱现在用的百度siteapp 移动站，以后要改，等帝国cms7.2版本出现。顶: <ins data-digg="踩: <ins data-digg="
205楼&& 10:03:13 NB 响应式开发很不错顶: <ins data-digg="踩: <ins data-digg="
206楼&& 10:02:56 挺不错的代码，呵呵，一套代码实现不同的平台下有好访问。【红博客】-关注中小企业及创业顶: <ins data-digg="踩: <ins data-digg="
207楼&& 09:54:47 这个很有帮助，稍后试一下，谢谢分享了顶: <ins data-digg="踩: <ins data-digg="
208楼&& 09:47:08 天书？没那么夸张吧？顶: <ins data-digg="踩: <ins data-digg="
209楼&& 09:45:36 这个很实用，设计网站要考虑到各种各样的浏览器及电脑屏幕尺寸分辨下的显示效果。顶: <ins data-digg="踩: <ins data-digg="
210楼&& 09:43:09 这个很实用，现在浏览器很多，电脑屏幕尺寸分辨率也很多，对网站设计要求高，要兼容各种各样的电脑及浏览器。顶: <ins data-digg="踩: <ins data-digg="
211楼&& 09:42:17 喜欢这种设计，很适合博客网站顶: <ins data-digg="踩: <ins data-digg="
212楼&& 09:40:36 这个不错，现在终端尺寸千奇百态，以后还要出模块化的顶: <ins data-digg="踩: <ins data-digg="
213楼&& 09:32:24 支持松哥技术型文章，讨厌软文，讨厌替人家打广告。体谅一下我们松粉吧。顶: <ins data-digg="踩: <ins data-digg="
213楼&& 10:55:54 是啊，现在松哥的文章大多都是软文啦顶: <ins data-digg="踩: <ins data-digg="
214楼&& 09:28:58 对我来说这就是天书顶: <ins data-digg="踩: <ins data-digg="
214楼&& 10:56:54 呵呵，多看几遍，就懂啦顶: <ins data-digg="踩: <ins data-digg="
214楼&& 09:47:08 天书？没那么夸张吧？顶: <ins data-digg="踩: <ins data-digg="
215楼&& 09:28:39 学习了，我的Wordpress的模板是大前端的！顶: <ins data-digg="踩: <ins data-digg="
216楼&& 09:28:25 怎么没有人评论。我想说这种东西松哥早都应该发啦。松哥原来的url是。现在改了,变成自适应了顶: <ins data-digg="踩: <ins data-digg="
216楼&& 11:22:14 也有好多人评论，不过就是松哥最近老是给人家打广告，让我们这些小粉丝。。。顶: <ins data-digg="踩: <ins data-digg="
217楼&& 09:26:16 这么牛，门户网站可以用这种吗。顶: <ins data-digg="踩: <ins data-digg="
217楼&& 11:29:42 那就试试呗，或许成功了呢顶: <ins data-digg="踩: <ins data-digg="
218楼&& 09:25:28 感谢老大很好多文章。元旦放假安排2015！ 顶: <ins data-digg="踩: <ins data-digg="
218楼&& 11:49:48 这么早元旦假期就出来啦顶: <ins data-digg="踩: <ins data-digg="
219楼&& 09:19:42 抢沙发，移动网页不咋整个呢顶: <ins data-digg="踩: <ins data-digg="
220楼&& 09:19:32 技术宅去折腾吧顶: <ins data-digg="踩: <ins data-digg="
221楼&& 09:18:53 不错，但是一直怀疑不知道用手机看的人多不多顶: <ins data-digg="踩: <ins data-digg="
222楼&& 09:17:47 网页设计很实用顶: <ins data-digg="踩: <ins data-digg="
223楼&& 09:10:07 是沙发吗？谢谢松松，很好的教程！顶: <ins data-digg="踩: <ins data-digg="
224楼&& 09:09:17 现在自适应的主题很受欢迎，当初找了很久，后然才发现，原来wordpress自带的主题就是自适应的！顶: <ins data-digg="踩: <ins data-digg="
225楼&& 09:08:30 不错!顶: <ins data-digg="踩: <ins data-digg="
226楼&& 09:08:11 响应式网页是趋势，比手机版简单快捷顶: <ins data-digg="踩: <ins data-digg="
227楼&& 09:04:43 那么问题来了，挖掘机技术哪家强顶: <ins data-digg="踩: <ins data-digg="
228楼&& 09:03:51 这个会使代码增多吧顶: <ins data-digg="踩: <ins data-digg="
229楼&& 09:03:25 感觉好简单，添加几段代码就可以了。我也想要让我的网站能够有自适应的效果。我的不是个人站，是不是实现起来就比较难。顶: <ins data-digg="踩: <ins data-digg="
230楼&& 09:02:27 因为用的wordpress，选的主题直接就是响应式的。太方便了。估计这篇是给技术类看的。顶: <ins data-digg="踩: <ins data-digg="
231楼&& 09:01:36 这个好，学习到了！顶: <ins data-digg="踩: <ins data-digg="
232楼&& 09:01:34 经改改版后，非常不错。非常有利于优化顶: <ins data-digg="踩: <ins data-digg="
233楼&& 09:01:16 做过wap站、做过siteApp、做过第三方，也做过独立APP，现在又做了个自适应的模板。所谓“响应式网页设计(Responsive Web Design)”也就是自适应，就是可以自动识别屏幕宽度、并做出相应调整的网页设计。就是输入本站域名，手机、平板、PC端显示的效果不同的，但是URL确是相同的。顶: <ins data-digg="踩: <ins data-digg="
234楼&& 08:57:45 wap站貌似火起来了！！！！！！！顶: <ins data-digg="踩: <ins data-digg="
234楼&& 15:46:43 不是wap火了，而是移动端火了顶: <ins data-digg="踩: <ins data-digg="
235楼&& 08:57:15 技术类，，琢磨中。。。顶: <ins data-digg="踩: <ins data-digg="
236楼&& 08:52:07 常识下试试顶: <ins data-digg="踩: <ins data-digg="
237楼&& 08:51:45 卢松松的博客都是实用性很强的文章，值得学习！顶: <ins data-digg="踩: <ins data-digg="
238楼&& 08:48:10 不错 ，关注过张力的模板顶: <ins data-digg="踩: <ins data-digg="
239楼&& 08:47:17 正在学习html5 响应式交互设计 这样用户体验更好了！顶: <ins data-digg="踩: <ins data-digg="
240楼&& 08:40:56 页面设计、美观也是重要的！顶: <ins data-digg="踩: <ins data-digg="
241楼&& 08:40:08 这个确认不错，值得学习。顶: <ins data-digg="踩: <ins data-digg="
242楼&& 08:37:20 学习了顶: <ins data-digg="踩: <ins data-digg="
243楼&& 08:36:06 这个不错，试试看顶: <ins data-digg="踩: <ins data-digg="
243楼&& 18:08:32 学习了，很实用啊。顶: <ins data-digg="踩: <ins data-digg="
相关文章阅读更多：&&
(window.slotbydup=window.slotbydup || []).push({
id: '2398769',
container: s,
size: '300,250',
display: 'inlay-fix'
点赞最多 31522445141111401046937
最近活动 新品上线攻略