一个菜鸟所喜欢用的响应式布局，操作方便简单、时尚简约，适合新手！（一个Dreamweaver cs6生成响应式布局）

前端开发并不是一个容易的工作，不仅需要掌握HTML、CSS和JavaScript，针对不同的浏览器版本和平台，还需要了解如何设计出跨平台的网站。如今随着响应式设计的流行，前端开发变得越来越困难，且花费的时间更长。

使用前端框架，有如下好处：

• • 跨浏览器。这一点已被证实。
  • 一致性。UI组件，如导航、按钮、标签、表单、下拉框、表格……，在设计上保持风格一致。
  • 快速开发。你可以快速、容易地构建布局。这些框架都配有详细的说明文档。
  • 响应式。所有CSS组件及JavaScript插件可以很好地从桌面过渡到移动设备上。

但是本渣认为，如果单凭为了能处理响应式布局没必要用到网上的响应式框架，

1. 1. 对于一个新手来说需要花费一定的时间去学习熟悉框架的特性和使用方法；
   2. 兼容各种设备工作量大，效率低下
   3. 代码累赘，会出现隐藏无用的元素，加载时间加长
   4. 其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果
   5. 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

今天我就分享一下自己所谓探索出来的一套响应式布局实现方案，操作方便简单、时尚且简约。所用之处，无非爽！爽！爽！新手只需啪啪啪便能自动生成，相当强大，并且很小哦，直接兼容到ie6，本渣渣经过n次测试和运用，妈妈再也不用担心我不会写响应式了。

首先，我们先简单了解一下响应式布局实现逻辑，在以往我们设计网站的时候都会受到不同浏览器的兼容性的困扰，还要来个不同尺寸设备，我们该怎么淡定下来呢？有需求就会有解决方案，说到响应式布局，就不 得不提起CSS3中的Media Query（媒介查询），这可是个好东西，易用、强大、快捷……Media Query是制作响应式布局的一个利器，使用这个工具，我们可以非常方便快捷的制造出各种丰富的实用性强的界面。

    1、CSS3中的Media Query（媒介查询）是什么？^[2] 

    通过不同的媒介类型和条件定义样式表规则。媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。 媒介查询的大部分媒介特性都接受min和max用于表达”大于或等于”和”小于或等于”。如：width会有min-width和max-width媒介 查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。通过这个标签属性，我们可以很方便的在不同的设备下实现 丰富的界面，特别是移动设备，将会运用更加的广泛。

    2、media query能够获取哪些值？

    设备的宽和高device-width，device-height显示屏幕/触觉设备。

    渲染窗口的宽和高width，height显示屏幕/触觉设备。

    设备的手持方向，横向还是竖向orientation（portrait|lanscape）和打印机等。

    画面比例aspect-ratio点阵打印机等。

    设备比例device-aspect-ratio-点阵打印机等。

    对象颜色或颜色列表color，color-index显示屏幕。

    设备的分辨率resolution。

    3、语法结构及用法

    @media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{sRules}

    示例一：在link中使用@media：

    <link rel=“stylesheet” type=“text/css” media=“only screen and （max-width： 480px），only screen and （max-device-width： 480px）” href=“link.css”/>

    上面使用中only可省略，限定于计算机显示器，第一个条件max-width是指渲染界面最大宽度，第二个条件max-device-width是指设备最大宽度。

    示例二：在样式表中内嵌@media：

    @media （min-device-width:1024px） and （max-width:989px），screen and （max-device-width:480px），（max-device-width:480px） and （orientation:landscape），（min-device-width:480px） and （max-device-width:1024px） and （orientation:portrait） {srules}

    在示例二中，设置了电脑显示器分辨率（宽度）大于或等于1024px（并且最大可见宽度为989px）；屏宽在 480px及其以下手持设备；屏宽在480px以及横向（即480尺寸平行于地面）放置的手持设备；屏宽大于或等于480px小于1024px以及垂直放 置设备的css样式。

    从上面的例子可以看出，字符间以空格相连，选取条件包含在小括号内，srules为兼容设置的样式表，包含在中括号里面。only（限定某种设备，可省略），and（逻辑与），not（排除某种设备）为逻辑关键字，多种设备用逗号分隔，这一点继承了css基本语法。

 

好了不瞎比比了！直奔主题

 

    说到第一次接触响应式布局该从一个客户要求我做一套响应式布局开始。关系到信誉的问题，不能接下了活不干吧，当时时间也特别紧，眼看离项目交期不远了，怎么办怎么办？东问西问，各种百度各种荡，各种交流各种学习。结果接触了几个响应式框架之后，感觉真是太神奇了，但是但是问题又来了！框架的css文件呀、js呀、比我自身写的还多，这无非就一下把我给贬值了。

    终于终于。。。。。。。好了真不瞎比比了。下载一个Dreamweaver cs6！ 这家伙新加的html5流媒体网络布局功能就是我们想要的（响应式布局）。

    别眨眼，新手也可以速成！

    第一步，新建一个流体网络布局:

   

    第二步，把相关文件保存到自己项目里

 

 

       再看看文件多大，根据自己的需求可适当的删除或者压缩。

       关键代码：

       现在我们跑起来，到模拟环境下看看效果：

 

（某果6p下的模拟效果）

 

（最早又挺普遍的小屏）

 

（ipad 3/4 环境下）

 

（万恶的ie6 以前已测 现拿ie7代替 不爽可自己试）

 

     
    话不多说，自己多试多练！