用css3 media queries创建手机版网站
css3在手持设备高速发展的带动下,在网页设计者和开发者孜孜不倦的追求下不断发酵,而它对于网站的最大好处莫过于对智能手机、平板电脑等的支持,使得用户通过iphone、ipad等设备都可以访问。想为网站创建一个适用于手机或者平板电脑等移动设备的版本吗?本文将为你介绍如何用css3来帮网站打开移动设备之门。
Media Queries
如果你曾经创建过网站的打印样式,那么你应该知道可以通过设置css2的media type为print去实现打印,下面是两个关于media type的简单应用
//example1
≪link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">
≪link rel="stylesheet" type="text/css" media="print" href="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) {
//在这里填写专门为小屏幕设备设置的样式,例如不同的宽度、高度,不同尺寸的图片等等
}
引用一个单独的Media Queries样式文件
除了修改原有的样式文件来实现对智能手机的支持外,我们还可以将Media Queries样式单独保存为一个独立的文件,然后在页面引用则可。
≪link rel="stylesheet" type="text/css"
media="only screen and (max-device-width: 480px)"
href="small-device.css" />测试media queries
改造完后,我们需要测试,看一下media queries是否生效。如果你自己拥有一台iphone或者android手机,那么只需要用该设备访问要测试的网站就可以了,但如果没有这些设备的话,那怎么办?我将隆重为你介绍一个非常优秀的模拟media queries测试网站:protofluid,只需要访问该网站,然后设置模拟设备(包括手机、平板、显示器、电视等,而每一种设备都对应有不同的产品可供选择),最后输入要访问的网站链接(包括本地的链接)回车后就可以看到实际效果了。
本文是有html5cn网站小编转发和编辑,转载请注明出处。请关注新浪微博@HTML5cn、腾讯微博@HTML5cn。
Media Queries
如果你曾经创建过网站的打印样式,那么你应该知道可以通过设置css2的media type为print去实现打印,下面是两个关于media type的简单应用
//example1
≪link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">
≪link rel="stylesheet" type="text/css" media="print" href="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) {
//在这里填写专门为小屏幕设备设置的样式,例如不同的宽度、高度,不同尺寸的图片等等
}
引用一个单独的Media Queries样式文件
除了修改原有的样式文件来实现对智能手机的支持外,我们还可以将Media Queries样式单独保存为一个独立的文件,然后在页面引用则可。
≪link rel="stylesheet" type="text/css"
media="only screen and (max-device-width: 480px)"
href="small-device.css" />测试media queries
改造完后,我们需要测试,看一下media queries是否生效。如果你自己拥有一台iphone或者android手机,那么只需要用该设备访问要测试的网站就可以了,但如果没有这些设备的话,那怎么办?我将隆重为你介绍一个非常优秀的模拟media queries测试网站:protofluid,只需要访问该网站,然后设置模拟设备(包括手机、平板、显示器、电视等,而每一种设备都对应有不同的产品可供选择),最后输入要访问的网站链接(包括本地的链接)回车后就可以看到实际效果了。
本文是有html5cn网站小编转发和编辑,转载请注明出处。请关注新浪微博@HTML5cn、腾讯微博@HTML5cn。
【用css3 media queries创建手机版网站】相关文章
5. 用CSS创建打印页面
6. Respond.js – 让不懂爱的 IE6-8 支持 CSS3 Media Query
7. 手机版百度首页推情人节特效,HTML5+CSS3 实现网页3D翻转
9. HTML5 postMessage 和 onmessage API 详细应用
本文来源:https://www.51html5.com/a816.html
上一篇:Css3弹性盒模型
下一篇:用css3写遨游的logo
﹝用css3 media queries创建手机版网站﹞相关内容
- 利用HTML5 Canvas创建交互式Bubble Chart
- CSS创始人之一Bert Bos:CSS只是进化的一部分
- 构建手机浏览器云能力 实现跨平台多场景需求
- 利用CSS3的checked伪类实现OL的隐藏显示
- 使用CSS3和RGBa创建超酷的按钮
- 使用CSS3创建动态3D立方体
- 用CSS3创建动画价格表
- 快速排版网页布局的PS扩展 – Velositey
- HTML5游戏市场繁荣,最游戏手机版亮相
- Facebook手机版推HTML5移动游戏平台