CSS_像素&视口&媒体查询（响应式布局）-蒲公英云

像素

像素:
-屏幕是由一个一个发光的小点构成，这一个个的小点就是像素
-分辨率: 1920 x 1080说的就是屏幕中小点的数量
-在前端开发中像素要分成两种情况讨论: CSS像素 和物理像素
-物理像素，上述所说的小点点就属于物理像素
-css像素，编写网页时，我们所用像素都是css像素
    -浏览器在显示网页时，需要将Css像素转换为物理像素然后再呈现
    -一个css像素最终由几个物理像素显示，由浏览器决定:
    -默认情况下在pc端，一个css像素等于一个物理像素

手机像素

在不同的屏幕，单位像素的大小是不同的，像素越小屏幕会越清晰
    24寸1920x1080
    i6 4.7寸750 x 1334
    智能手机的像素点远远小于计算机的像素点
问题:一个宽度为900px的网页在iphone6中要如何显示呢?
-默认情况下，移动端的网页都会将视口设置为980像素(css像素 )，以确保pc端网页可以在移动端正常访问，但是如果网页的宽度超过了980，移动端的浏览器会自动对网页缩放以完整显示网页
https://material.io/resources/devices/
所以基本大部分的pc端网站都可以在移动端中正常浏览，但是往往都不会有一个好的体验
为了解决这个问题，需要为移动端专门设置网页

视口

视口(viewport) 
视口就是屏幕中用来显示网页的区域
可以通过查看视口的大小，来观察cSsS像素和物理像素的比值
默认情况下:
    视口宽度1920px (CSS像素)
    1920px (物理像素)
    此时，css像素和物理像素的比是1:1
放大两倍的情况:
    视口宽度960px (CSS像素)
    1920px (物理像素)
    此时，css像素 和物理像素的比是1:2
-我们可以通过改变视口的大小，来改变CSS像素和物理像素的比值

完美视口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 设置视口大小 device-width完美视口-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        box1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <!-- 
移动端默认的视口大小是980px(css像素)，
    默认情况下，移动端的像素比就是980/移动端宽度 (980/750)
    如果我们直接在网页中编写移动端代码，这样在980的视口下，像素比是非常不好，
        导致网页中的内容非常非常的小 
    编写移动页面时，必须要确保有一个比较合理的像素比:
        1css像素对应2个物理像素
        1css像素对应3个物理像素
    -可以通过meta标签来设置视口大小
-->
    <div class="box1"></div>
</body>
</html>

vm

（在移动端开发时，就不能再使用px来进行布局了）
vw表示的是视口的宽度(viewport width)
100vw =一个视口的宽度
1vw = 1%视口宽度

vw这个单位永远相当于视口宽度进行计算
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box1 {
            width: 100vw;
            height: 100px;
            background-color: #bfa;
        }
    </style>
</head>
<body>
    <!-- 
不同的设备完美视口的大小是不一样的
    iphone6 -- 375
    iphone6plus -- 414
由于不同设备视口和像素比不同，所以同样的375个像素在不同的设备下意义是不一样，
    比如在iphone6中375就是全屏，而到了plus中375就会缺一块
所以在移动端开发时，就不能再使用px来进行布局了
vw表示的是视口的宽度(viewport width)
    100vw =一个视口的宽度
    1vw = 1%视口宽度
    vw这个单位永远相当于视口宽度进行计算
    设计图的宽度
        750px 1125px
    设计图
        750px
    使用vw作为单位
        100vw
    创建一个48px x 35px大小的元素
        100vw = 750px(设计图的像素)
100vw = 750px(设计图的像素) 0. 133333333333333vw = 1px
6.4vw = 48px(设计图像素)
4.667vw = 35px
     -->
    <div class="box1">
        aa
    </div>
</body>
</html>

vm适配

网页中字体大小最小是12px,不能设置一个比12像素还小的字体
如果我们设置了一个小于12px的字体，则字体自动设置为12

媒体查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*
    使用媒体查询
        语法: @media 查询规则{}
            媒体类型:
                all所有设备
                print打印设备
                screen带屏幕设备
                speech屏幕阅读器
                -可以使用,连接多个媒体类型，这样它们之间就是一个或的关系
            可以在媒体类型前添加一个only,表示只有。
                only的使用主要是为了兼容一些老版本浏 览器
    */
        /* @media print,screen {
        body{
            background-color: #bfa;
        }
    } */
        @media only print {
            body {
                background-color: #bfa;
            }
        }
    </style>
</head>
<body>
    <!-- 响应式布局
    -网页可以根据不通的设备或窗口大小呈现出不同的效果
    -使用响应式布局，可以使一个网页 适用于所有设备
    -响应布局的关键就是媒体查询
    -通过媒体查询，可以为不通的设备，或设备不同状态来分别设置样式 -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 媒体特性：
            width：视口的宽度
            height视口的高度
            min-width视口的最小宽度(视口大于指定宽度时生效)
            max-width视口的最大宽度(视口小于指定宽度时生效)*/
        /* @media (max-width: 500px) {
            body {
                background-color: #bfa;
            } */
        /*  样式切换的分界点称为断点
        一般使用的断点
        小于768超小屏幕max-width= 768px 
        大于768小屏幕min-width=768px 
        大于992中型屏幕min-width=992px 
        大于1200 大屏幕min-width=1200px */
        /* ,逗号表示或则 */
        @media (min-width: 500px),
        (max-width: 700px) {
            body {
                background-color: #bfa;
            }
            /* and表示且 */
            @media (min-width: 500px) and (max-width: 700px) {
                body {
                    background-color: #bfa;
                }
                /* only */
                @media only screen and (min-width: 500px),
                (max-width: 700px) {
                    body {
                        background-color: #bfa;
                    }
                    /* not 除了 */
                    @media not screen and (min-width: 500px),
                    (max-width: 700px) {
                        body {
                            background-color: #bfa;
                        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>