css媒体查询标准,CSS 媒体查询

列的媒体查询

媒体查询的常见用法是创建弹性布局。在本例中，我们创建了一个布局，该布局在四列、两列和全宽列之间变化，具体取决于不同的屏幕尺寸：

大型屏幕：

中等屏幕：

小型屏幕：

实例

/* 创建彼此相邻浮动的四个相等的列 */

.column {

float: left;

width: 25%;

}

/* 在 992p x或更小的屏幕上，从四列变为两列 */

@media screen and (max-width: 992px) {

.column {

width: 50%;

}

/* 在宽度小于或等于 600 像素的屏幕上，使各列堆叠，而不是并排 */

@media screen and (max-width: 600px) {

.column {

width: 100%;

}

提示：更现代的创建列布局方法是使用 CSS Flexbox(请参见下面的例子)。但是，Internet Explorer 10 以及更早版本不支持它。如果需要 IE6-10 的支持，请使用浮动(如上所示)。

如需学习有关弹性框布局模块的更多知识，请学习 CSS Flexbox 这一章。

如需学习有关响应式 Web 设计的更多知识，请学习我们的响应式 Web 设计教程。

实例

/* 弹性盒的容器 */

.row {

display: flex;

flex-wrap: wrap;

}

/* 创建四个相等的列 */

.column {

flex: 25%;

padding: 20px;

}

/* 在 992px 或更小的屏幕上，从四列变为两列 */

@media screen and (max-width: 992px) {

.column {

flex: 50%;

}

/* 在宽度小于或等于 600 像素的屏幕上，使各列堆叠，而不是并排 */

@media screen and (max-width: 600px) {

.row {

flex-direction: column;

}

css媒体查询标准,CSS 媒体查询 - 实例相关推荐

常用CSS与Flex布局、媒体查询、JS事件控制css、VUE对象语法、Gride布局(待补全) CSS权重页面适配笔记本缩放
css属性就是要用的多用的熟知道的多就像一本工具书除了基础原理剩下的就是知识面了极力推荐MDN用过的人都说好~ 页面适配笔记本等自带缩放的场景 let t = window.devicePi ...
css 媒体查询移动端,媒体查询-移动端
媒体查询 @media not all and (min-width:1024px) and (max-width:1199px){ body{ background:blue; } } @media ...
HTML + CSS + JS 利用邮编查询 API 实现邮编查询工具
引言邮政编码是地址信息的重要组成部分,可以帮助快递公司.物流公司等对地址进行快速.准确的识别和派送.因此,邮编查询工具应用在许多业务场景中都有广泛的应用,例如:电商平台.物流公司.金融机构等.通过使 ...
（私人收藏）[开发必备]HTML5最全快速查找离线手册（可查询可学习，带实例）...
[开发必备]HTML5最全快速查找离线手册(可查询可学习,带实例) HTML5最全快速查找离线手册:https://pan.baidu.com/s/19seE8TJQSx4IsWgXtKQS0A j9 ...
利用Div CSS(嵌套盒模型)布局页面完整实例流程
Div CSS(嵌套盒模型)布局页面完整实例流程: <!DOCTYPE html> <html> <head> <meta charset=" ...
利用Div+CSS(嵌套+盒模型)布局页面完整实例流程
Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html> <html> <head> <meta charset=" ...
html5与css 1. web标准及组成
html5与css 1. web标准及组成学习目标 1.本专业介绍.HTML相关概念,HTML发展历史 2.WEB标准,W3C/WHATWG/ECMA相关概念 3.相关软件的应用以及站点的创建 4. ...
【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之三：定位体系概述
在说说标准--CSS中非常重要的可视化格式模型(visual formatting model)简介中,曾经提到了:在可视化格式模型中,每一个元素都会根据盒子模型产生0个或多个box,而这些b ...
(3) Hibernate的查询标准(Criteria)查询
Hibernate的查询标准(Criteria)查询 1 一个简单例子: Java代码 @SuppressWarnings("unchecked") public void ...

css媒体查询标准,CSS 媒体查询 - 实例

css媒体查询标准,CSS 媒体查询 - 实例相关推荐

最新文章

热门文章