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

使用前端框架,有如下好处:

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

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

    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代替 不爽可自己试)
 
     
    话不多说,自己多试多练!
 
 

一个菜鸟所喜欢用的响应式布局,操作方便简单、时尚简约,适合新手!(一个Dreamweaver cs6生成响应式布局)的更多相关文章

  1. SpringBoot使用WebFlux响应式编程操作数据库

    这一篇文章介绍SpringBoot使用WebFlux响应式编程操作MongoDb数据库. 前言 在之前一篇简单介绍了WebFlux响应式编程的操作,我们在来看一下下图,可以看到,在目前的Spring ...

  2. 20分钟成功编写bootstrap响应式页面 就这么简单

    最近发现一个叫 Bootstrap 的好东西,Bootstrap 是现在最流行的响应式 CSS 框架,它以移动设备优先,能够快速适应不同设备.使用它编写响应式页面快捷.方便,而且屏蔽了浏览器差异.使用 ...

  3. html5教程 《实用技巧》—让你的网站变成响应式的3个简单步骤

    如今,一个网站只在桌面屏幕上好看是远远不够的,同时也要在平板电脑和智能手机中能够良好呈现.响应式的网站是指它能够适应客户端的屏幕尺寸,自动响应客户端尺寸变化.在这篇文章中,我将向您展示如何通过3个简单 ...

  4. react实例之todo,做一个实时响应的列表操作

    react实例之todo, 做一个实时响应的列表操作 在所有的mvc框架中,最常见的例子不是hello world,而是todo,由于reactjs的简单性,在不引用flux和redux的情况下,我们 ...

  5. nginx与apache 对比 apache是同步多进程模型,一个连接对应一个进程;nginx是异步的,多个连接(万级别)可以对应一个进程

    nginx与apache详细性能对比 http://m.blog.csdn.net/lengzijian/article/details/7699444 http://www.cnblogs.com/ ...

  6. Android 仿PhotoShop调色板应用(四) 不同区域颜色选择的颜色生成响应

    版权声明:本文为博主原创文章,未经博主允许不得转载.  Android 仿PhotoShop调色板应用(四) 不同区域颜色选择的颜色生成响应  上一篇讲过了主体界面的绘制,这里讲解调色板应用中的另外一 ...

  7. 使用KEIL C51实现的简单合作式多任务操作系统内核(单片机实现版本)

    基于网上网友的代码,自己在单片机上实现, 特此记录分享之. 基于https://blog.csdn.net/yyx112358/article/details/78877523 //使用KEIL C5 ...

  8. iOS 开发之使用链式编程思想实现简单的计算器

    链式编程思想是将多个操作(多行代码)通过点号(.)链接在一起成为一句代码,使代码可读性好.例如 a(1).b(2).c(3). 链式编程思想最为关键的是,方法的返回值是block,block必须返回对 ...

  9. PTA 带头结点的链式表操作集

    6-2 带头结点的链式表操作集 (20 分)   本题要求实现带头结点的链式表操作集. 函数接口定义: List MakeEmpty(); Position Find( List L, Element ...

随机推荐

  1. 小学生之SpringMVC

    1. Springmvc是什么? Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层进行职责解耦,基 ...

  2. java socket报文通信(三)java对象和xml格式文件的相互转换

    前两节讲了socket服务端,客户端的建立以及报文的封装.今天就来讲一下java对象和xml格式文件的相互转换. 上一节中我们列举了一个报文格式,其实我们可以理解为其实就是一个字符串.但是我们不可能每 ...

  3. swing常用布局

    1,FlowLayout 窗口的默认布局 设置窗口布局方法(下面不重复 setLayout(new FlowLayout()); 设置容器布局方法 比如容器 con1 con1.setLayout(n ...

  4. google protocol buffer -2-.proto 定义规则

    essage为主要关键字,类似于java中的class.定义简单message类型 SearchRequest.proto定义了每个查询请求的消息格式,每个请求都会有查询关键词query,查询结果的页 ...

  5. CentOS 7 之Shell学习笔记

    脚本是个永恒的话题,以前Dos下面也有Shell编程这一说的,比如说BAT文件有人写的好的话,也是瞬间速度变高大上.Linux下面这个应该更占比重了.我看到园子里有位园友做了一个Linux Shell ...

  6. JQuery操作下拉框 select

    要实现这种效果: html代码 1<script src="js/jquery-1.7.2.min.js"></script> 2 <table> ...

  7. 一句JS搞定只允许输入数字和字母

    一句JS搞定输入框只允许用户输入数字和字母类型的内容,对象是input输入框,当然也可以其它对象,只不过input输入框用的频率非常高.一句代码,不信么?那就看下边代码: <INPUT clas ...

  8. 基于python的接口测试学习笔记一(初出茅庐)

    第一次写博客笔记,讲一下近来学习的接口自动化测试.网上查阅了相关资料,最后决定使用python语言写接口测试,使用的是python的第三方库requests.虽然python本身标准库中的 urlli ...

  9. cocos2d-js 入门之碰撞

    本文由qinning199原创,转载请注明:http://www.cocos2dx.net/post/223 1.cc.rectIntersectsRect(ra,rb) 判断两个矩形是否相交,若相交 ...

  10. 宏定义 button 方法 --备

    定义 #define BARBUTTON(TITLE, SELECTOR) [[[UIBarButtonItem alloc] initWithTitle:TITLE style:UIBarButto ...