大家好，关于前端自适应很多朋友都还不太明白，不过没关系，因为今天小编就来为大家分享关于前端自适应的知识点，相信应该可以解决大家的一些困惑和问题，如果碰巧可以解决您的问题，还望关注下本站哦，希望对各位有所帮助！
你一定听说过，我们目前正处在“后PC时代”，这对于前端开发人员来说，意味着应该处理一些用户行为上的改变，由此步入一个响应式与自适应设计技术统治的时代。这其中的关键点在于web的统一化，也就是说在合理的条件下，无论用户使用任何设备，都应该传达相同的内容信息与服务。
2010年，Ethan Marcotte提出了“自适应网页设计”（ResponsiveWeb Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。举个例子：
（1）当屏幕宽度大于1300像素
（2）当屏幕宽度在600像素到1300像素之间
（3）当屏幕宽度在400像素到600像素之间
（4）当屏幕宽度在400像素以下
响应式的核心优势在于设计者可以为所有设备使用同一种模板，只需要用CSS来定制内容在各种大小屏幕上的呈现方式。
响应式网页的组成关键
响应式页面的实现其实并不算困难，用到的也都是大家比较熟悉的一些技术。
（1）Media Query
（3）Flex box
与传统的web开发相比，由于响应式设计的页面布局、内容尺寸都发生了一些变化，所以，最终的成品极有可能与设计稿出入较大，还需前端开发人员和设计师多沟通，以免造成不必要的时间浪费。
响应式web设计的优化
在响应式网页的设计过程中，其中也会涉及到一些用户体验方面的问题和弊端，需要进一步的优化。
(1)减轻Javascript库负载
对于移动端来说，jQuery表现的太过厚重，而现在针对移动端的状态来说，有jQuery Mobile、YUI、XUI等可供选择的框架。
（2）减少HTTP请求次数
移动端相比较PC端有一个特殊的限制需要考虑到，就是用户的网络流量是有限的。这时候针对这些页面内部的部分操作，可以使用Ajax异步请求来完成，针对短期内不会变化的一些数据，可以使用服务器端缓存、前端缓存等机制来保存这些数据，这样可以减少用户一定的数据请求量。
（3）Javascript和CSS需要尽量压缩
把页面中使用的Javascript和CSS进行压缩之后会有效地减少页面大小。
（4）用CDN管理页面资源
CDN的即内容分发网络，意在尽可能避开互联网上有可能影响数据传输速度和稳定性的环节，使内容传输的更稳定。
（5）列表图片实现“懒”加载
移动终端设备因为屏幕大小有限，没有必要将全屏中的图片一次性加载完成，网页加载的同时，我们可以选择逐个加载，当用户进行滑动页面的时候，再继续加载图片。
（6）图片显示的优化处理
根据用户设备的分辨率来加载不同分辨率下的不同图片，这样既能给不同终端的用户一个很好的视觉体验，又不会白白浪费用户的网络数据流量。
转载自AnyForWeb
好了，文章到此结束，希望可以帮助到大家。
