<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>媒体查询-策略</title>

        <style>

            *{

                box-sizing: border-box;

                padding: 0;

                margin: 0;

            }

            body{

                padding-top: 200px;

            }

            img{

                width: 100%;

                height: 100%;

            }

            .row{

                width: 100%;

                display: flex;

                flex-wrap: wrap;

            }

            .col{

                padding-top: 10px;

                padding-bottom: 10px;

                background-color: rgba(86,61,124,0.15);

                border: 1px solid rgba(86,61,124,0.2);

            }

            /* 断点

                xs: < 576px

                sm: 576 ~ 768px

                md: 768 ~ 992px

                lg: 992 ~ 1200px

                xl: > 1200px

                断点怎么来的：当改变屏幕大小的时候，页面会显示不正常，就需要设置断点了。

                            经验值，预设一些。

             */

            /* @media (max-width:576px){

                .col{

                    width: 100%;

                }

            }

            @media (min-width:577px) and (max-width:768px){

                .col{

                    width: 50%;

                }

            }

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

                .col{

                    width: 25%;

                }

            }

            @media (min-width:993px) and (max-width:1200px){

                .col{

                    width: 16.66666667%;

                }

            }

            @media (min-width:1201px){

                .col{

                    width: 8.333333333%;

                }

            } */

            /* PC first 从宽到窄检测，后面的会覆盖前面的，如果检测到匹配的大小就会停止匹配后面的代码 */

            .col{

                width: 8.33333333%;

            }

            @media (max-width:1200px){

                .col{

                    width: 16.66666667%;

                }

            }

            @media (max-width:992px){

                .col{

                    width: 25%;

                }

            }

            @media (max-width:768px){

                .col{

                    width: 50%;

                }

            }

            @media(max-width:576px){

                .col{

                    width: 100%;

                }

            }

            /*  mobile first 从最小屏幕开始判断，从小往大设置的是下限，即min-width*/

            .col{

                width: 100%;

            }

            @media(min-width: 576px){

                .col{

                    width: 50%;

                }

            }

            @media (min-width:768px){

                .col{

                    width: 25%;

                }

            }

            @media (min-width:992px){

                .col{

                    width: 16.66666667%;

                }

            }

            @media (min-width:1200px){

                .col{

                    width: 8.33333333%;

                }

            }

        </style>

    </head>

    <body>

         <div class="row">

                <div class="col">

                    <img src="img/3.8-1.png" alt="">

                </div>

                <div class="col">

                    <img src="img/3.8-1.png" alt="">

                </div>

                <div class="col">

                    <img src="img/3.8-1.png" alt="">

                </div>

                <div class="col">

                    <img src="img/3.8-1.png" alt="">

                </div>

                <div class="col">

                    <img src="img/3.8-1.png" alt="">

                </div>

                <div class="col">

                    <img src="img/3.8-1.png" alt="">

                </div>

                <div class="col">

                    <img src="img/3.8-1.png" alt="">

                </div>

                <div class="col">

                    <img src="img/3.8-1.png" alt="">

                </div>

                <div class="col">

                    <img src="img/3.8-1.png" alt="">

                </div>

                <div class="col">

                    <img src="img/3.8-1.png" alt="">

                </div>

                <div class="col">

                    <img src="img/3.8-1.png" alt="">

                </div>

                <div class="col">

                    <img src="img/3.8-1.png" alt="">

                </div>

            </div>

    </body>

</html>
bootstrap的断点：

xs: < 576px 超小屏一般是手机

sm: 576px ~ 768px; 小屏一般是大屏手机

md: 768px ~ 992px 中屏一般是平板或小的显示器

lg: 992px ~ 1200px 大屏一般是显示器

xl: > 1200px 超大屏

断点怎么来的：当改变屏幕大小的时候，页面会显示不正常，就需要设置断点了。根据经验取得的值，预设一些。
mobile first优先

媒体查询media query的更多相关文章

  1. CSS3 之媒体查询Media Query

    Media Queries是CSS3有关媒体查询的属性,有了CSS3 之媒体查询Media Queries就可以进行媒体查询,针对每个不同的媒体进行不同的样式编写.传说中的Web响应式布局就可以毫无压 ...

  2. 媒体查询@media query

    @media query 媒体查询 @media (min-width:768px)小屏 (>=) @media (min-width:992px)中屏 @media (min-width:12 ...

  3. 响应式设计的思考:媒体查询(media query)

    Jason Grigsby发表了篇文章,<CSS Media Query for Mobile is Fool’s Gold>对媒体查询(media query)吐槽,大意是在移动设备上使 ...

  4. 在javascript中使用媒体查询media query

    由于需要,我们可能会在js中用到一些media query,从而针对不同的分辨率做一些操作. //全兼容的 事件绑定 and 阻止默认事件 var EventUtil = { //Notice: ty ...

  5. css3的媒体查询(Media Queries)

    我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media="scr ...

  6. CSS3的媒体查询(Media Queries)与移动设备显示尺寸大全

    媒体查询介绍 我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media=&q ...

  7. 媒体查询media参数以及其兼容性问题

    一.设置meta标签 在使用媒体查询media之前我们需要先设置meta标签,对设备的缩放等参数进行设定. <!--设置缩放和绘制--> <meta name="viewp ...

  8. 巧妙使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的好方法

    有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏,普通屏,平板,手机?知道这些特征,我们web应用的CSS和JavaScript才能同步做相应的操作.在给Mozill ...

  9. 媒体查询Media Queries详解

    @media 标签可以说是响应式网页的开发基础.其主要由媒体类型(Media Type)和 媒体特性(Media Query)两部分组成. Media Type 设定后面规则生效的展示类型,包括all ...

随机推荐

  1. PAT乙级：1076 Wifi密码 (15分)

    PAT乙级:1076 Wifi密码 (15分) 题干 下面是微博上流传的一张照片:"各位亲爱的同学们,鉴于大家有时需要使用 wifi,又怕耽误亲们的学习,现将 wifi 密码设置为下列数学题 ...

  2. springboot多个service互相调用的事务处理（十三）

    在一个service的方法A中,调用另一个service的方法B,方法A和方法B均存在数据库插入操作,需要添加如下配置: @Transactional(rollbackFor = Exception. ...

  3. Mac终端美化（iterm2+zsh+oh-my-zsh+powerlevel10k）

    iterm2+zsh+oh-my-zsh+powerlevel10k 一.下载iterm2 方式一:官网下载 https://iterm2.com/ 方式二:百度云下载 链接: https://pan ...

  4. Python如何将py文件打包成exe

    安装pyinstaller 打开cmd窗口,输入pip install pyinstaller,命令行输出successfully表示成功. 生成exe文件 一.单个py文件 在py文件目录下,打开c ...

  5. dotnet部署出现Failed to load the dll from [ ... hostfxr.dll], HRESULT: 0x80070057

    起因 最近看到.net core 3支持wpf了,尝试一下(如果可行,会特别利于脱离.net运行时) dotnet new wpf dotnet publish -c Release -r win-x ...

  6. Spring Boot Mail通过QQ邮箱发送邮件

    本文将介绍如何在Spring Boot工程完成QQ邮箱配置,实现邮件发送功能. 一.在pom文件中添加依赖 <dependency> <groupId>org.springfr ...

  7. g6中的变换矩阵matrix

    在看g6文档的时候看到一个变换矩阵,不明觉厉,如下 matrix = 1 0 0 0 1 0 0 0 1 于是查资料了解里面每个数字的意义,和css3的matrix()方法似乎类同 transform ...

  8. jquery版本更新后无live函数的处理.TypeError: $(...).live is not a function

    jquery live函数语法 jquery版本更新, 发现一个问题: jq自带的live没有了.控制台下会有如下的提示:火狐: TypeError: $(...).live is not a fun ...

  9. SaltStack 水平权限绕过漏洞（CVE-2020-11651）

    影响版本 SaltStack < 2019.2.4 SaltStack < 3000.2 poc git clone https://github.com/jasperla/CVE-202 ...

  10. IDEA创建Mapper.xml文件识别不成功的问题

    在IDEA的maven项目中,创建一个EmpMapper.xml的文件识别不成功,图标显示为文本文档类型,在写代码时也不会弹出提示 解决方法: 在文件->设置->编辑器->文件类型中 ...