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实现3d旋转动画特效
Mar 10 HTML / CSS
CSS3弹性盒模型开发笔记(二)
Apr 26 HTML / CSS
CSS3实现滚动条动画效果代码分享
Aug 03 HTML / CSS
html5 canvas实现圆形时钟代码分享
Dec 25 HTML / CSS
谈一谈HTML5本地存储技术
Mar 02 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
Apr 08 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
May 28 HTML / CSS
CSS中em的正确打开方式详解
Apr 08 HTML / CSS
详解盒子端CSS动画性能提升
May 24 HTML / CSS
css height属性中的calc方法详解
Jun 03 HTML / CSS
CSS浮动引起的高度塌陷问题
Aug 05 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制作图型计数器的例子
2006/10/09 PHP
thinkphp如何获取客户端IP
2015/11/03 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
PHP实现微信申请退款功能
2018/10/01 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
JavaScript 基础篇之运算符、语句(二)
2012/04/07 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
JS实现弹性漂浮效果的广告代码
2015/09/02 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
浅析上传头像示例及其注意事项
2016/12/14 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
2017/12/22 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
2018/09/14 Javascript
Vue3.0中的monorepo管理模式的实现
2019/10/14 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
PyQt5每天必学之弹出消息框
2018/04/19 Python
python实现指定文件夹下的指定文件移动到指定位置
2018/09/17 Python
20行python代码的入门级小游戏的详解
2019/05/05 Python
python opencv 批量改变图片的尺寸大小的方法
2019/06/28 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
css3进阶之less实现星空动画的示例代码
2019/09/10 HTML / CSS
实习单位接收函模板
2014/01/10 职场文书
求职简历中自我评价
2014/01/28 职场文书
小区推广策划方案
2014/06/06 职场文书
高考升学宴答谢词
2015/01/20 职场文书
北大自主招生自荐信
2015/03/04 职场文书
2015中秋节慰问信范文
2015/03/23 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
放飞理想主题班会
2015/08/14 职场文书
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js