如何写出响应式网站
最近做了一个响应式网站，特意总结了一下。
响应式网站实际上就是结合网站的固定布局和弹性布局，利用媒体查询，使不同分辨率的设备引用不同的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、跨域可能会出现闪屏（还没有测试，具体情况不详）
相关文章
使用 MySQL 查询缓存加速我们的网站
发布时间：2023/01/14 浏览次数：65 分类：MySQL
-
加速 Web 应用程序的最佳方法之一是在数据库中启用查询缓存，它将常用的 SQL 查询缓存在内存中，以便发出相同请求的下一页几乎即时访问。 这种方法之所以如此强大，是因为我们不
通过 3 个简单的步骤使网站上的所有图像为响应式的
发布时间：2023/01/11 浏览次数：75 分类：WEB前端
-
图片对网站性能至关重要，但大多数网站仍未实现响应式图片。 这不仅仅是让图像适合屏幕，还要让图像尺寸相对于设备来说比较合理。 最适合我们的 srcset 和 sizes 选项很难实现。
9 个 Laravel 最佳实践来构建更好的网站
发布时间：2022/12/23 浏览次数：182 分类：学无止境
-
Larval 是最流行的 PHP 框架之一，专门用于帮助开发人员快速构建 Web 应用程序。 据 builtwith.com 统计，超过 2750 万个网站使用 PHP 框架，占全球网站的 14%。 但是，我们应该始终坚持以下
