用css3 media queries创建手机版网站用css3 media queries创建手机版网站
用css3 media queries创建手机版网站 css3在手持设备高速发展的带动下，在网页设计者和开发者孜孜不倦的追求下不断发酵，而它对于网站的最大好处莫过于对智能手机、平板电脑等的支持，使得用户通过iphone、ipad等设备都可以访问。想为网站创建一个适用于手机或者平板电脑等移动设备的版本吗,本文将为你介绍如何用css3来帮网站打开移动设备之门。
Media Queries
如果你曾经创建过网站的打印样式，那么你应该知道可以通过设置css2的
应...
用css3 media queries创建手机版网站
用css3 media queries创建手机版网站 css3在手持设备高速发展的带动下，在网页设计者和开发者孜孜不倦的追求下不断发酵，而它对于网站的最大好处莫过于对智能手机、平板电脑等的支持，使得用户通过iphone、ipad等设备都可以访问。想为网站创建一个适用于手机或者平板电脑等移动设备的版本吗,本文将为你介绍如何用css3来帮网站打开移动设备之门。
Media Queries
如果你曾经创建过网站的打印样式，那么你应该知道可以通过设置css2的
应用 media type为print去实现打印，下面是两个关于media type的简单//example1
css" media="screen" href="sans-serif.css">
//example2
@media screen { * { font-family: sans-serif } }
而打印功能或者正是你所知道的关于media type的所有用法，由于仅仅是对于打印设备的支持，所以我们很少可以在样式文件中看到media type也就不足为奇了。手持设备的流行和css2 media type的局限性使得人们在css3中定义了Media Queries，它是media type的一种延伸，不过相对于前辈，它的功能强大多了，除了可以为不同的设备选择一种适当的类型之外，它可以检查所有的事情，包括:
浏览器窗口的高度和宽度
设备的高度和宽度
方向，例如iphone手机是横向还是纵向
分辨率
也就是说，如果用户的浏览器支持css3 Media Queries，那么我们就可以专门为某些情况编写相关的css，例如:如果检测到用户使用了像iphone或者ipad这样的设备，那么将可以为它们呈现一个特定的布局。
使用Media Queries为智能手机或者平板电脑增加相应样式
我们可以为智能手机或者平板电脑的布局样式增加相应的css代码，如果你整站都是使用一个样式文件的话，则可以通过在样式文件增加以下语法格式的css代码:
@media only screen and (max-device-width: 480px) { 1 //在这里填写专门为小屏幕设备设置的样式，例如不同的宽度、高度，不同尺2 寸的图片等等 3 }
引用一个单独的Media Queries样式文件
除了修改原有的样式文件来实现对智能手机的支持外，我们还可以将Media Queries样式单独保存为一个独立的文件，然后在页面引用则可。
测试media queries
改 造完后，我们需要测试，看一下media queries是否生效。如果你自己拥有一台iphone或者android手机，那么只需要用该设备访问要测试的网站就可以了。但是如果你没有这些设备 怎么办,我向您推荐一个网站:易点开发，您可以利用widget平台将自己写的网页放到widget中展示，在电脑上就可以看到手机浏览器的效果，赶快来 试试吧～
本文档为【用css3 media queries创建手机版网站】，请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑，
图片更改请在作品中右键图片并更换，文字修改请直接点击文字进行修改，也可以新增和删除文档中的内容。 该文档来自用户分享，如有侵权行为请发邮件ishare@vip.sina.com联系网站客服，我们会及时删除。
[版权声明] 本站所有资料为用户分享产生，若发现您的权利被侵害，请联系客服邮件isharekefu@iask.cn，我们尽快处理。
本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用。
网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
浙公网安备 33021202002483