<!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. 【分布式锁】通过MySQL数据库的表来实现-V1

    一.来源 之所以要写这篇文章是因为想对自己当前的分布式知识做一个归纳.今天就先推出一篇MySQL实现的分布式锁,后续会继续推出其他版本的分布式锁,比如通过Zookeeper.Redis实现等. 二.正 ...

  2. Web 字体 font-family 浅谈

    前言 最近研究各大网站的font-family字体设置,发现每个网站的默认值都不相同,甚至一些大网站也犯了很明显的错误,说明字体还是有很大学问的,值的我们好好研究. 不同的操作系统.不同浏览器下内嵌的 ...

  3. odoo14通过命令行启动以及报错进不去系统问题解决办法

    一.通过CMD命令界面启动odoo:进入odoo-bin目录下:执行 python odoo-bin -c odoo.conf  二.pycharm配置自动安装升级模块:-c E:\odoo14\od ...

  4. Nexus Repository Manager 3 远程命令执行漏洞（CVE-2020-10199、CVE-2020-10204）

    [影响版本] Nexus Repository Manager OSS/Pro 3.x <= 3.21.1 poc地址 https://github.com/magicming200/CVE-2 ...

  5. Docker 安装与卸载

    Docker卸载与安装 卸载旧的版本 卸载 yum -y remove docker-ce docker-cli-io containerd.io rm -rf var /var/lib/docker ...

  6. 为什么大家都在用WebRTC？

    WebRTC代表网络实时通信.它是一种非常令人兴奋,强大且具有高度破坏性的尖端技术和标准.自从WebRTC诞生以来,80%的浏览器都开始支持它.有数据显示,2017年~2021年期间,WebRTC市场 ...

  7. 记录21.07.21 —— ES6基础

    学习目录 课件地址: ES6核心技术课件 1.let关键字 1.1 let与var的区别 ①let不能重复定义 ②块作用域的区别 ③变量声明之前let不能使用,var可以 ④ 课件代码 <htm ...

  8. AcWing 第11场周赛题解

    计算abc 首先 \(0<=a<=b<=c\) 会随机给出 \(a+b,a+c,b+c,a+b+c\)的值 因为\(a,b,c\)都为正整数,所以\(a+b+c\)一定为最大值 然后 ...

  9. k8s之Service详解-Service使用

    实验环境准备 在使用service之前,首先利用deployment创建出3个pod,注意要为pod设置app=nginx-pod的标签 创建deployment.yaml,内容如下 apiVersi ...

  10. 面试反杀「GitHub 热点速览 v.21.33」

    作者:HelloGitHub-小鱼干 作为一个应聘者,面试的时候经常会被面试官问:你有什么问题要问我吗?为了避免这种临时想不到问题的尴尬,reverse-interview-zh 会教你下反向操作,提 ...