简单介绍CSS3中Media Query的使用


Posted in HTML / CSS onJuly 07, 2015

通过Media Query 媒体查询可以针对符合相应条件的媒体设置特定的样式。
引入方式

引入媒体查询的方式有两种。
link 方式引入

CSS Code复制内容到剪贴板
  1. <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />  

css 中引入

CSS Code复制内容到剪贴板
  1. @media screen and (max-width600px) {   
  2.   选择器 {   
  3.     属性:属性值;   
  4.   }   
  5. }  

常见的 Media Query

简单介绍CSS3中Media Query的使用

兼容性参考

HTML / CSS 相关文章推荐
CSS3 三维变形实现立体方块特效源码
Dec 15 HTML / CSS
45个非常奇妙的CSS3 特性应用示例
Jan 01 HTML / CSS
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
Jan 23 HTML / CSS
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
May 07 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
Jun 02 HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
Jan 27 HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
Mar 08 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 HTML / CSS
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
May 15 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
Sep 17 HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
Jul 10 HTML / CSS
CSS实现九宫格布局(自适应)的示例代码
Feb 12 HTML / CSS
CSS中垂直居中的简单实现方法
Jul 06 #HTML / CSS
CSS实现定位元素居中的方法
Jun 23 #HTML / CSS
利用CSS3实现文本框的清除按钮相关的一些效果
Jun 23 #HTML / CSS
使用CSS3制作饼状旋转载入效果的实例
Jun 23 #HTML / CSS
利用CSS3实现圆角的outline效果的教程
Jun 05 #HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
May 18 #HTML / CSS
CSS+jQuery+PHP+MySQL实现的在线答题功能
Apr 25 #HTML / CSS
You might like
深入理解php的MySQL连接类
2013/06/07 PHP
PHP模板引擎Smarty的缓存使用总结
2014/04/24 PHP
让焦点自动跳转
2006/07/01 Javascript
Javascript select下拉框操作常用方法
2009/11/09 Javascript
jquery last-child 列表最后一项的样式
2010/01/22 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
React Native使用Modal自定义分享界面的示例代码
2017/10/31 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
2018/01/31 jQuery
Vue-component全局注册实例
2018/09/06 Javascript
layui表格分页 记录勾选的实例
2019/09/02 Javascript
基于layui的table插件进行复选框联动功能的实现方法
2019/09/19 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
详细解析Python中__init__()方法的高级应用
2015/05/11 Python
python实现对csv文件的列的内容读取
2018/07/04 Python
Django进阶之CSRF的解决
2018/08/01 Python
Python中一些深不见底的“坑”
2019/06/12 Python
超全Python图像处理讲解(多模块实现)
2020/04/13 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
使用Python操作MySQL的小技巧
2020/09/10 Python
DC Shoes澳大利亚官方网上商店:购买DC鞋子
2019/10/25 全球购物
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
一年级语文上册复习计划
2015/01/17 职场文书
2015年派出所工作总结
2015/04/24 职场文书
民事申诉状范本
2015/05/20 职场文书
500字作文之难忘的同学
2019/12/20 职场文书
企业内部管理控制:采购授权审批制度范本
2020/01/19 职场文书
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP
mysql脏页是什么
2021/07/26 MySQL
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题
python中pd.cut()与pd.qcut()的对比及示例
2022/06/16 Python