什么是H5响应式网站建设优点缺点_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
什么是H5响应式网站建设优点缺点
　　深圳市沙漠风网站建设公司致力于互联网...|
总评分0.0|
阅读已结束，下载本文需要
想免费下载本文？
定制HR最喜欢的简历
你可能喜欢&&2477 阅读
什么是响应式网页设计？
Responsive Web Design 是 在去年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端，根据终端屏幕的大小亦或类型而调整显示的布局与内容——而不是为每个终端做一个特定的版本。
下图列举了我们可能面对的不同的硬件设备类型、不同的操作系统、不同的屏幕分辨率：
应用响应式网页设计，可以使我们不必针对具体设备或屏幕编写单独的网页，不需另建单独的网址，一个页面适用于所有的设备，下图是一个例子，同一个网页在不同的设备中，我们看到不同的布局与内容的隐藏：
在PC中显示的网页：
到了屏幕小的移动设备上变成了这样，只有页面主题内容，不见了侧条和广告：
如何实现？
需要综合运用三个方法步骤：
第一步，Media query - 即指定不同的 CSS 显示风格
第二步，Fluid grid-即在 CSS 中使用百分比%而不是绝对值，如像素px来修饰页面布局元素的尺寸如 Div。
第三步，Fluid images/media-同样使用百分比%而不是绝对值，来修饰图像、视频、字体的显示的使其能根据不同屏幕作出调整。
第一步首先要在页面中添加：
后面的initial-scale表示初始缩放，maximum-scale表示最大缩放比例，1意味着不能进行缩放。
下面有两种方法让浏览器根据屏幕大小来选择不同的CSS样式
在 css 文件中加 @media 标签，如
@media screen and (min-width:481px)
/* 宽度大于481时应用的样式 */
@media screen and (max-width:480px)
/* 宽度小于于480时应用的样式 */
其它共用的css属性放在外边。
在页面 部分指定不同的 css。 如：
当浏览器宽度小于768px时会使用mobile.css ，不然就用前一个。
screen 是媒体类型里的一种，CSS2.1定义了10种媒体类型
and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)
(min-width: 400px) 就是媒体特性，其被放置在一对圆括号中。完整的W3C参考请看 http://www.w3.org/TR/css3-mediaqueries/#media1
第二步要注意百分比是相对于父容器来说的。
第三步，可以使用
img, object {
max-width: 100%;
这样保证图像和媒体的尺寸不会超出屏幕。
字体方面可以使用em，1em = 100%。
另外还有一种方法
flex box， CSS3 的新方法，以后加以介绍。
响应式网页设计的优缺点
工作量相对单独开发移动网站来说要小，不需要另外的域名，对于所有设备适用。
占用带宽，对于 CPU 和资源都紧张的移动设备来讲，下载了许多不需要的图片等资源，图像没有针对小屏幕优化。
针对响应式网页设计的缺点，我们可以采用移动优先设计的方法和技术技巧来克服，下一篇会有介绍，同时带大家认识一些设计工具。
本文转自博客园，出处：
高等教育出版社自然科学学术著作分社 市场助理 负责学术著作图书的营销工作等
本书主要讲解了如何运用HTML5和CSS3来进行响应式Web设计，使页面的设计与开发根据用户行为以及设备环境(...建设响应式网站有什么优势
今天的网络时代，用户们可以通过不同的设备进入网络中，但是这些设备又有着特定的屏幕尺寸、分辨率等，在这样的情况下，建设响应式的网站成为了客户的优先选择，毕竟响应式网站具有流动性以及适应屏幕大小的能力，所以这里凡科很有必要为大家介绍，建设响应式网站究竟具有哪些优势。响应式网站的智能化建设响应式网站，较大的优势是具有智能化的响应设计，这种网站可以针对用户设备显示端的尺寸不同，自动的调整网站的显示方式，让网站几乎可以适应所有的显示终端，而且还可以在浏览器中调整网站的宽度，让网站不出现滚动条，使得用户不管在任何一种显示器上浏览网站，都不会出现布局混乱、显示不全、或者是乱码的问题，从而较大程度的提高用户的网站体验。响应式网站也能节省成本建设响应式的网站，可以让客户不用再针对不同的设备而制作pc版网站，或者是手机版网站，建设一个响应式的网站，花一份的钱，就能够获得两种网站的体验，终实现一站多用的效果，从而达到节省网站建设成本。融入SEO的响应式网站建设响应式的网站，为了客户网站的后续发展，一般都会在内容和代码编写上，都会按照SEO原理进行规划，让网站具有更好的SEO基础，这样响应式网站在上线以后，对搜索引擎会有更加亲和的表现。而响应式网站融入SEO以后，网站后期就可以免于二次优化，大大加快网站的收录，排名等。随着终端设备的不断增多，要为每个设备提供良好体验的难度也在不断的加大，响应式网站作为一项极端技术，可以让网站在所有的设备中有着不错的显示，既然如此，客户在建站时也应该考虑是否为自己建设一个响应式的网站。
以上信息是否解决你的问题？
请选择原因...
描述不清晰
操作后未能解决问题
内容不正确
对产品功能不满意
提交成功！
非常感谢您的评价，我们将会在今后的工作中不断完善！制作H5响应式网页的优点
随着智能手机普及，移动端网页应用的增加，H5网页越来越流行，企业H5网站建设数量也随之提升。那么，H5网站建设有哪些优点？
1、用户体验度好
H5网页适合移动用户浏览网页，手机移动端界面有限，H5网页可以让用户不用翻页，自己喜欢的网页能够一目了然地看清楚。从上到下可以迅速来回滚动，大大减少了用户翻页所用的时间。
2、H5网页代码比较简单
H5网页有各种留白，这种网页的冗余代码比传统网页少许多，从而方便了用户，也方便网页开发设计人员。
3、拓展用户渠道方便
H5网页最大的区别就是支持多个端口的自适应，不管是大屏幕的PC端还是小屏幕的移动端、平板电脑等，都可以根据屏幕的大小来自动缩放。
4、H5网页优化更简单
H5网页对搜索引擎是相当友好的，这种网页便于蜘蛛的抓取和爬行，也有利于网站SEO优化人员的优化，也有利于原创作者保护自己的原创。
5、全新的标签，网站定义更为丰富
H5网页相对于传统网站来说，html5增加了很多语义标签，网页定义起来更加方便，也更为细致。
6、支持多媒体元素
H5网页可以支持视频、音频、flash动画等多媒体元素，传统网站中过多的图片和视频不利于网站的加载速度，也不利于搜索引擎的抓取和搜索。H5网页则可以随意增加各种多媒体元素，完全不受限制。
7、H5网页有利于移植
一套完整的H5网页对于开发者来说，就相当于一个固有的模板，不需要再次重新设计、重新修改，这也是H5网页的优势之一。
8、H5网页开发成本较低
HTML5网站的兼容性好，能适应不同的终端设备。用户开发一个网站后就不用另外开发移动站，从这点来说，为用户节省了很多成本。H5网页建设已经成为一种趋势，目前越来越多的企业正积极打造自己的响应式H5网页。
文章来源：蛮牛古工作室 &
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。}