响应式布局简明示例

响应式布局简明示例，响应式布局最好同时也是自适应布局，然后再配合css3媒体查询，来达到完美的响应式布局。

css3的媒体查询ie9一下是不支持的，这太遗憾了，不过幸运的是有大神已经为前端屌丝们写好了用于IE9以下的媒体查询脚本文件，引用方式如下：





css3媒体查询语法：

/*@media screen and (min-width:1440px) and (max-width:1600px){}*/

@media screen and (min-width:1440px){ /*大于等于1440*/

    /*这里是特定的样式表*/

    body,input,textarea,select,small,a{font-size:14px;}

}

@media screen and (max-width:1024px){    

      /*懒人建站*/

}

@media screen and (max-width:768px){

      /*不大于768px的设备尺寸中 响应式布局的特定样式*/

}

@media screen and (max-width:360px){

    

}

@media screen and (max-width:320px){

    

}

看了这几个 写法是不是感觉响应式布局不过如此，哈哈，其实就是这么简单。



别急，在仔细想想好像还少点啥，比如在移动端、手机上打开这个网页的话，如果做响应式布局，还要在head区域加上如下代码：



    







如果不是很明白，就直接粘贴过去使用就可以了。

width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no 大概意思是，网页宽度采用设备宽度，缩放比例为1，不允许用户缩放操作，

以上的头部声明是手机端页面的标配。