response响应式

Response

响应式其实就分为三步：

第一步：流式布局(即不用固定的px，而是用的百分比,在流式布局中必要的时候可以用float漂浮)。

第二步：媒体查询。固定语句为@media screen and (max-width : 这里写最大宽度的像素){},在这个代码里可以写自己想要在多少像素时变成怎样，在多少像素时又可以怎样，可以写多个。

例如：

@media screen and (max-width:600px){     #div{           width:100%;       }      #div1{           width:50%;       }}不仅仅只可以改变宽度，也可以改变字体大小那些你想要改变的东西。

第三步：

在head里面加入这句话，必须加，否则不能做响应式。

<meta name="viewport" content="width=device-width; initial-scale=1.0">

这是这个页面的一个小小插曲，今天我们温习了碰撞检测的方法，判断碰撞检测如下：

有两个div，分别在它们左上角的坐标为(x1,y1)(x2,y2),整个div的宽和高分别是一个为w1,h1,另外一个为w2,h2。

当x1<=x2+w2 && x2<=x1 + w1

y1<=y2+h2 && y2<=y1 + h1时表示这时碰撞了。