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

 

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

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

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

    可是本渣认为，若是单凭为了能处理响应式布局不必用到网上的响应式框架，

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

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

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

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

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

    二、media query可以获取哪些值？

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

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

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

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

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

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

    设备的分辨率resolution。

    三、语法结构及用法

    @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代替 不爽可本身试）

 

   话很少说，本身多试多练！