写在前面
我们正在跑步进入移动互联网时代，所以针对移动环境下web开发响应式设计成为发展的一个必然的趋势。所以这几天一直没更新文章，也是在准备怎么写关于这个响应式设计，毕竟用可以，但是想写的明白还是需要费点功夫的，有人说不会响应式布局不算一个合格的前端，也有人说响应式是css的高阶玩法，不管怎么说，我们还是要写一个教程的，今天我简单的解释一下什么是响应式布局设计，目前写的是怎么可以实现，和一些原则，然后具体的后期我会持续更新。正好也写一些有含金量的文章，之前写的文章太浅了，没什么技术含量，以后尽量不写太浅的东西，略略略，向着大神大步迈去...
下面是无聊的理论环节（受不了的可以跳过）
什么是响应式设计？
页面可以根据用户的设备尺寸或者浏览器的窗口尺寸来自动的进行布局的调整。
响应式的四个基本原则
* 移动优先还是PC优先
* 内容流
* 位图还是矢量图
* 相对单位和固定单位
移动优先还是PC优先？
有很多的公司是有自己的官网的，但是同时也是有自己的app的，那么这个时候哪一个优先呢？首先明确的是这个是没有明确规定的，这个是根据自己的需求来的。
内容流
这个是什么呢？其实很简单，就是随着移动设备屏幕的尺寸越来越小（相对于PC）那么内容所占的垂直空间就会越来越多，那么自然的内容就会向下延伸，
这个就叫做内容流。
位图还是矢量图？
首先我们说一下直观的比较两种不同的图，位图最明显的特征是当你放大的时候会出现一种比较虚的情况，矢量图则不会。下面我们说一下原理
位图：是使用像素（一格一格的小点）来描述图像的，那么我们的计算机屏幕其实也是包含了大量的像素的网格，在位图里面，图像是由每一个网格中的像素点的位置和色彩的值来决定的，每一个点的色彩是固定的，所以当我们放大的时候就会出现好像是马赛克一样。矢量图使用的是线段和曲线描述图像，同时图形也包含了色彩和位置的信息。那么是不是矢量图就一定是好的呢？当然不是，位图和矢量图是各有利弊的，而且有些比较老的浏览器是不支持矢量图的，所以这个是根据需求来的。
相对单位和固定单位
这个可能我们都不陌生，这里简单的说一下，因为下面需要用到，对于设计者来说，面对的肯定不是只有pc，所以我们要考虑到不同的终端像素密度的问题，那么基于这个，
我们说一下，传统的设计单位是px/pt/cm，但是其实这些都是固定的单位，没办法跨平台展示，我们需要的百分比来展示了，这里需要明白的一点是，百分比展示的是视区的百分比，也就是打开的浏览器的大小。
css3的媒介查询
所谓的媒介查询就是说浏览的内容根据不同的电子设备来执行不同的样式。举个例子：
@media规则就是根据不同的媒介来使用不同的样式规则。下面我们会详细写一个例子。
<style type="text/css"> @media screen{font-family : "arial black";font-size: 14px;} @media print{font-size : 10px} </style>
这段说的是页面展示的时候是14px的字体，当执行打印的时候是10px的字体
@media只是做一个大概的区分，其实我们同一个端（PC）也一样有很多不同的分辨率，那么我们怎么做呢？我们是不是也需要做适配？所以仅仅依靠media Type满足不了我们了，所以css3里面引入了media query（媒体查询）
我们可以理解为media query 是添加了css属性判断media Type
下面我们开始写关于媒体查询的例子！
先看效果：
这是一个最简单的响应式布局的例子，我们不BB，看源码
<!DOCTYPE html> <!-- author : clearlove date : 2018-7-24 aim : csdn博客例子 bug ： over --> <html> <head> <meta charset="utf-8" /> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <style type="text/css"> /* 屏幕尺寸宽度在1680px以外的显示 */ .one{border: 4px solid #2F4F4F;width: 20rem;height: 55rem;float: left;} .two{border: 4px solid #2F4F4F;width: 90rem;height: 10rem;float: left;margin-left: 2rem;} .three{border: 4px solid #2F4F4F;width: 60rem;height: 43rem;float: left;margin-left: 2rem;margin-top: 1.5rem;} .fore{border: 4px solid #2F4F4F;width: 27.5rem;height: 43rem;float: left;margin-left: 2rem;margin-top: 1.5rem;} /* 屏幕尺寸宽度在1200-1680px之间的显示 */ @media screen and (min-width : 1200px) and (max-width : 1680px){ .one{border: 4px solid #2F4F4F;width: 15rem;height: 55rem;float: left;} .two{border: 4px solid #2F4F4F;width: 55rem;height: 10rem;float: left;margin-left: 2rem;} .three{border: 4px solid #2F4F4F;width: 35rem;height: 43rem;float: left;margin-left: 2rem;margin-top: 1.5rem;} .fore{border: 4px solid #2F4F4F;width: 17.5rem;height: 43rem;float: left;margin-left: 2rem;margin-top: 1.5rem;} } /* 屏幕尺寸宽度在731-1200px之间的显示 */ @media screen and (min-width : 731px) and (max-width : 1200px){ .one{border: 4px solid #2F4F4F;width: 10rem;height: 55rem;float: left;} .two{border: 4px solid #2F4F4F;width: 30rem;height: 10rem;float: left;margin-left: 2rem;} .three{border: 4px solid #2F4F4F;width: 30rem;height: 43rem;float: left;margin-left: 2rem;margin-top: 1.5rem;} .fore{display: none; border: 4px solid #2F4F4F;width: 27.5rem;height: 43rem;float: left;margin-left: 2rem;margin-top: 1.5rem;} } /* 屏幕尺寸宽度在731px以下的显示 */ @media screen and (min-width : 0px) and (max-width : 731px){ .one{border: 4px solid #2F4F4F;width: 20rem;height: 10rem;margin-left: 2rem;} .two{border: 4px solid #2F4F4F;width: 20rem;height: 10rem;margin-top: 1.5rem;} .three{border: 4px solid #2F4F4F;width: 20rem;height: 10rem;margin-top: 1.5rem;} .fore{display: none; border: 4px solid #2F4F4F;width: 27.5rem;height: 43rem;float: left;margin-left: 2rem;margin-top: 1.5rem;} } </style> <body> <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="fore"></div> </body> </html>
这里html不解释了，解释css
拉出来
/* 屏幕尺寸宽度在1680px以外的显示 */ .one{border: 4px solid #2F4F4F;width: 20rem;height: 55rem;float: left;} .two{border: 4px solid #2F4F4F;width: 90rem;height: 10rem;float: left;margin-left: 2rem;} .three{border: 4px solid #2F4F4F;width: 60rem;height: 43rem;float: left;margin-left: 2rem;margin-top: 1.5rem;} .fore{border: 4px solid #2F4F4F;width: 27.5rem;height: 43rem;float: left;margin-left: 2rem;margin-top: 1.5rem;} /* 屏幕尺寸宽度在1200-1680px之间的显示 */ @media screen and (min-width : 1200px) and (max-width : 1680px){ .one{border: 4px solid #2F4F4F;width: 15rem;height: 55rem;float: left;} .two{border: 4px solid #2F4F4F;width: 55rem;height: 10rem;float: left;margin-left: 2rem;} .three{border: 4px solid #2F4F4F;width: 35rem;height: 43rem;float: left;margin-left: 2rem;margin-top: 1.5rem;} .fore{border: 4px solid #2F4F4F;width: 17.5rem;height: 43rem;float: left;margin-left: 2rem;margin-top: 1.5rem;} } /* 屏幕尺寸宽度在731-1200px之间的显示 */ @media screen and (min-width : 731px) and (max-width : 1200px){ .one{border: 4px solid #2F4F4F;width: 10rem;height: 55rem;float: left;} .two{border: 4px solid #2F4F4F;width: 30rem;height: 10rem;float: left;margin-left: 2rem;} .three{border: 4px solid #2F4F4F;width: 30rem;height: 43rem;float: left;margin-left: 2rem;margin-top: 1.5rem;} .fore{display: none; border: 4px solid #2F4F4F;width: 27.5rem;height: 43rem;float: left;margin-left: 2rem;margin-top: 1.5rem;} } /* 屏幕尺寸宽度在731px以下的显示 */ @media screen and (min-width : 0px) and (max-width : 731px){ .one{border: 4px solid #2F4F4F;width: 20rem;height: 10rem;margin-left: 2rem;} .two{border: 4px solid #2F4F4F;width: 20rem;height: 10rem;margin-top: 1.5rem;} .three{border: 4px solid #2F4F4F;width: 20rem;height: 10rem;margin-top: 1.5rem;} .fore{display: none; border: 4px solid #2F4F4F;width: 27.5rem;height: 43rem;float: left;margin-left: 2rem;margin-top: 1.5rem;} }
这里可以看到的是@media就是媒体查询，上面的注释写的应该还是可以的，很详细，里面的每一行css的样式就不用解释了吧！下面我们在做一个例子，我们都知道一般我们不会用table布局，因为兼容性是不如div布局好的，但是我们看看是不是这样！我们不用table布局，而是写一个table的例子：
看源码吧！
<!DOCTYPE html> <!-- author : clearlove date : 2018-7-24 aim : csdn博客table例子 bug ： over --> <html> <head> <meta charset="utf-8" /> <title>csdn响应式布局</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> </head> <style type="text/css"> header{height: 5rem;background-color: #A9A9A9;width: 100%;} header div{width: 19%;height: 100%;float: left;background: coral;margin-left: 1rem;text-align: center;font-size: 3rem;} table thead tr td{border: 0px solid #FF0000;cursor: pointer;width: 15rem;text-align: center;background-color: #FF0000;height: 3rem;font-size: 3rem;} table tbody tr td{border: 0px solid aqua;cursor: pointer;width: 15rem;text-align: center;height: 3rem;font-size: 3rem;} .oushu{background-color: darkgray;} /* 当页面宽度大于或者等于1080px时候的效果 */ @media screen and (min-width : 1080px){ header{height: 5rem;background-color: #A9A9A9;width: 100%;} header div{width: 19%;height: 100%;float: left;background: coral;margin-left: 1rem;text-align: center;font-size: 2rem;} table thead tr td{border: 0px solid #FF0000;cursor: pointer;width: 15rem;text-align: center;background-color: #FF0000;height: 3rem;font-size: 3rem;} table tbody tr td{border: 0px solid aqua;cursor: pointer;width: 15rem;text-align: center;height: 3rem;font-size: 3rem;} .oushu{background-color: darkgray;} } /* 当页面宽度在768px和1080px时候的效果 */ @media screen and (min-width : 817px) and (max-width : 1080px){ header{height: 4rem;background-color: #FF7F50;width: 100%;} header div{width: 19%;height: 100%;float: left;background: coral;margin-left: 0.5rem;text-align: center;font-size: 1.5rem;} table thead tr td{border: 0px solid #A9A9A9;cursor: pointer;width: 10rem;text-align: center;background-color: #A9A9A9;height: 2rem;font-size: 2rem;} table tbody tr td{border: 0px solid aqua;cursor: pointer;width: 10rem;text-align: center;height: 2rem;font-size: 2rem;} .oushu{background-color: darkslategray;} } /* 当页面宽度小于800多的时候 */ @media screen and (min-width : 0px) and (max-width : 817px){ header{display: none;} header div{font-size: 0.5rem;} table thead tr td{border: 0px solid #A9A9A9;cursor: pointer;width: 3rem;text-align: center;background-color: #A9A9A9;height: 1rem;font-size: 1rem;} table tbody tr td{border: 0px solid aqua;cursor: pointer;width: 3rem;text-align: center;height: 1rem;font-size: 1rem;} .oushu{background-color: darkslategray;} } </style> <body onload="creattabody()"> <header> <div>安卓</div><div>IOS</div><div>WP</div><div>塞班</div><div>贝拉</div> </header> <table> <thead><tr><td>第一列</td><td>第二列</td><td>第三列</td><td>第四列</td><td>第五列</td><td>第六列</td><td>第七列</td><tr/></thead> <tbody id="tbody"> </tbody> </table> </body> <script type="text/javascript"> function creattabody(){ var tbody; for(var i= 0;i<10;i++){ if(i%2 == 0){ tbody = '<tr class="oushu"><td>第'+i+'行</td><td>第'+i+'行</td><td>第'+i+'行</td><td>第'+i+'行</td><td>第'+i+'行</td><td>第'+i+'行</td><td>第'+i+'行</td></tr>'; } else{ tbody = '<tr><td>第'+i+'行</td><td>第'+i+'行</td><td>第'+i+'行</td><td>第'+i+'行</td><td>第'+i+'行</td><td>第'+i+'行</td><td>第'+i+'行</td></tr>'; } $("#tbody").append(tbody); } } </script> </html>
我们看一看table的效果
这里写法其实是和之前的一样的，实现的效果基本也是一样的，没什么新奇的东西，但是做的不是很完善！
总结
其实响应式的布局的出现是一个必然的趋势，因为不同终端的出现，用户的体验要求的提高，不仅仅是设计师会头疼，开发的人一样会头疼，因为只开发一套页面的css样式，用户用手机的时候是不行的，所以为了满足每一种不同终端的展示效果不得已媒体查询会出现，包括现在的国际化，也是一样的，很多的大企业网站是对外开放的，没办法，所以与时俱进是我们不被淘汰的唯一捷径，累是肯定的，但是技术的更新本身是一件好事，没理由不接受！不是吗？
谢谢阅读
之后的文章我会持续更新关于响应式的文章，之前说的会更新域名空间的一些解释，抽时间吧，我没忘！谢谢支持！
