来谈谈：media query(媒体查询)和media type(媒体范例)

结构清晰，容易被搜索引擎搜索到，天生优化了seo

破洛洛文章简介：mediatype与mediaquery.
mediatype(媒体范例)是CSS2中的一个十分有效的属性，经由过程mediatype我们能够对分歧的设备指定特定的款式，从而完成更丰厚的界面。mediaquery(媒体查询)是对mediatype的一种加强，是CSS3的主要内容之一。跟着挪动互联网的开展，mediaquery入手下手失掉人人的器重。
mediatype

让我们先懂得一下mediatype，实在这个人人会对照熟习一点，我们一般会用到的mediatype会是all和screen，然后是print，一些网站会专门经由过程print范例为页面的打印格局供应更友爱的界面。
实在，mediatype有良多种：
范例注释all一切设备braille盲文embossed盲文打印handheld手持设备print文档打印或打印预览形式projection项目演示，好比幻灯screen黑色电脑屏幕speech演讲tty流动字母间距的网格的媒体，好比电传打字机tv电视mediatype的几种利用办法

我们能够经由过程几种办法来声明mediatype：
办法一

1. <linkhref="style.css"media="screenprint"...

复制代码

办法二

1. <?xml-stylesheetmedia="screen"href="style.css"...

复制代码

办法三

1. @importurl("style.css")screen;

复制代码

办法四

1. 123

复制代码

1. <stylemedia="screen">@importurl("style.css");</style>

复制代码

办法五

1. 123

复制代码

1. @mediascreen{selector{rules}}

复制代码

固然，这几种办法各有益弊，而我们经常使用的是第一种和最初一种办法。
mediatype的扫瞄器撑持

• IE5.5/6/7不撑持在@import中利用媒体范例
  
• Safari/firefox只撑持all,screen,print三品种型(包含iphone)
  
• Opera完整撑持
  
• Operamini撑持handheld，未指定章利用screen
  
• WindowsMobile体系中的IE撑持handheld，别的撑持不明…
  

mediaquery

正如前文所说，mediaquery是CSS3对mediatype的加强，现实上我们能够将mediaquery当作是mediatype+css属性判别。
请注重，上面提到的一些关头字等外容，有些是在mediatype中便可用的，可是放到mediaquery中将能更好的发扬其感化，以是我就在得当的中央引进。
css属性判别能够只是某个CSS属性的称号，也能够是属性+值：

1. <linkrel="stylesheet"media="screenand(animation)”herf=“…”

复制代码

假如设备撑持CSS动画，那末就可以实行这个内部款式表文件。

1. 123

复制代码

1. @mediascreenand(max-width:240px){body{font-size:medium;}}

复制代码

假如设备的扫瞄器的最年夜宽度是240px，则页面将利用中号字体。
PS:属性和值之间是用冒号毗连的，而不是等号，这与一般的CSS的写法分歧。
媒体查询语句布局

我们能够将上述语句称为媒体查询语句，如许也更能了解一些。从下面的例子也能够看出，媒体查询语句一样平常由mediatype+一到多个CSS属性判别构成，而多个CSS属性判别能够用关头字and毗连：

1. 123

复制代码

1. <?xml-stylesheetmedia="screen"href="style.css"...1

复制代码

个中mediatype能够省略，属性值也能够为空：

1. <?xml-stylesheetmedia="screen"href="style.css"...2

复制代码

1. <?xml-stylesheetmedia="screen"href="style.css"...3

复制代码

固然，请注重，有属性值和没有属性值的情形代表的意义是纷歧样的，以是下面的这两条划定规矩不是等价的。
而针对多个媒体范例的CSS划定规矩，能够用逗号来离隔：

1. 123

复制代码

1. <?xml-stylesheetmedia="screen"href="style.css"...5

复制代码

1. 123

复制代码

1. <?xml-stylesheetmedia="screen"href="style.css"...7

复制代码

mediaquery撑持的属性

现实上，mediaquery撑持的属性和我们经常使用的CSS属性是不太一样的，它们是一些出格界说的条目：
属性值Min/Max形貌color整数yes每种色采的字节数color-index整数yes色采表中的色采数device-aspect-ratio整数/整数yes宽高比例device-heightlengthyes设备屏幕的输入高度device-widthlengthyes设备屏幕的输入宽度grid整数no是不是是基于格栅的设备heightlengthyes衬着界面的高度monochrome整数yes单色帧缓冲器中每像素字节resolution分辩率(“dpi/dpcm”)yes分辩率scanProgressiveinterlacednotv媒体范例的扫描体例widthlengthyes衬着界面的宽度orientationPortrait/landscapeno横屏或竖屏从这些属性中我们能够看出，mediaquery就是为了更好的适配各类设备而生的。
扫瞄器扩大

webkit

webkit是最早完成mediaquery撑持的扫瞄器内核之一，同时它也依据本人的必要弄了一些独有的扩大属性，最经常使用的有：
transform-2d只用于撑持利用-webkit-transform完成2D变更的扫瞄器transform-3d只用于撑持利用-webkit-transform完成3D变更的扫瞄器transition只用于撑持利用-webkit-transition完成变更效果的扫瞄器animation只用于撑持利用-webkit-animation完成动画的扫瞄器概况请看这里：http://webkit.org/specs/MediaQueriesExtensions.html
firefox

firefox也供应一些本人的扩大，不外因为firefox扫瞄器的手机版如今还很弱，以是很少会用到，感乐趣的同砚能够到https://developer.mozilla.org/En/CSS/Media_queries查阅。
max与min

仔细的同砚大概已注重到后面用到的这两个关头词，他们是要共同撑持它们的属性利用的，它们的意义与我们经常使用的max-width和minwidth等相似。
各属性对max和min的撑持在后面的属性列表中有给出，这里是一个具体的列表：
heightmin-heightmax-heightdevice-widthmin-device-widthmax-device-widthdevice-heightmin-device-heightmax-device-heightaspect-ratiomin-aspect-ratiomax-aspect-ratiodevice-aspect-ratiomin-device-aspect-ratiomax-device-aspect-ratiocolormin-colormax-colorcolor-indexmin-color-indexmax-color-indexMonochromemin-monochromemax-monochromeResolutionmin-resolutionmax-resolutionnot/only

媒体范例还撑持not和only关头字，它们能够用来更便利的定位某个媒体设备：
not：扫除某种制订的媒体范例

1. <?xml-stylesheetmedia="screen"href="style.css"...8

复制代码

only：指定某种特定的媒体范例，能够用来扫除不撑持媒体查询的扫瞄器：

1. <?xml-stylesheetmedia="screen"href="style.css"...9

复制代码

mediaquery的扫瞄器撑持：

• IE9以下不撑持
  
• Firefox3.5+(Gecko1.9.1+)撑持
  
• Opera9.5+完整撑持
  
• Operamini5撑持
  
• webkit撑持年夜部分属性(safari3.0的内核版本是522，iPhone1代的safari的内核版本是524，webkit也许从这个时分入手下手撑持mediaquery，可是对部分属性好比projection撑持欠好)
  
• iPhoneOS3.2之前的版本不撑持orientation属性，iPad和iPhone4撑持该属性。
  
• iPhoneSafari不撑持orientation(iPhone4撑持)
  

实例：

如今让我们来看一些典范的例子：
检测iPhonesafari：

1. @importurl("style.css")screen;0

复制代码

这是apple官方网站保举的一种定位iPhonesafari扫瞄器的办法，在iPhone一代和2代的时期，这条划定规矩切实其实可以准确的判别出iPhone的扫瞄器，可是厥后呈现了Android的年夜屏幕手机，好比NexusOne和HTCdesire，这条划定规矩也能适配这些480px宽度的呆板。
Google的iPhone横屏款式：

Google之前经由过程以下体例为iPhone手机供应横屏款式(由于最早的3代iPhone手机不撑持orientation属性)：

1. @importurl("style.css")screen;1

复制代码

1. @importurl("style.css")screen;2

复制代码

android手机的多分辩率成绩：

android体系的开放性招致其终真个多样性，那末关于林林总总的android手机来讲，屏幕分辩率的差别招致针对android手机的页面重构庞大性增添，那末我们能够用mediaquery为每种分辩率供应特定款式：

1. @importurl("style.css")screen;3

复制代码

1. @importurl("style.css")screen;4

复制代码

device-aspect-ratio

device-aspect-ratio能够用来适配特定屏幕长宽比的设备，这也是一个很有效的属性，好比，我们的页面想要对长宽比为4:3的一般屏幕界说一种款式，然后关于16:9和16:10的宽屏，界说另外一种款式，好比自顺应宽度和流动宽度：

1. @importurl("style.css")screen;5

复制代码

1. @importurl("style.css")screen;6

复制代码

固然，关于手机也能够利用这个属性，好比关于480px*800px的NexusOne和Desire等手机，能够用上面的款式来婚配：

1. @importurl("style.css")screen;7

复制代码

1. @importurl("style.css")screen;8

复制代码

O’Reilly辨别iPhone和iPad的办法

O’Reilly为其网站制造了针对iPad和iPhone设备的分歧版本，从而供应最合适相干设备浏览的界面，他们的做法就是利用mediaquery：

1. @importurl("style.css")screen;9

复制代码

1. 1230

复制代码

具体先容能够检察这里：http://broadcast.oreilly.com/2010/04/using-css-media-queries-ipad.html
总结

CSS3的mediaquery是一个很壮大也很好用的工具，它为我们在分歧的设备和情况下完成丰厚的界面供应了一种快速办法，固然如今各个扫瞄器对它的撑持另有些差别，可是人人都在改善，IE9已入手下手撑持mediaquery了。不外今朝mediaquery的最年夜舞台是在高端手持设备，信任跟着挪动互联网的疾速开展，mediaquery也会很好发扬本人的感化。
</p>
有了CSS，我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题，改变字体颜色，字体样式等等

可以使用 CSS 检查工具进行设计。

滚动条)层属性--溢出(visible/hidden/scroll/auto)

俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。