【技术】Media Queries移动设备样式
2014-08-27 11:09
260 查看
Viewpoint设置适应移动设备屏幕大小
(1) viewpoint虚拟窗口的主要作用是允许开发者创建一个虚拟的窗口(viewpoint),并自定义其窗口的大小和缩放功能。
Mobile safari虚拟窗口默认大小是980像素,android browser默认是800像素,IE默认是974像素,opera是850像素
(2)使用viewpoint
在meta元素中定义,其主要作用是设置web页面适应移动设备的屏幕大小 <meta name=”viewpoint” content=”width=device-width,initial-scale=1,user-scalable=0”> 该代码的主要作用是自定义虚拟窗口,并制定虚拟窗口width宽带为device-width,初始缩放比例大小为1,同时不允许用户使用手动缩放功能
Content属性:width、height、initial-scale、maximum-scale、minimum-scale,user-scalable
(3)media queries如何工作的
① 最大宽带值是600px时
<link rel=”stylesheet” media=”screen and (max-width:600px)” href=”small.css”>
在small.css 样式内,需要定义media类型的样式
@media screen and (max-width:600px){
.demo{
Background-color:#ccc;
}
}
②最大宽带值是600-900px时
<link rel=”stylesheet” media=”screen and (min-width:600) and (max-width:900px)” href=”small.css”>
在small.css 样式内,需要定义media类型的样式
@media”screen and (min-width:600) and (max-width:900px){
.demo{
Background-color:#ccc;
}
}
③最大宽带值是480px时(手机)
<link rel=”stylesheet” media=”screen and (max-device-width:480px)” href=”small.css”>
在small.css 样式内,需要定义media类型的样式
@media”screen and (max-device-width:480px){
.demo{
Background-color:#ccc;
}
}
判断当移动设备(如ipad)的方向发生变化时应用该样式。
当移动设备处于纵向portrait模式下时,应用portrait样式文件;当移动设备处于横向landscape模式下时,应用landscape样式文件。
<link rel=”stylesheet” media=”all and (orientation:portrait)” href=” portrait.css”> <link rel=”stylesheet” media=”all and (orientation:landscape)” href=” landscape.css”>
④ Media Queries 语法总结
@media [media_query] media_type and media_feature
Media_query 查询关键字,可以使用not、only。Not取反,only让不支持media queries的设备但能读取media type类型的浏览器忽略这个样式。
Media_type 指定设备类型(即媒体类型),共10种设备类型
●all 所有设备
●screen 显示器、笔记本、移动终端等设备
●aural、braille、 handled、 print 、projection、 tty、 tv、 embossed
Media_feature 定义css中的设备特性,大部分移动设备特性都允许接受min、max的前缀
● Width、 height
●Device_width、 device_height
● Orientation
● Aspect_raido
● Resolution
● ……
IE8 以下版本不支持media queries
(1) viewpoint虚拟窗口的主要作用是允许开发者创建一个虚拟的窗口(viewpoint),并自定义其窗口的大小和缩放功能。
Mobile safari虚拟窗口默认大小是980像素,android browser默认是800像素,IE默认是974像素,opera是850像素
(2)使用viewpoint
在meta元素中定义,其主要作用是设置web页面适应移动设备的屏幕大小 <meta name=”viewpoint” content=”width=device-width,initial-scale=1,user-scalable=0”> 该代码的主要作用是自定义虚拟窗口,并制定虚拟窗口width宽带为device-width,初始缩放比例大小为1,同时不允许用户使用手动缩放功能
Content属性:width、height、initial-scale、maximum-scale、minimum-scale,user-scalable
(3)media queries如何工作的
① 最大宽带值是600px时
<link rel=”stylesheet” media=”screen and (max-width:600px)” href=”small.css”>
在small.css 样式内,需要定义media类型的样式
@media screen and (max-width:600px){
.demo{
Background-color:#ccc;
}
}
②最大宽带值是600-900px时
<link rel=”stylesheet” media=”screen and (min-width:600) and (max-width:900px)” href=”small.css”>
在small.css 样式内,需要定义media类型的样式
@media”screen and (min-width:600) and (max-width:900px){
.demo{
Background-color:#ccc;
}
}
③最大宽带值是480px时(手机)
<link rel=”stylesheet” media=”screen and (max-device-width:480px)” href=”small.css”>
在small.css 样式内,需要定义media类型的样式
@media”screen and (max-device-width:480px){
.demo{
Background-color:#ccc;
}
}
判断当移动设备(如ipad)的方向发生变化时应用该样式。
当移动设备处于纵向portrait模式下时,应用portrait样式文件;当移动设备处于横向landscape模式下时,应用landscape样式文件。
<link rel=”stylesheet” media=”all and (orientation:portrait)” href=” portrait.css”> <link rel=”stylesheet” media=”all and (orientation:landscape)” href=” landscape.css”>
④ Media Queries 语法总结
@media [media_query] media_type and media_feature
Media_query 查询关键字,可以使用not、only。Not取反,only让不支持media queries的设备但能读取media type类型的浏览器忽略这个样式。
Media_type 指定设备类型(即媒体类型),共10种设备类型
●all 所有设备
●screen 显示器、笔记本、移动终端等设备
●aural、braille、 handled、 print 、projection、 tty、 tv、 embossed
Media_feature 定义css中的设备特性,大部分移动设备特性都允许接受min、max的前缀
● Width、 height
●Device_width、 device_height
● Orientation
● Aspect_raido
● Resolution
● ……
IE8 以下版本不支持media queries
相关文章推荐
- Windows Mobile 开发黄金周(1):移动设备应用程序开发-平台,工具和技术
- Media Queries移动设备样式
- 移动设备电池管理——各种电池技术的简介1
- 移动技术--从网页游戏谈起 3--网页游戏与移动设备
- CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices (包括 苹果手表 apple watch)
- 用户从手机的浏览器访问www.baidu.com,看到的可能跟桌面PC电脑,是不太一样的网页效果,会更适合移动设备使用。请简要分析一下,实现这种网页区分显示的原因及技术原理。
- Media Queries移动设备样式
- 通过fidder抓取移动端设备的数据包,来分析移动app的技术
- 移动设备上的媒体查询 CSS media queries for mobile device
- css在ios和android设备上的兼容性问题(移动设备不同内核浏览器样式兼容性)笔记
- css在ios和android设备上的兼容性问题(移动设备不同内核浏览器样式兼容性)笔记
- Media Queries移动设备样式
- 数据隐藏技术揭秘:破解多媒体、操作系统、移动设备和网络协议中的隐秘数据
- 移动设备上的媒体查询 CSS media queries for mobile device
- 浩瀚技术 安卓版移动开单手持微POS PDA无线移动开单软件 -安卓版移动手持开单设备
- 移动设备电池管理——锂电池技术的简介
- 移动设备上的媒体查询 CSS media queries for mobile device
- CSS3系列四(Media Queries移动设备样式)
- 开放移动设备技术系列文章
- 移动设备数据访问技术三