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

2024-06-12 03:52:22

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

/* 将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 响应式媒体查询的示例代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

css3媒体查询实例,css3 响应式媒体查询的示例代码相关推荐

一款由css3和jquery实现的响应式设计导航
2014年响应式设计成为设计主流.今天要给大家带来一款由css3和jquery实现的响应式设计导航.当显示器为pc时,导航为横条.当客户端为移动端时,呈现坚形导航.我们一起看下效果图: 在线预览 ...
php翻牌游戏代码,H5响应式网页翻牌小游戏代码
H5响应式网页翻牌小游戏代码 body { margin: 0; padding: 0; } .tile { display: block; float: left; border-radius: 5 ...
java 添加一个线程、创建响应的用户界面。演示示例代码
javajava 添加一个线程.创建响应的用户界面 . 演示示例代码来自thinking in java 4 21章部分的代码夹21.2.11 thinking in java 4免费下载: ...
CSS3 Media Query 响应式媒体查询
在CSS中,有一个极其实用的功能:@media 响应式布局.具体来说,就是可以根据客户端的介质和屏幕大小,提供不同的样式表或者只展示样式表中的一部分.通过响应式布局,可以达到只使用单一文件提供多平台的 ...
css3媒体查询实现网站响应式布局
响应式建筑设计.响应式家具设计.响应式办公设计,这些词可能是已有的专业名词,也可能是我自己想出来的一些名词. 因为在生活中,我们常常会见到很多让人惊叹的设计,为什么同一套东西经过不同的方式变化之后会给 ...
CSS3 @media 查询（制作响应式布局）
这里简单说明一下@media 查询. 详细说明文档:http://www.runoob.com/cssref/css3-pr-mediaquery.html 使用 @media 查询,你可以针对不同的 ...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：响应式的列重置
<!DOCTYPE html> <html> <head><meta charset="utf-8"> <title>B ...
React实例练习-响应式设计、数据绑定、列表渲染、删除单项
服务菜单最好的学习就是在实战中成长,做一个<小姐姐服务菜单>应用,练习前面的知识和学习新知识新建小姐姐组件先在SRC的目录下面,新建一个文件Xiaojiejie.js 然后写一个基本 ...
Vue响应式原理（含详细代码）
Vue响应式原理介绍监听Vue实例中的data选项,我们以下用一个普通的js对象模拟data,用Object.defineProperty进行定义属性值的getter和setter方法.当data选 ...
java调用r实例,Spring Boot中使用RSocket的示例代码
1. 概述 RSocket 应用层协议支持Reactive Streams 语义, 例如:用RSocket作为HTTP的一种替代方案.在本教程中, 我们将看到RSocket 用在spring boot ...

最新文章

热门文章