使用CSS3媒体资讯库创建移动网站

发布：2021-12-20 12:35:02 浏览：2175

一听到CSS3，Web设计师和开发者们的感觉就是悲喜两重天。高兴的是，通过cssS我们可以顺利解决很多棘手的问题，但可惜的是，它却不支持IE8浏览器。尽管IE8浏览器并不支持CSs3,但还是将对CS3的一部分技术进行展示和描述。无论如何，这并不影响CS3的普及和使用，因为这样实用的模块设计在具有大量市场份额的安卓手机和iPhone中占有很大的份额。
在此将对CSS3的一些规则是如何运用的进行适当的解释,从而你可以在自己的网站_上使用CSS3来创建一个具有iPhone风格的样式，那么现在我们开始吧。接下来我们会一起看一 个很简 单的例子，同时我们也会对如何在自己的网站中增加一一个小屏幕风格的视窗进行讨论，你们会发现在移动设备上，现有的网站里增加一-个样式表是非常容易的事情。

1. 媒体资讯库

如果之前你有过为网站创建一份打印样式表的经验的话， 那么你一-定会对接下来的创建特定环境下运行的特殊的样式表非常熟悉一当 页面被打印的时候就会出现一一个打印样式表。这些功能在css2中的媒体类型中就可以使用了。媒体类型可以让你能够指定-种特定的类型来进行定义，所以你可以定义为打印、手持或者其他状态。可不巧的是，这些媒体类型从来没有得到过一些设备的支持，即使是打印媒体类型也是这样，你很少看到它们被运用在日常生活中。在CS3中运用了媒体资讯库这个概念并把它进行延伸。与其寻找设备的类型。还不如注重设备本身的能力，然后你可以通过它们来查询各种你想要的东西。例如:

1. 高度和宽度(浏览器窗口)。
2. 设备的高度和宽度。
3. 方向定位--例如识别这个手机现在是横向屏幕模式还是纵向屏幕模式。
4. 设备的分辨率

如果用户所使用的浏览器能够支持媒体资讯库，那么我们就可以在特定的情况下对CSS3进行编写。例如，当我们检测到用户使用的手机是一个体积较小的智能手机，那么我们就可以为用户提供一个较小的网页布局。 在实际操作中我们可以看一看这个例子，而且这其中就运用了媒体资讯库的功能，并给网站带来了非常大的效应。
从上面的例子我们可以看到，在手机上网站并不仅仅只是减少了体积来适应内容，而是对网站进行了重新的构架从而来更好地适应小屏幕手机。此外，可能很多人会认为它是专门做成类似于iPhone布局的样子，实际上并不是这样的。在OperaMinl浏览器和基于安卓系统的手机上它也理进行显示一所以通过 设置媒体资讯库功能的dConstruct种各样的设备-哪 怕是那些你还没有想到的设备，都可以实现"

2. 利用媒体资讯库功能为电话创建样式表

在一个简单的两列布局模式。为了让它在手机上能够更容易阅读，我决定将布局调整为单列的线性布局，同时缩小页面顶部的区域从而使读者可以略过前面的内容直接阅读文章。第一种方法是使用媒体资讯库，在你的独立样式表内部的右侧输入定义的CsS替换的内容。所以在定义小型手机的时候我们可以使用下面的编辑语句: @media only screen and (max -device-wiath: 480px) {}然后我们可以在括号内为小型屏幕尺寸的设备添加css替换内容。通过使用联机编码我们可以简单地用css覆盖台式电脑浏览器中的任意样式规则。只要这部分内容是在CSS中的最后一部分，它就可以覆盖先前的任意规则。所以为了达到页面线性布局的效果，我们可以使用一个较小的顶部图片，我可以对它添加以下内容：
@media only screen and (max-device-width:480px){
     !div#wrapper {width:400px;}
     !div#header {
! ! background- image; url (media-queries -phone. jpg);
! ! height: 93px; position: relative;
}
! div#header hl { font-size: 140%; }
! #content { float: none; width: 1008; }
. ! #navigation { float :none; width: auto; }
}
在上述的代码中，我使用了一-个可替换的背景图片，同时减少了页面项部的高度,然后再对内容和导航进行无浮标设置，再在早期的样式表中覆盖宽度设置。注意，这些设置要点只对小屏幕设备起作用。

3. 使用媒体资讯库链接-一个独立 的样式。

如果你只想做一些细微的改变， 那么使用媒体资讯库来为设备增加一个特殊的内嵌代码是一个不错的方法。不论如何，如果你的的样式表包含了很多的覆盖内容或者你想要对浏览器中的样式进行一个完全的分离，并且你想把它运用到小屏幕设备上，用媒体资讯库链接不同的样式表就可以让你的CSS保持独立。要在主样式表后面添加一个独立的样式表并且cascade来覆盖样式表中的规则，你可以使用下面这样方法。
     <link rel=" stylesheet”type=” text/css” media=”
(max-device-width: 480px)” href=" small-device.css" /,

4. 测试媒体资讯库

如果你是一个iPhone户安卓设备用户或者其他手机设备的用户，而且你的手机浏览器支持媒体资讯库功能，那么你就可以自己测试你的CSSo但是你还是需要上传代码，这样你才能查看它。那么如果你要对别人的设备进行本地测试呢? ProtoFluid这个优秀的网站可以在开发过程中为你提供帮助。这个应用程序可以给你提供一一个进入你的本地 URL的表格，它可以让你就像在iPhone、iPad 或者其他各种移动设备的浏览器上查看应用程序的设计一样。下面的这个截图就是通过Poudol的Phone视图模式查看的之前的dosrut会议网站。
如果你有一个特定的移动设备，你就可以通过使用你自己的窗口来对它进行检测并了解它屏幕尺寸的大小。
在使用potoFluid的时候，你要提前对屏幕显示的最大宽度和设备的最大宽中媒体资讯库模式进行细微的修改。这意味着，如果用户在一个正常的台电脑浏览器上仍然可以正常使用媒体资讯库，只是这个窗口很小而已。
@media only screen and (max-width: 480px), only screen and(max- device-width: 480px) {
}
在更新完上述的代码之后，接下来只要在浏览器里刷新网页等窗口重新载入，你就会发现新出现的窗口布局已经变成了480像素大小了。当你在视图中修改了窗口的宽度数值后，媒体资讯库就能识别了。那么现在一切就绪，我们可以通过ProtoFluid来进行测试了。使用Proto-Fluid最大的一点好处就是，你仍然可以继续使用像FireBug 这样的工具来对网页设计进行调整，而这一点在iPhone上是无法实现的。同时，你还需要在尽可能多的设备上尝试你的页面布局，同时用ProtoFluid 的话将使你的开发和测试过程变得更简单。需要注意的是，如果当人们使用较窄的窗口显示时你不想对你的页面布局进行调节，你可以随时删除媒体资讯库中的最大宽度( max-width )这一限制，那么在窗口变小时将其自动切换成小窗口这一功能就只会在使用小屏幕而不是小窗口浏览器的设备上生效。