响应式的优点和缺点？？

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【响应式的优点和缺点？？】

大家好，我是IT修真院北京分院25期的学员，一枚正直纯洁善良的web前端程序员

今天给大家分享一下，修真院官网css任务9，深度思考中的知识点——响应式的优点和缺点？？

1.背景介绍

随着智能手机的迅速发展，大众群体使用手机访问互联网的频率已经大大提升。

手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。

传统的只能在pc端显示的网页，如何适应这个潮流，也成了人们开始关注和解决的问题。于是响应式布局的概念就被提出来了。

2.知识剖析

2.1什么是响应式

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

2.2响应式的优点

1.响应式设计可以向用户提供友好的Web界面，同样的布局，却可以在不同的设备上有不同排版，这就是响应式最大的优点，现在技术发展日新月异，每天都会有新款智能手机推出。如果你拥有响应式Web设计，用户可以与网站一直保持联系，而这也是基本的也是响应式实现的初衷。

2.响应式在开发维护和运营上，相对多个版本成本会降低很多。也无须花大量的时间在网站的维护上

3.方便改动，响应式设计是针对页面的，可以只对必要的页面进行改动，其他页面不受影响。

2.3响应式的缺点

1.为了适配不同的设备，响应式设计需要大量专门为不同设备打造的css及js代码,这导致了文件增大，影响了页面加载速度。

2.在响应式设计中，图片、视频等资源一般是统一加载的，这就导致在低分辨率的机子上，实际加载了大于它的显示要求的图片或视频，导致不必要的流量浪费，影响加载速度；

3.局限性，响应式不适合一些大型的门户网或者电商网站，一般门户网或电商网站一个界面内容较多，对设计样式不好控制，代码过多会影响运行速度。

3.常见问题

如何实现响应式?

4.解决方案

1.流式布局

用灵活的网格搭建一个网站布局，它可以动态的调整以适应于任何宽度。网格布局使用相对长度单位.

这些相对长度多用于网格，诸如宽度，间距或是留白等属性。

为了更好的控制流式布局，可以使用最小宽度（min-width），最大宽度（max-width），最小高度（min-height）和最大高度（max-height），把他们应用到容器元素(container)上。

vw:视窗宽度;vh:视窗高度;vmin:视窗最小尺寸;vmax:视窗最大尺寸;

2.媒体查询 MediaQuery

自动探测屏幕宽度，然后加载相应的CSS样式,为目标设备提供有针对性的样式，在响应式设计中发挥作用。

@media all and (min-width: 800px) and (max-width: 1024px) {...}

在搭建响应式网站时，应该可以适应各种不同视窗尺寸，而不需要考虑设备的分辨率。设置断点只是在网站布局被破坏，看起来很怪或是内容无法显示的时候才需要设置。

3.viewport

meta name="viewport" content="width=device-width, initial-scale=1.0"

width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。

maximum-scale：允许用户缩放到的最大比例。

minimum-scale：允许用户缩放到的最小比例。

user-scalable：用户是否可以手动缩放。

4.流式媒体

当视窗开始改变尺寸时，媒体大小并不总是做适当改变的。所以图片，视频以及其他媒体类型需要在视窗改变的情况下，按照比例改变大小。

通过使用最大宽度值为100%，是一个快速实现媒体按照比例缩放的方法。这样做可以确保在视窗变小的情况下，任何媒体可以根据他的容器宽度，按照比例缩放。

img, video, canvas{

max-width: 100%;

}

5.编码实战

demo1,2为响应式网站实例，demo3为响应式网站的设计

demo1

demo2

demo3

6.扩展思考

响应式和自适应的区别是什么？

简而言之，响应式就相当于液体，它可以自动适应不同尺寸的屏幕。响应式根据目标设备自动改变风格如显示类型,宽度、高度等，这能很好解决不同屏幕尺寸的显示问题。而自适应设计是基于断点使用静态布局，一旦页面被加载就无法再进行自动适应，自适应会自动检测屏幕的大小来加载适当的工作布局，也就是说，当你要采用自适应设计网站时，你得设计多种常见的屏幕布局。显然，自适应设计需要做更多的工作。而响应式设计可以更好地适应复杂的媒体设备要求，能很好地解决显示和性能问题。

7.参考文献

HTML和CSS高级指南之四——响应式设计

响应式与自适应设计:设计师的最佳选择是什么?

8.更多讨论

PPT链接

视频链接:密码: 24kt

响应式的优点和缺点？？相关推荐

响应式布局这件小事有哪些优点和缺点该怎么设计
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 响应式布 ...
响应式布局有什么优点和缺点
Responsive Web Design (响应式网页设计) 最初是由Ethan Marcotte 提出的一个设计理念: 就是一个网站能够兼容多个终端,而不是每一个终端做一个特定的版本. 如何使用 ...
html5 响应式布局
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本. 这个概念是为 ...
浅谈html5 响应式布局
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本. 这个概念是为解决移动互联 ...
响应式Web设计——最佳指南
2012年被称为智能手机年.根据最近一份调查显示,美国的智能手机覆盖率已达50%.现在确实是提升移动终端用户体验的大好时机.如果你正运营一个网站,那就必须有一个响应式的Web设计,以便可以从移动终端上 ...
响应式编程在Android 中的一些探索
响应式在前端领域已经变得十分流行,很多主流框架都采用响应式来进行页面的展示刷新.本文主要是探索一下响应式在移动端Android上的一些实践,包括对响应式思想的理解,以及目前Android上实现响应式的 ...
html怎么做成响应式的,怎么用html5完成响应式布局？
怎么用html5完成响应式布局?以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 怎么用5完成响应式布局? 步骤1 建立空 ...
移动设备响应式网站之CSS媒体查询
http://www.ibm.com/developerworks/cn/web/wa-cssqueries/index.html 简介现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的 ...
HTML5 响应式网页设计之页面美化（一.响应式布局）
1.响应式设计的优点和缺点 2.视口的概念 1.视口就是浏览器所显示网页的那部分区域 2.meta标签设置视口,meta标签的作用就是让当前视口的宽度等于设备的宽度 /*通过<meta name ...
《响应式网页设计》系列分享专栏
2019独角兽企业重金招聘Python工程师标准>>> <响应式网页设计>已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/ ...

响应式的优点和缺点？？

响应式的优点和缺点？？相关推荐

最新文章

热门文章