关于CSS3中Media Queries使用方法

Miracle 发布于2019-08-28 18:01 / 3217人阅读

摘要：上面表示的是当屏幕大于或等于时，容器的宽度为。多个媒体特性使用当屏幕在之间时，的背景色渲染为，如下所示。关键词样式代码上面代码表示的是样式代码将被使用在除打印设备和设备宽度小于下所有设备中。

Media Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果

@media 媒体类型and （媒体特性）{你的样式}

最大宽度max-width

“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如：

@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}

上面表示的是：当屏幕小于或等于480px时,页面中的广告区块（.ads）都将被隐藏。

最小宽度min-width

“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。

@media screen and (min-width:900px){
.wrapper{width: 980px;}
}

上面表示的是：当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px。

多个媒体特性使用

当屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5”，如下所示。

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

设备屏幕的输出宽度Device Width

在智能设备上，例如iPhone、iPad等，还可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。同样的，对于屏幕设备同样可以使用“min/max”对应参数，如“min-device-width”或者“max-device-width”。

上面的代码指的是“iphone.css”样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的“max-device-width”所指的是设备的实际分辨率，也就是指可视面积分辨率。

not关键词

@media not print and (max-width: 1200px){样式代码}

上面代码表示的是：样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。

only关键词

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110959.html

响应式web设计--媒体查询

摘要：媒体查询的用法媒体查询包含一个可选的媒体类型和，满足规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为或。还有一个与众不同的是，在其他浏览器中不要像其他属性一样在不同的浏览器中添加前缀。媒体查询的用法 media 媒体查询包含一个可选的媒体类型和，满足CSS3规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为true或false。如...

Eric 2019-08-29 16:07 评论0 收藏0
响应式web设计--媒体查询

摘要：媒体查询的用法媒体查询包含一个可选的媒体类型和，满足规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为或。还有一个与众不同的是，在其他浏览器中不要像其他属性一样在不同的浏览器中添加前缀。媒体查询的用法 media 媒体查询包含一个可选的媒体类型和，满足CSS3规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为true或false。如...

Salamander 2019-08-02 11:00 评论0 收藏0
花式使用CSS3 transition

摘要：欢迎交换友链进击的程序媛微博江小湖本文讲介绍控制六种方法触发，以及事件的使用。事件事件会在结束后触发。有没有渐变开始的事件目前只有有事件，目前未有此标准。欢迎交换友链 Lakers Blog--进击的程序媛Github：https://github.com/younglaker微博: 江小湖Laker 本文讲介绍:hover、:active、:focus、:checked、Media...

DobbyKim 2019-08-19 17:17 评论0 收藏0
css:Media Queries: How to target desktop, tablet a

摘要：涂聚文涂聚文 Media Queries: How to target desktop, tablet and mobile? /* Media Queries: How to target desktop, tablet and mobile? http://webdesignerwall.com/tutorials/css3-media-queries https:/...

fevin 2019-04-23 13:28 评论0 收藏0