响应式网站最大的好处是一个网站可以自适应多个终端，如手机端、电脑端、平板端等。这点非常重要，尤其是在如今多终端的智能设备时代，有人用电脑、有人用笔记本、有人用平板、有人用手机，还有人用电视上网；就算是同一个人，有时候也是上班用电脑、下班用手机。这时候，响应式网站派上用场了，自适应网站这么有用，那么如何制作呢？请看下面BG大游集团的网站建设解决方案。

什么是响应式网站呢？


€伊桑·马科特在2010年首次提出了响应式网页设计(RWD, Responsive Web Design)的概念。
€简而言之□□□□是指网页★能够根据□□□□屏幕宽度□□自动适应，以达到适◢配各种屏□□□□幕。
现在已经有很多大网站采用这种响应式网站架构，如microsoftstore官网、OPPO商城、itiger等。

网站做成响应式真的有必要吗？

查看下面CNNIC的统计报☆告，上网设备□□各个都占✦有市场份□□□额，不能丢弃□□□任何一部□□□分，如何兼容□□所有设备◢呢？那就是把□□□网站做成丨响应式。



响应式网站产生的条件

国内浏览▼器大部分□□□□升级后都□□支持HTML5、IE9以下浏览❖器基本被□□抛弃，CSS3中的媒体☆查询是实□□□□现网页响□□应式的主•要方法。

响应式网站的优点

1.用户体验□□好，适应所有□□终端，可以浏览丨器里调整□□□宽度查看，不出现滚□□□动条，尤其是苹□□果系统电❖脑，默认打开○窗口不是□□满屏的。
2.维护成本低，只需要维护一个网站就行；
3.分享方便，内容链接地址一致；
4.视觉统一，网站风格、导航、菜单基本一致，没有陌生感，容易使用；
5.兼容未知分辨率设备
6.可以嵌套进APP

响应式网站建设过程中会遇到什么问题

€1、代码过于臃肿，导致网站打开速度慢，尤其是手机网站。
€2、图片按需加载，不能移动端调取一个大图片。
€3、兼容性，IE8以下不考虑兼容。

解决办法思路如下：

€1、同一段代码同一段CSS搞定（需要设计的结构比较好）
€2、同一段代码不同媒体查询实现
€3、实在没有办法才采用：写几段代码分别适配不同屏幕

这里推荐□□一个比较□□好的响应◈式网站JS框架bootstrap，它会帮你□□□□解决很多□□□□基础的问□□题，加快响应□□□□式网站的□□开发效率。

是不是什么网站都适合响应式？

答案是否定的，如各大门户网站，基本都没有用响应式，当电脑版网页内容特别多的不适合响应式，而是单独做一个另外版面的手机版。那么什么网站最适合使用响应式呢？企业品牌官网、企业商城、品牌旅游官网等。

响应式网站设计要注意什么？

应该以移□□动优先为□□□□原则，采用流式□□□设计布局，让网站元□□□□素分块排□□□列，当用不同◉终端时，根据需要·组合显示□□□□各个块。

响应式网站META写法


设置宽度为设备宽度

IE浏览器用最高版本解析

//针对IE9以下浏览器支持HTML5标签和媒体查询

 
媒体查询基本方法使用

@media (max-width: 767px) {
//小屏幕专用
}
@media (min-width: 768px) and (max-width: 1023px) {
//中等屏幕专用
}
@media (min-width: 768px) {
//中等屏幕和大屏幕使用
}
@media (min-width: 1024px) {
//大屏幕专用
}