仓酷云

标题: 给大家带来完全弄分明CSS3的Media Queries [打印本页]

作者: 爱飞 时间: 2015-1-15 23:17
标题: 给大家带来完全弄分明CSS3的Media Queries
你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint。
破洛洛文章简介：CSS3的MediaQueries：完善办理网站与手机跨平台计划.
挪动时期，是任何Web计划与开辟者都不克不及无视的一个时期，总有一天，你计划的器材将被显现在两种屏幕上，桌面年夜屏幕和挪动小屏幕，怎样让统一个网站同时顺应完整分歧的两种尺寸的屏幕，这是一个好久以来都没有完善办理计划的成绩，直到有了CSS3。
CSS3的MediaQueries

在CSS2时期，假如你已经为你的网站计划过打印版CSS，就会分明CSS3MediaQueries的感化，不外，CSS3的MediaQueries比CSS2的MediaType更有用，现实上，CSS2的MediaType其实不曾被几设备所撑持过。CSS3的MediaQueries能够帮你猎取以下数据：

扫瞄器窗口的宽和高
设备的宽和高
设备的手持偏向，横向仍是竖向
分辩率

假如用户有一个撑持MediaQueries的设备，我们就能够为该设备编写专门的CSS，让网站顺应这个设备的小屏幕，英国的Web手艺年夜会dConstruct便基于该手艺推出他们的2010年年夜会网站，手机也能够轻松会见，以下是该网站的桌面版和手机版截图：

这个网站在分歧尺寸的设备上按分歧的结构显现，而且，手机版在iPhone，OperaMini，Android等设备上有完整分歧的体现。
利用MediaQueries为手机创立独自的CSS

我们举一个复杂的两栏式布局的例子。

为了让这个结构更好地在手机上显现，我们为手机版计划一个一栏式结构，且减少header部分的图片巨细。
利用MediaQueries最间接的办法是，在你的CSS代码中，加一段自力代码分支，以下：

@mediaonlyscreenand(max-device-width:480px){}

复制代码

codehostedbysnipt.net

@mediaonlyscreenand(max-device-width:480px){}

复制代码

接着，在这个分支中，为小屏幕编写自力的CSS界说，这些界说能够掩盖桌面版CSS中的响应界说（只需将这段分支代码放在前面），以下针对小屏幕的CSS将结构酿成一栏式，且利用了小尺寸的Header图片：

@mediaonlyscreenand(max-device-width:480px){div#wrapper{width:400px;}div#header{background-image:url(media-queries-phone.jpg);height:93px;position:relative;}div#headerh1{font-size:140%;}#content{float:none;width:100%;}#navigation{float:none;width:auto;}}

复制代码

codehostedbysnipt.net

@mediaonlyscreenand(max-device-width:480px){div#wrapper{width:400px;}div#header{background-image:url(media-queries-phone.jpg);height:93px;position:relative;}div#headerh1{font-size:140%;}#content{float:none;width:100%;}#navigation{float:none;width:auto;}}

复制代码

终极，我们在小屏幕设备上失掉了以下显现效果：

利用MediaQueries链接独自的CSS文件

关于小型的修改，间接在CSS代码中拔出挪动设备代码分支是很便利的，但关于年夜型站点，可使用MediaQueries链接自力的式样表文件，以便在自力的式样表文件中完整自在地为小设备编写CSS代码，办法以下：

<linkrel="stylesheet"type="text/css"media="onlyscreenand(max-device-width:480px)"href="small-device.css"/>

复制代码

codehostedbysnipt.net

<linkrel="stylesheet"type="text/css"media="onlyscreenand(max-device-width:480px)"href="small-device.css"/>

复制代码

测试MediaQueries

要在分歧设备上测试MediaQueries并不是易事，你要有各类设备，还要将代码上传到某个主机举行会见测试。这里有一个在线服务，ProtoFluid，该服务同意你供应你要测试的网站的URL，大概你本机上的URL，然后，摹拟iPhone等挪动设备显现你的计划，下图是上文中提到的dConstruct网站在ProtoFluid的iPhone摹拟中显现的模样。你也能够填写你本人的窗口尺寸，来摹拟特定的设备。

在ProtoFluid利用MediaQueries，你必要同时加上max-width和max-device-width属性，这意味着，MediaQueires不但能够针对分歧的挪动设备，还能够针对桌面体系中某些工资的小窗口情况。

@mediaonlyscreenand(max-width:480px),onlyscreenand(max-device-width:480px){}

复制代码

codehostedbysnipt.net

@mediaonlyscreenand(max-width:480px),onlyscreenand(max-device-width:480px){}

复制代码

利用下面的代码，在桌面扫瞄器上，当你改动窗口尺寸抵达480像素的时分，就会看到结构的改动。必要注重的是，下面的max-width部分仅仅为了测试，假如你不但愿用户在桌面扫瞄器中由于改动了窗口巨细而招致你的结构改动，能够往失落max-width部分，而只针对那些挪动设备。
对现有网站的整改

下面的例子为了申明成绩起见都很复杂，实际中的站点不成能如许，上面的例子，作者将利用他本人的公司网站，申明怎样利用MediaQueries对现有网站举行挪动化整改。
桌面结构

作者本人的网站是几年前计划的，那是还没有思索MediaQueries成绩，这是一个三栏式结构。

增添新的式样表
为了顺应挪动设备，将利用MediaQueries加载自力的式样表：

<linkrel="stylesheet"type="text/css"media="onlyscreenand(max-width:480px),onlyscreenand(max-device-width:480px)"href="/assets/css/small-device.css"/>

复制代码

codehostedbysnipt.net

<linkrel="stylesheet"type="text/css"media="onlyscreenand(max-width:480px),onlyscreenand(max-device-width:480px)"href="/assets/css/small-device.css"/>

复制代码

作者的做法是，将他站点华夏来的CSS文件另存为small-device.css，在这个基本上针对挪动设备举行整改。
紧缩Header部分

第一步是让Logo部分能在小屏幕上显现，由于这个Logo是基于背景图片的，因而很好办，同时，供应一个小尺寸的背景图，以便和Logo搭配。

@mediaonlyscreenand(max-device-width:480px){}0

复制代码

codehostedbysnipt.net

@mediaonlyscreenand(max-device-width:480px){}1

复制代码

单列式结构
下一步次要的事情是将多栏式结构换成单栏式，桌面版利用Float完成多栏结构，要改成单栏，只需将float设置为float:none，并将width设置为width:auto，如许，就完成了单列式结构。

@mediaonlyscreenand(max-device-width:480px){}2

复制代码

codehostedbysnipt.net

@mediaonlyscreenand(max-device-width:480px){}3

复制代码

再松散一些
然后，将margin和padding举行调剂，使之更松散一些：

在iPhone中测试
在iPhone中实践测试的时分，发明网站在单列式结构中仍旧向内涵伸了，从Safarideveloperwebsite找到办理举措，在网站头，增加一个metatag，将网站的视窗宽度设置成何设备分歧。

@mediaonlyscreenand(max-device-width:480px){}4

复制代码

codehostedbysnipt.net

@mediaonlyscreenand(max-device-width:480px){}5

复制代码

</p>
一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来。

作者: 变相怪杰 时间: 2015-1-17 21:33
使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

作者: 谁可相欹 时间: 2015-1-25 12:19
学Dreamweaver技术的过程其实是一个增加信心的过程。

作者: 精灵巫婆 时间: 2015-2-2 22:07
可以使用 CSS 检查工具进行设计。

作者: 仓酷云 时间: 2015-2-8 12:40
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

作者: 柔情似水 时间: 2015-3-8 01:21
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

作者: 乐观 时间: 2015-3-15 21:28
HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

作者: 小女巫 时间: 2015-3-22 05:09
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

欢迎光临仓酷云 (http://ckuyun.com/)