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

前端开发并不是一个容易的工作,不仅需要掌握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代替 不爽可自己试)

     
     请叫我雷锋!说的不对地方勿喷。还是小渣渣一枚。话不多说,自己试!

时间: 2024-10-12 22:45:24

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

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

这一篇文章介绍SpringBoot使用WebFlux响应式编程操作MongoDb数据库. 前言 在之前一篇简单介绍了WebFlux响应式编程的操作,我们在来看一下下图,可以看到,在目前的Spring WebFlux还没有支持类似Mysql这样的关系型数据库,所以本文以MongoDb数据库为例. SpringBoot使用WebFlux响应式编程操作数据库 接下来介绍SpringBoot使用WebFlux响应式编程操作MongoDb数据库. 新建项目 pom文件 新建项目,在项目中加入webflux

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

如今,一个网站只在桌面屏幕上好看是远远不够的,同时也要在平板电脑和智能手机中能够良好呈现.响应式的网站是指它能够适应客户端的屏幕尺寸,自动响应客户端尺寸变化.在这篇文章中,我将向您展示如何通过3个简单的步骤轻松地使网站变成响应式(Responsive). 1 – 布局 当创建一个响应式网站,或让现有的网站变成响应式的,首先要关注的元素的布局.我在建立响应式的网站,总是先创建一个非响应的布局,页面宽度固定大小.如果非响应版本完成得非常不错,我再添加媒体查询(Media Queries)和响应式代码

响应式的3个简单步骤

如今,一个网站只在桌面屏幕上好看是远远不够的,同时也要在平板电脑和智能手机中能够良好呈现.响应式的网站是指它能够适应客户端的屏幕尺寸,自动响应客户端尺寸变化.在这篇文章中,我将向您展示如何通过3个简单的步骤轻松地使网站变成响应式(Responsive). 1 – 布局 当创建一个响应式网站,或让现有的网站变成响应式的,首先要关注的元素的布局.我在建立响应式的网站,总是先创建一个非响应的布局,页面宽度固定大小.如果非响应版本完成得非常不错,我再添加媒体查询(Media Queries)和响应式代码

一个菜鸟眼中的前端

首先,笔者本身不是大牛级别的程序员,一个入行没多久的菜鸟而已,因此观点难免有所偏差,欢迎指正,不喜勿喷.算是自己工作三年以来的经验之谈吧.  什么是前端?前端的过去,现状,未来 简单的说前端就是在B/S模式中,处在browser部分的代码,使用的技术主要为javascript ,css,html,html(当然还有actionscript,vbscript等)主要用于内容的展示,css主要用于页面的美化,javascript主要用于行为的控制.然而,前端却不止于此,首先前端代码不一定只适用于B/

一个菜鸟的自我反省

一直以来都想写一篇自我反省的文章了,从毕业到现在差不多有两年的时间了,两年的时间除了年龄和体重,别的好像也没有什么长进. 去年的时候,经历一点小小的挫折,当时感觉人生都暗淡无光了,整日浑浑噩噩的.最后辞职,去西藏呆了一个多月,美名其曰,拯救自己堕落不堪的过往.现在想来,当时还真 是幼稚的不得了,谁的过去又没有傻逼过呢? 大家莫笑,工作这么长时间,我的水平也就是一般般,对于新技术也不是很感冒,只有用到的时候,才会去看两眼. 技术大牛对我来说,如果用时间来衡量的话,大概会是一万年吧. 对于一名菜鸟程

谈谈一个菜鸟写了一段时间的静态页面

前端,在公司尤其是在UI的眼里,貌似他们也会写简单的页面,所以很多时候一个菜鸟前端是要被取笑的.. 无妨,毕竟底气不足,也想谈谈作为一个菜鸟,眼中的前端是怎么样的,哪些难以实现. 这段时间收获并不大,因为页面较多,所以很多时候都是抱着完成任务的心态去工作,工作效率就不谈了,写完一个页面,组件类的,之后再有重复的,就是ctr+c 或者ctr+v的工作 技术副总监交了我一些规划似的方法,执行者为我.要组件化框架化,把相同的组件柜类,写样式,然后不同的样式再继续拓展这样前期就会比较难,后期就会比较简单

一个菜鸟程序员--再谈六月坚持英语学习

有时候想想,这人生就是一个又一个车站,走到一个站点,累了,歇一歇,明天还得继续出发,而一路上,也会遇到不同的人来陪我们一起走,大家或陌生,或熟悉,总会给我们孤独的心里一种温暖的陪伴.一个人的路,走的再坚强,再执着,也会感到寂寞,疲惫,无助.同行的人一个善意的微笑,一声热情的问候,一个关注的眼神,一句温馨的话语,都会让我们心中泛起阵阵暖意,心存感激. 英语的学习就是这样一种感觉,每当英语学习感到有些疲倦了看着为知笔记上大家的分享每天的学习内容,发现不是一个人在战斗,于是瞬间满血复活,继续投入到英语

生成对抗式网络

本报告总结了 NIPS 上 Ian Goodfellow 的 生成式对抗网络课程.其内容有:(1)为何生成式建模是值得学习的话题:(2)生成式模型如何工作,GAN 与其他生成式模型的比较:(3)GAN 工作原理:(4)GAN 的研究前沿:(5)将 GAN 和其他方法组合的当前最优的图像模型.最后给出帮助读者学习的三个练习和相应的解答. 引言 本报告总结了 NIPS2016 上的生成对抗网络的课程.回答了很多之前的听众提出来的大多数问题,并尽可能地确保它对大家有用.当然,它不能算是 GAN 这个领

走进生成对抗式网络(GAN)摘记

自从OpenAI的Ian J.Goodfellow大神发的开创性文章GAN以后,GAN的发展是膨胀式的,工业界的各个大牛也随之加入GAN蓬勃发展的大军中.除了OpenAI之外,工业界好多公司都参与到了GAN的研究中,包括了Facebook.Google.Apple等公司.其中一个发表比较的多的就是Facebook的Soumith Chintala,他参与发表了DCGAN.LPGAN.WGAN以及SSGAN,其中WGAN也是得到了大量的关注,该文详细的对GAN的缺陷进行了深入解析,然后提出了具有里