《HTML5移动开发指南》——笔记7(Media Queries 移动设备样式)
2016-06-21 16:30
447 查看
viewport——虚拟窗口。主要作用是允许开发者创建一个虚拟的窗口,并且自定义其窗口的大小和缩放功能。
content属性允许设置以下6种不同的参数。
width:虚拟窗口的屏幕宽度大小
height:虚拟窗口的屏幕高度大小
initial-scale:初始缩放比例
maximun-scale:允许用户缩放的最大比例
minimun-scale:允许用户缩放的最小比例
user-scalable:是否允许手动缩放
媒体查询的语法总结
not关键字 表示对后面的样式表达式执行取反操作
@media not screen and (max-device-width:480px)
only关键字 让不支持Media Queries的设备但能读取Media Type类型的游览器忽略这个样式
@media only screen and (max-device-width:480px)
media_type参数的作用是指定设备类型,通常称为媒体类型。
media_feature的主要作用是定义CSS中的设备特性,且大部分移动设备特性都接受min/max的前缀。
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>(以上代码只要的作用的是定义一个虚拟窗口width宽度为device-width设备宽度,初始缩放比例大小为1,不允许用户手动缩放)
content属性允许设置以下6种不同的参数。
width:虚拟窗口的屏幕宽度大小
height:虚拟窗口的屏幕高度大小
initial-scale:初始缩放比例
maximun-scale:允许用户缩放的最大比例
minimun-scale:允许用户缩放的最小比例
user-scalable:是否允许手动缩放
<link rel="stylesheet" media="screen and(max-width:600px)" href="small.css">
<link rel="stylesheet" media="screen and(max-width:600px) and(max-width:900px)" href="small.css"> @media screen and (min-width:600px) and (max-width:900px) { }
/* 设备处于纵向模式,应用portrait样式文件*/ <link rel="stylesheet" media="all and(orientation:portrait)" href="portrait.css"> /* 设备处于横向模式,应用landscape样式文件*/ <link rel="stylesheet" media="all and(orientation:landscape)" href="landscape.css">
媒体查询的语法总结
not关键字 表示对后面的样式表达式执行取反操作
@media not screen and (max-device-width:480px)
only关键字 让不支持Media Queries的设备但能读取Media Type类型的游览器忽略这个样式
@media only screen and (max-device-width:480px)
media_type参数的作用是指定设备类型,通常称为媒体类型。
media_feature的主要作用是定义CSS中的设备特性,且大部分移动设备特性都接受min/max的前缀。
相关文章推荐
- 基于 CSS3 Media Queries 的 HTML5 应用
- htm5文件上传预览
- h5手机网页的meta标签
- swiper的基础使用(十)
- 11个基础的HTML5动画工具
- html5新属性——placeholder
- 使用原生HTML5上传文件
- html5新增标签
- HTML5中的Blob对象的使用
- 【分享】WeX5的正确打开方式(1)
- CDH5.1从Flume采集到索引(Solr)
- 实践 HTML5 的 CSS3 Media Queries
- 实践 HTML5 的 CSS3 Media Queries
- HTML5多媒体audio和video(二)
- html5 特性摘要
- HTML5多媒体audio和video(一)
- H5视频直播扫盲
- 制作简单的计算器,用到HTML5中的type=number这个input属性
- HTML5自学(二)
- 【转】CDH5.x升级