网页设计：响应式VS.自适应，哪种设计更好呢？ - 设计 - 伯乐在线
& 网页设计：响应式VS.自适应，哪种设计更好呢？
移动设备的发展让我们不能再忽略它们，人民用它们访问网站，而不是台式电脑。如果你的网站还不能再移动端浏览，那么你的商机将大大减少，并且访问量也不会增加。
有什么不一样呢?
响应式是流布局，它会自动适应屏幕大小，不管是什么设备。响应式使用CSS完成设备判断。这种基于网格的流布局会自动调整网页的高度和宽度来使用不同尺寸的屏幕，并让其现实正确。
自适应则采取多个不同的布局设计，多个屏幕的尺寸，使用哪个布局取决于屏幕类型。自适应作品用屏幕尺寸来决定用哪套布局。
如何比较响应式和自适应?
响应式网页会是一个更难的选择，因为它需要用CSS和结构来确保网页能再任何大小上现实，让一套布局能在任何屏幕上使用是一件令人生畏的事情。
自适应的设计不太灵活，它只能在其预先设计好的屏幕上正常显示，如果市面上出现了一个新的尺寸，你可能就要修改你的设计了，活着干脆重设计一个，响应式网站在这方面更灵活些，自适应的网站会经常需要一些例行公事的维护。
我们的设计到底是使用响应式还是自适应呢？
在大多数情况下，响应式网站是个安全的选择。无论屏幕大小，它都能有很好的现实性能，而且早起设计的时候也会解约很多时间。
但是，最终还是要看内容，如果内容太多，页面信息复杂，建议使用自适应的模式，因为这样设计移动端要考虑的会简单一些，而且更容易做适配。如果内容少，当然首选响应式。市面上也有一些典型的例子，比如“淘宝”，因为首页内容太多，所以只能选择自适应的模式，PC端和移动端的内容差别很大。再如“36kr”他们就是典型的响应式，因为信息架构简单。30个免费的自适应网站模板 | 设计达人
爱设计，爱分享。
30个免费的自适应网站模板
赞助商链接
对于美工来说，很多时候都要赶稿，比如某某专题要xx时间内上线，但是如果按平时那样制作的话肯定会花很多的时间，而且要加班到很晚……所以这种情况我们可以使用一些现成素材或是网页模板来代替，比如设计达人网上精选的模板及素材都很不错哦！
今天我们整理自spckyboy上30个免费的自适应()网站模板，这些模板已经输出成HTML格式，所以你只需要准备好内容去修改对应的就可以了，当然你也可以改动它一些布局。
PS:在下载这些模板的时候可能有些需要你提供EMIAL才放出下载链接。
Tessellate
Tessellate是一个简约的单页面模板。
Fore 这个网站模板使用了 Sass & Pear技术来编写。
ShowPage适用于APP或产品的着陆页。
Pichichi响应式网站模板，适用于展示个人作品、摄影、图像等。
My Kingdom
My Kingdom是一个简约干净的响应式设计网站模板，有多个黑色、橙红、以及黑灰多个色彩搭配方案，使用HTML5/CSS3技术编写，适合用作企业、非企业等公司网站。
Piccolo 使用Bootstrap前端框架搭建的一个Web HTML模板，这个模板一共有19个页面布局，如滑块、可排序的画廊、灯箱、弹出窗口、提示、图标等等。
Harbour 适合用于个人网站的HTML模板。
SB Admin 2
SB Admin V2 是一个后台HTML模板，使用Bootstrap框架制作，支持自适应和手持设备浏览。
Treviso 这个模板的页面设计干净美丽，下载包除了HTML文件外还包含有PSD源文件哦！
Overflow为单个页面网页，迷你简约。
使用Bootstrap 3框架做的单页面模板。
StockDocs 这个用来做产品的教程、网站FAQ、用户帮助中心等页面不错。
TemplateVamp
TemplateVamp是使用Bootstrap构建的一个后台管理界面，简约漂亮。
该admin模板已经有很多的布局页面，比如ICON、管理系统首页、图标统计可以说是很完整的一个后台模板，喜欢的可以去尝试下。
Big Picture
适用于图像、摄影作品展示的个人作品网站。
Freebix是一个设计漂亮的多用途HTML网站模板。
Detox 是一个博客类的模板，使用Sass & Pear编写。
Singolo 是一个扁平化风格的单个页面模板，颜色搭配不错哦。
Willamette
又一个单页的网站的模板：Willamette.
要做摄影类的展示网站吗？Picku这个就适合你了。
Hawthorne这个模板也是适合作品展示用。
Juntos 是一个功能丰富多彩的非营利性网站模板。
时尚的个人博客模板。
一个简洁的企业类博客模板。
Landing Page
使用Bootstrap 3搭建的着陆页模板。
Mamba为扁平风格的单页面模板，用bootstrap构建。
SuitsTheme
SuitsTheme 模板的设计主要为蓝色风格，适全做企业网站官方首页，应该不错哦。
Landy 是一个灵活的单页面网站模板。
Shop 适合用于小型购物网站模板。
Zeences为一个暗调配色的博客模板。
Simple是一个简约多用途模板。
看了这么多个网站模板，有没有喜欢的呢？你可以用这些模板来构建自己的个人博客、着陆页或公司的网站哦！
赞助商链接
喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。
艺术与审美入门之书
设计师必看
手机APP设计
新手推荐！
Web用户体验入门书籍
web前端&设计群青青子衿, 悠悠我心, 但为君故, 沉吟至今
自适应网页设计的方法
　　昨天中午Google进行了一次在线讲座，讲述自适应网页设计的概念和方法，维护同一个网页代码，即可使网站在多种浏览设备（从桌面电脑显示器到智能手机或其他移动产品设备）上具有更好的阅读体验，这里我将该讲座内容简要的整理一下。　　1、在HTML头部增加viewport标签。　　在网站HTML文件的开头，增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放。代码如下：　　&meta name=&viewport& content=&width=device-width, initial-scale=1& /&　　这段代码支持Chrome、Firefox、IE9以上的浏览器，但不支持IE8以及低于IE8的浏览器。　　2、在CSS文件尾部增加针对不同屏幕分辨率的规则。　　例如使用如下的代码，可以让屏幕宽度低于480像素的设备（如iPhone等），网页侧栏隐藏中部内容栏宽度自动调节。以下代码针对Z-Blog，WordPress相关标签名称只需修改一下即可。@media screen and (max-device-width: 480px) {& #divMain{& float:& width:& }& #divSidebar {& display:& }}　　3、布局宽度使用相对宽度。　　网页总体框架可以使用绝对宽度，但往下的内容框架、侧栏等最好使用相对宽度，这样针对不同分辨率进行修改就方便。当然也可以不用相对宽度，那就需要在 @media screen and (max-device-width: 480px) 里面增加各个div的针对小屏幕的宽度，实际上更麻烦。　　4、页面使用相对字体（非必要）　　在HTML页面上不要使用绝对字体（px），而要使用相对字体（em），对于大多数浏览器来说，通常用 em = px/16 换算，例如16px就等于1em。　　5、图片自适应（非必要）　　img标签的话，只需要设置 max-width: 100%;或width:100%; 语句为：img { max-width: 98%; }　　css加载的background-image如何自适应大小呢，其实CSS3中是可以实现的，添加如下语句：background-size:100% 100%;　　根据上面讲述的几点内容，我针对我博客的CSS进行了一些修改，发现可以从iPhone手机浏览到体验更佳的页面，但有一个问题没有解决，就是顶部导航栏navbar显示有问题，换行后被下面的文章盖住了，不知道怎样能更好地解决这个问题（更新：经过网友提示，在导航栏divNavbar的样式里，加入&&white-space: overflow:& 即可解决这个问题）。　　下图是使用iPhone访问的，经过修改CSS为自适应网页后的月光博客首页页面，看起来比原始的未优化页面好多了吧。　　总之，根据上面四步进行修改的话，可以很简单地将一个网站修改为适合多种设备浏览的页面，这对于通过手机访问网站的用户来说，的确是一件好事。　　最后，分享一下Google关于自适应网页设计的讲座的视频地址，。
　　除非注明，文章均为原创，转载请以链接形式标明本文地址
　　本文地址：
.小李按摩博客
这博客知识很全面，我会经常来的！
顶一个，顶一个，顶一个，顶一个ww 于
16:30:22 回复顶一个，顶一个，顶一个
.大豆异黄酮
这个很有用！平时看手机网页的时候就是很难看的那种。现在可以调调
好东西，辛苦楼主分享。
可否将将在线讲座的地址贴出来呀williamlong 于
9:14:57 回复地址： t dot cn/8kqLJin
dede的网站也可以吗
为什么我在网站里加了这段代码后。在苹果6和IPAD上面看网站是好的但是在苹果4和一些手机上面下面的内容还是有点空白的。。。求大神教我 QQ是.
谷歌并给予响应网站的优先事项。尼斯博客阅读
.文字纠错者
根据上面讲述的几点内容，我针对我博客的CSS进行了一些修改，发现可以从iPhone手机浏览到体验更加的页面。体验更加---体验更佳
.大鹏小嘚吧
这个太有用了，这两天正在制定前端规范呢。
.亚瑟王152
先马克，明天再看
em = px/16 ，例如16px就等于1em
呃，关于字体单位em的说法不太准确，你也说了这是相对字体，如果它总是固定等于16px，那怎么可能还叫相对字体？这个em是一个相对的单位，1em=一个字的大小，比如首行缩进两个字符就是用“text-indent:2”这样的写法。之所以经常说1em=16px，是因为绝大多数浏览器默认情况下1em=16px，而如果你自行设置了样式改变了字体大小，相对字体大小的单位em也会随之变化。而且em能够继承，也就是说父元素设置了font-size:16px，子元素设置font-size:0.9em，那么子元素字体大小就是16*0.9=14px；然后子元素的子元素再设置个font-size:0.9em，那子元素的子元素的字体大小就是14*0.9px。williamlong 于
23:54:49 回复是的，我这里描述的不太准确，讲师也没讲清楚。
我用wp。。PC一个主题。。移动一个主题。。加一个插件自动判断搞定的。。。
实际上对导航的处理方法是将换行后的隐藏了，其实这一块最好的办法是再做一次媒体查询然后针对iPhone这样的小屏幕，把正文内容距离导航的距离拉大应该能解决的
很有用，多谢月光分享。
1em不是12像素吗，傻帽阿斯顿大王我 于
21:03:20 回复几倍与默认大小，傻，你重新定义下默认大小就不是16px了
请老大帮我看看，我用的是wordpress的主题Prower，也是自适应的，一开始什么都正常，但是到了上个星期，突然发现手机浏览变成了一个缩微版的网页，必须进行放大才能看清文字。我也不知道是不是我的代码哪里被改动了？请老大们帮着看看，我的QQ网址：iydu.net（我不是故意要发链接的，实在是不知道该怎么办，月光老大就饶了我这次吧……）田原 于
15:24:31 回复已经可以了，按照月光大大的说法，在HTML头部增加viewport标签就解决问题了！谢谢月光大大！
这个有用，我先收藏了~~
.江米小枣tonylua
基本是不做真正有价值网页不考虑带宽的的人拿来做概念性演讲的
只能适应移动端，web端不可以么？做了一个例子，web不可以。代码如下：&html&&head&&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&&title&css&/title&&meta name=&keywords& content=&&&&meta name=&description& content=&&&&meta name=&viewport& content=&width=device-width, initial-scale=1& /&&style&div{ border:1 background-color: float:}.test{ font-size:2 width:800 height:20%;}@media screen and (max-device-width: 480px) {
.test{ float: width:
}}&/style&&script&&/script&&/head& &body&&div class=&test&&你好吗。hello word&/div& &/body&&/html&
赞助商广告
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享. 转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议.如何制作html5自适应网页？
HTML5技术因为能实现各种多媒体资源的组合和网页跨屏适应，被广泛应用于网站建设领域。企业在建站的时候因为对计算机技术缺乏了解，只能听建站公司说H5自适应网页的各种好，最后任由建站公司宰割。
其实HTML5网页一点也不新奇，HTML5作为第五代超文本标记语言，2014年底的时候就发布了，目前HTML5建站技术的发展已比较成熟，一些自助建站公司早早推出了HTML5自助建站工具，极大地方便了广大有建HTML5自适应网站需求的企业。
拿为例，制作一个HTML5自适应网页只需几个小时。首先，用户登录建站宝盒后台，里面有一千多套模板，选择适合的模板点击安装，就能开始编辑自己的网站了。
网站编辑页面的素材全部都是可视化的，看到是什么样，网站做好就是什么样。模块直接添加，双击就能修改，拖拽就能改变位置，全过程不涉及程序，像装扮空间一样就能装扮自己的网页。模块确定后还能为网页添加HTML5动画效果，上百种动画形式，让你的网站与众不同，在一众同质化网站中脱颖而出，一下抓住用户的眼球。
有用户就有疑问了，怎么实现自适应呢？很简单，通过以上步骤做好的网站就是自适应的，能根据屏幕大小自动调整布局，不用写复杂编码，最麻烦的工序已经被开发者解决了。用户做好电脑网站后，手机站和微信站和PC站是同一个域名，复制到手机端就能访问。
市场上有很多免费的自助建站工具，但笔者建议，还是选收费的好。这样你的网站做出来质量比较有保障，域名空间也比免费的高一个档次，还有良好的售后服务。建站宝盒一套企业展示型官网解决方案也不过几百元，做出来的网站满意度非常高。想省钱省事做HTML5自适应网站的企业可以放心选择：
责任编辑：
声明：该文观点仅代表作者本人，搜狐号系信息发布平台，搜狐仅提供信息存储空间服务。
1010元包域名、主机、建站系统，免费SEO、O2O推广
全网覆盖式营销，轻松对接云计算、大数据、移动互联网技术
今日搜狐热点