迹忆博客
当前位置: 主页 > 学无止境 > WEB前端 > 文章

如何写出响应式网站

发布时间: 2016-07-05 作者: 嫣然 浏览次数:

最近做了一个响应式网站,特意总结了一下。

响应式网站实际上就是结合网站的固定布局和弹性布局,利用媒体查询,使不同分辨率的设备引用不同的css样式。

1. 设计前期

想要做响应式网站,首先在做设计的时候就要考虑到响应式布局,设计成利用响应式布局的网页。

2. 响应式布局

首先了解一下常用的媒体查询。

(1)打印样式

 @media print{样式表;}

(2)手机等小屏幕手持设备

@media screen and (min-width:320px) and (max-width:480px;){样式表;}

(3)平板之类的宽度1024一下设备

@media only screen and (min-width:321px) and (max-width:1024px){样式表;}

(4)PC或大屏设备:1028至更大

@media only screen and (min-width:1029px){样式表;}

(5)竖屏

@media screen and (orientation:portrait) and(max-width:720px){样式表;}

(6)横屏

@media screen and (orienttation:landscape){样式表;}

3. 解决ie6-ie8的响应式布局问题

响应式布局理想状态是在主流浏览器对各种终端的完美展示,但是媒体查询只支持ie9以上高级版本的谷歌,火狐浏览器,但是现在ie7,ie8在市场中占据很大份额,所以做响应式布局必须考虑到ie6-ie8浏览器,那么如何使ie6-ie8可以相应式布局呢?这个问题我也查了好久,才得以解决。我们需要引入respond.js文件

<!--[if lt IE 9]>
      <script src="ip/respond.js/1.4.2/respond.min.js"></script>
<![endif]—>

那么如何找到respond.js文件呢,可以在这个网址中找到(http://www.bootcdn.cn/respond.js/

插件原理

接下来,需要理解respond.js的实现思路:

第一步,将head中所有外部引入的CSS文件路径取出来存储到一个数组当中;

第二步,遍历数组,并一个个发送AJAX请求;

第三步,AJAX回调后,分析response中的media query的min-width和max-width语法(注意,仅仅支持min-width和max-width),分析出viewport变化区间对应相应的css块;

第四步,页面初始化时和window.resize时,根据当前viewport使用相应的css块。

核心结论

那么此时,就可以根据基本的实现思路,得到一些书写代码时要注意的地方:

1、需要启动本地服务器(localhost),不能使用普通本地的url地址(file://开头);

2、需要外部引入CSS文件,将CSS样式书写在style中是无效的;

3、由于respond插件是查找CSS文件,再进行处理,所以respond文件一定要放置在CSS文件的后面

4、另外,虽然把respond放置在head里还是在body后面都能够实现,但是建议放置在head中(具体原因在下面的文档提示中有提到)

5、最好不要为CSS设置utf-8的编码,使用默认(原因详见下面的文档提示部分)

文档提示

在官方文档当中的一些提示:

1、越早的引入respond.js文件,也就越可能避免IE下出现的闪屏。

2、不支持嵌套的媒体查询

3、utf-8的字符编码对respond.js文件的运行有影响

官方API原文:if CSS files are encoded in UTF-8 with Byte-Order-Mark, they will not work with Respond.js in IE7 or IE8.
基本含义就是:utf-8格式的CSS文件字符编码会对插件造成影响。
但是在我使用IE6-8进行测试的时候,都能够正常显示(无论是在css文件中增加charset设置还是在link标签中增加charset设置)。因此,并不是太清楚这个位置bug的含义。

4、跨域可能会出现闪屏(还没有测试,具体情况不详)

除非注明转载,本站文章均为原创,欢迎转载,转载请以链接形式注明出处

本文地址: