media query学习笔记

最新推荐文章于 2024-08-12 08:00:17 发布

转载最新推荐文章于 2024-08-12 08:00:17 发布 · 121 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/grape1211/p/4265389.html

本文深入探讨了CSS中的MediaQuery（媒介查询）概念，包括其基本定义、能够获取的值及其语法结构和用法。并通过示例展示了如何在CSS内和引入CSS时利用媒体查询来实现根据不同设备特性的丰富界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文转自：http://blog.youkuaiyun.com/renfufei/article/details/19981133

　　　　　http://www.cnblogs.com/softlover/archive/2012/11/25/2787429.html

　　　　 http://www.blueidea.com/tech/web/2010/7912_3.asp

http://www.moke8.com/article-5657-1.html

一、基本定义

1、CSS中的Media Query（媒介查询）是什么？

通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于”。如：width会有min-width和max-width媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。

2、media query能够获取哪些值？

设备的宽和高device-width，device-heigth显示屏幕/触觉设备。

渲染窗口的宽和高width，heigth显示屏幕/触觉设备。

设备的手持方向，横向还是竖向orientation（portrait|lanscape）和打印机等。

画面比例aspect-ratio点阵打印机等。

设备比例device-aspect-ratio-点阵打印机等。

对象颜色或颜色列表color，color-index显示屏幕。

设备的分辨率resolution。

3、语法结构及用法

@media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{sRules}

二、使用示例

1.写入一个css内，css内用media query区分

/*兼容IE8,满足条件时后面覆盖前面*/
.section{
        width:20%;
        height: 60px;
        background-color: yellow;
        float:left;
        border:1px solid white;
        color:white;
    }
/*宽度在200到600之间*/
@media screen and (min-width: 200px) and (max-width: 600px){
    .section{
        width:20%;
        height: 60px;
        background-color: red;
        float:left;
        border:1px solid white;
        color:white;
    }
}

/*宽度大于600px*/
@media screen and (min-width: 600px) {
    .section{
        width:45%;
        height: 90px;
        color:white;
        background-color: blue;
        float: left;
        border:1px solid white;
    }
}

2.引入css时，指定media属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="mediaQueryIE8.css">
    
    <link rel="stylesheet" media="screen and (min-width: 100px) and (max-width:600px)" type="text/css" href="mediaQuery2.css">
    <link rel="stylesheet" media="screen and (min-width: 600px) "type="text/css" href="mediaQuery3.css">
    <!--width为600px时，mediaQuery3.css生效，后面覆盖前面-->
</head>
<body>
    <div class="section">111111</div>
    <div class="section">222222</div>
    <div class="section">333333</div>
    <div class="section">444444</div>
    <div class="section">555555</div>
    <div class="section">666666</div>
    <div class="section">777777</div>
    <div class="section">888888</div>
    <div class="section">999999</div>
</body>
</html>

转载于:https://www.cnblogs.com/grape1211/p/4265389.html