摘要:本篇文章探讨了HTML5+CSS3从入门到精通之CSS3学习(4)Media Queries移动设备样式,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。
本篇文章探讨了HTML5+CSS3从入门到精通之CSS3学习(4)Media Queries移动设备样式,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。
<
viewport设置适应移动设备屏幕大小
viewport:允许开发者创建一个虚拟窗口并自定义其窗口的大小或缩放功能
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />
代码中的content属性可以设置如下6种不同参数
技术分享
Media Queries如何工作
1、定义当前屏幕可视区域的宽度最大值是600像素
<link href="small.css" rel="stylesheet" media="screen and(max-width:600px)"/>
那么small.css怎样写的呢
@media screen and (max-width:600px) {
.demo {
background-color:red;
}
}
2、定义当前屏幕可视区域的宽度长度在600到900像素之间
<link href="small.css" rel="stylesheet" media="screen and(min-width:600px) and(max-width:900px)"/>
@media screen and (min-width:600px) and (max-width:900px) {
.demo {
background-color: red;
}
}
3、当移动屏幕处于纵向(portrait)模式下时,应用portrait样式文件,当移动设备处于横向(landscape)模式下,应用landscape样式文件
<link href="protrait.css" rel="stylesheet" media="all and(orientation:portrait)"/>
<link href="landscape.css" rel="stylesheet" media="all and(orientation:landscape)"/>
Media Queries语法总结
语法格式如下图所示:
技术分享
1、使用Media Queries样式模块时都必须以“@media”方式开头
2、media_query表示查询关键定,比如说not only and 等等
not表示对后面的样式表达式执行取反操作
only让不支持Media Queries的设备但能读取Media Type类型的浏览器忽略这个样式,对于支持Media Queries的移动设备来说,如果存在only关键字,移动设备的浏览器会忽略only关键字并直接根据页面的表达式应用样式 文件
3、media_type 指定设备类型(也称媒体类型)
4、media_feature定义css中的设备特征
本文由职坐标整理发布,学习更多的相关知识,请关注职坐标IT知识库!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号