css3 响应式媒体查询的示例代码


Posted in HTML / CSS onSeptember 25, 2019

让我们看一下使用媒体查询的更多示例。媒体查询是一种流行的技术,用于向不同的设备提供定制的样式表。为了演示一个简单的示例,我们可以更改不同设备的背景颜色

/* 将body的背景颜色设置为tan */
body {
  background-color: tan;
}
/* 在992px或更低的屏幕上,将背景颜色设置为蓝色 */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}
/* 在600px或更低的屏幕上,将背景颜色设置为橄榄色 */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

列的媒体查询

媒体查询的常见用途是创建灵活的布局。在此示例中,我们创建的布局在四个,两个和全宽列之间变化,具体取决于不同的屏幕大小:

.column {
  float: left;
  width: 25%;
}
/*在992px宽或更小的屏幕上,从四列到两列 */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* 在宽度为600px或更小的屏幕上,使列堆叠在彼此之上而不是彼此相邻*/
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

使用媒体查询更改字体大小

您还可以使用媒体查询来更改不同屏幕大小的元素的字体大小:

/* 如果屏幕大小超过600px宽,请将字体大小设置为80px */
@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  }
}
/* 如果屏幕尺寸为600px或更小,请将字体大小设置为30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

使用附加值:在下面的示例中,我们使用逗号向我们现有的媒体查询添加其他媒体查询(这将像OR运算符一样):例如当宽度介于600px和900px之间或高于1100px时 - 改变外观

@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

总结

以上所述是小编给大家介绍的css3 响应式媒体查询的示例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
css3使网页、图片变成灰色兼容大多数浏览器
Jul 02 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 HTML / CSS
纯CSS3制作页面切换效果的实例代码
May 30 HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
Jan 30 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
Jun 08 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
Mar 10 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
Feb 13 HTML / CSS
boostrap modal 闪现问题的解决方法
Sep 01 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
Sep 16 HTML / CSS
css height属性中的calc方法详解
Jun 03 HTML / CSS
CSS控制继承中的height能变为可继承吗
Jun 10 HTML / CSS
移动端rem布局的两种实现方法
Jan 03 #HTML / CSS
css3实现波纹特效、H5实现动态波浪效果
Jan 31 #HTML / CSS
css3动画过渡实现鼠标跟随导航效果
Feb 08 #HTML / CSS
CSS3 calc()会计算属性详解
Feb 27 #HTML / CSS
CSS3 clip-path 用法介绍详解
Mar 01 #HTML / CSS
CSS3混合模式mix-blend-mode/background-blend-mode简介
Mar 15 #HTML / CSS
CSS3截取字符串实例代码【推荐】
Jun 07 #HTML / CSS
You might like
php更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
记录mysql性能查询过程的使用方法
2013/05/02 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
php删除数组指定元素实现代码
2017/05/03 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
一个判断抢购时间是否到达的简单的js函数
2014/06/23 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
学习JavaScript设计模式(多态)
2015/11/25 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
JQuery 动态生成Table表格实例代码
2016/12/02 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
2017/02/14 Javascript
vue.js的提示组件
2017/03/02 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
Vue中 axios delete请求参数操作
2020/08/25 Javascript
vuex Module将 store 分割成模块的操作
2020/12/07 Vue.js
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
Python+Wordpress制作小说站
2017/04/14 Python
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
Django接收自定义http header过程详解
2019/08/23 Python
python树的同构学习笔记
2019/09/14 Python
python GUI计算器的实现
2020/10/09 Python
python 制作磁力搜索工具
2021/03/04 Python
Parfumdreams英国:香水和化妆品
2019/05/10 全球购物
清洁工表扬信
2014/01/08 职场文书
学校师德承诺书
2014/05/23 职场文书
九九重阳节标语
2014/10/07 职场文书
2015年税务稽查工作总结
2015/05/26 职场文书
谁动了我的奶酪读书笔记
2015/06/30 职场文书