• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > CSS3中的Media Queries学习笔记

CSS3中的Media Queries学习笔记

作者:冰点 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含CSS3,Media,Queries等相关知识,冰点 希望在学习及工作中可以帮助到您

一、Media Queries 支持的属性
2016523115225102.png (483×314)

2016523115243298.png (423×217)

二、关键字
and - 结合多个媒体查询 not - 排除某种制定的媒体类型 only - 用来定某种特定的媒体类型

三、引用样式示例

  1. <link rel="stylesheet" media="all" href="style.css" />   
  2. <link rel="stylesheet" media="screen and (min-width:980px)" href="desktop.css" />   
  3. <link rel="stylesheet" media="screen and (min-width:768px) and (max-width:980px)" href="pad.css" />   
  4. <link rel="stylesheet" media="screen and (min-width:480) and (max-width: 768px)" href="phone.css" />   
  5. <link rel="stylesheet" media="screen and (max-width:320px)" href="small.css" />  

四、内联样式示例

  1. @media screen and (min-width: 980px) {   
  2.     //css code  
  3. }   
  4. @screen and (min-width:768px) and (max-width:980px) {   
  5.     //css code  
  6. }   
  7. @screen and (min-width:480) and (max-width: 768px) {   
  8.     //css code  
  9. }   
  10. @screen and (max-width:320px) {   
  11.     //css code  
  12. }   
  13.   
  14. @media screen and (max-device-width: 480px) {   
  15.     //max-device-width等于480px  
  16. }   
  17. @media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) {   
  18.     //设备宽高比   
  19. }   
  20. @media all and (orientation:portrait) {   
  21.     //竖屏   
  22. }   
  23. @media all and (orientation:landscape) {   
  24.     //横屏   
  25. }  


五、I8的兼容性问题解决
问题根源:
在项目的CSS文件中采用了media这东东来根据视窗的大小自动调整布局,但是,但是IE8及以下版本浏览器不支持CSS3 media queries,也就是@media screen and (max-width: 900px) 里面的css代码没有执行,

  1. @media screen and (max-width: 900px) {   
  2.   ...   
  3. }  

这如何是好啊,网上倒是有不少人提出解决方法,最简单的方法就是:
IE8和之前的浏览器不支持CSS3 media queries,你可以在页面中添加css3-mediaqueries.js来解决这个问题。

  1. <!--[if lt IE 9]>  
  2.     <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>  
  3. <![endif]-->  

您可能想查找下面的文章:

  • 使用CSS3制作一个简单的进度条(demo)
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果
  • CSS3实现自定义Checkbox特效实例代码
  • 总结30个CSS3选择器
  • CSS3模拟动画下拉菜单效果
  • CSS3动画:5种预载动画效果实例
  • CSS3 仿微信聊天小气泡实例代码

相关文章

  • 2017-08-06CSS中的伪元素简介
  • 2017-08-06css实现的圆角效果带有注释
  • 2017-08-06CSS的各种居中——如何书写高质量代码
  • 2017-08-06CSS中position定位的个熟悉示例介绍
  • 2017-08-06css 省略号 css3让多余的字符串消失并附加省略号的实现代码
  • 2017-08-0610个DIV+CSS需要注意的问题
  • 2017-08-06css常用浮出层的写法及实例
  • 2017-08-06使用CSS布局定位属性轻松实现优美站点布局
  • 2017-08-06CSS 层叠和继承实现
  • 2017-08-06a标签的四个css伪类(link、visited、hover、active)样式理解

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 在可编辑div中插入文字或图片解决思路与实现步骤
    • css实现跨浏览器的box-shadow盒阴影效果告别图片实现类似效果(2)
    • CSS3过渡transition效果实例介绍
    • html 滚动条在IE6和IE7中兼容性问题
    • CSS3+js实现简单的时钟特效
    • css背景图片的背景裁切、背景透明度、背景变换等效果运用
    • ie6下embed标签不能播放视频问题解决方法
    • 推荐14款非常有用的 CSS 网格系统生成工具
    • CSS3绘制六边形的简单实现
    • css核心基础总结篇(推荐)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有