美文网首页
CSS 媒体查询

CSS 媒体查询

作者: 霡霂976447044 | 来源:发表于2021-01-15 11:00 被阅读0次

学习: https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Media_queries

1. min-width

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    @media screen and (min-width: 400px) {
        body {
            color: red;
        }
    }

    /* @media screen and (min-width: 800px) {
        body {
            color: blue;
        }
    } */
</style>
<body>
    <h1>你好世界</h1>
</body>
</html>

效果: 当屏幕>400px的时候 字变为红色
min-width理解为, 当屏幕宽度达到了最小宽度400px,那么该媒体查询生效

2. max-width

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    @media screen and (max-width: 400px) {
        body {
            color: red;
        }
    }
</style>
<body>
    <h1>你好世界</h1>
</body>
</html>

效果: 当屏幕<400px的时候 字变为红色
max-width理解为, 当屏幕宽度达到了最大宽度400px以内,那么该媒体查询生效

记忆: min记>, max记为< 反记

相关文章

  • CSS 响应设计-媒体查询

    1、响应式 Web 设计 - 媒体查询 媒体(media)查询在 CSS3 上有介绍:CSS3 @media 查询...

  • CSS3响应式开发

    CSS3多媒体查询 CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想: 取代了查找设备的类型,CSS3...

  • 浅谈CSS3 响应式布局--Media Queries

    CSS3 Media Queries , CSS3媒体查询。使用 @media 查询,你可以针对不同的媒体类型定义...

  • CSS3 媒体查询

    1、CSS3 多媒体查询 CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想: 取代了查找设备的类型,C...

  • 13、媒体查询

    媒体查询一定要放在初始设置的css样式底下,否则会被后面设置的css样式覆盖掉媒体查询所设置的样式,那么媒体查询就...

  • CSS3中的媒体查询

    一、为什么需要媒体查询 CSS3的媒体查询模块就是为了针对设备特性(width、height等)设置特定的css样...

  • 自适应页面的实现方式

    CSS3 媒体查询 media媒体查询技术的原理:通过匹配不同屏幕设备的特征,让不同特征下的CSS代码生效。常用匹...

  • CSS-移动端页面(响应式)

    CSS-移动端页面(响应式) 媒体查询

  • CSS3 媒体查询

    能够让网站针对不同的浏览器和设备呈现不同显示效果 引入媒体查询 媒体查询写在CSS样式代码的最后,CSS是层叠样式...

  • 常见IE8兼容性问题及解决

    1、css3媒体查询 IE8不支持媒体查询 解决:respond.js,在页面中所有css文件的引用位置之后引用R...

网友评论

      本文标题:CSS 媒体查询

      本文链接:https://www.haomeiwen.com/subject/khiiaktx.html