像素、视口、app端页面适配、响应式布局、媒体查询

本文链接：https://blog.csdn.net/Libra99WU/article/details/109706407

文章目录

前言
一、像素、视口
二、响应式布局

前言

一、像素、视口

 像素：
            - 屏幕是由一个一个发光的小点构成，这一个个的小点就是像素
            - 分辨率：1920 x 1080 说的就是屏幕中小点的数量
            - 在前端开发中像素要分成两种情况讨论：CSS像素 和 物理像素
            - 物理像素，上述所说的小点点就属于物理像素
            - CSS像素，编写网页时，我们所用像素都是CSS像素
                - 浏览器在显示网页时，需要将CSS像素转换为物理像素然后再呈现
                - 一个css像素最终由几个物理像素显示，由浏览器决定：
                    默认情况下在pc端，一个css像素 = 一个物理像素
 视口（viewport）
          - 视口就是屏幕中用来显示网页的区域
          - 可以通过查看视口的大小，来观察CSS像素和物理像素的比值
          - 默认情况下：
              视口宽度 1920px（CSS像素）
                      1920px（物理像素）
                      - 此时，css像素和物理像素的比是 1:1
          - 放大两倍的情况：
              视口宽度 960px（CSS像素）
                      1920px（物理像素）
                      - 此时，css像素和物理像素的比是1:2
          - 我们可以通过改变视口的大小，来改变CSS像素和物理像素的比值
移动端
       - 可以通过meta标签来设置视口大小
       - 每一款移动设备设计时，都会有一个最佳的像素比，
           一般我们只需要将像素比设置为该值即可得到一个最佳效果
           将像素比设置为最佳像素比的视口大小我们称其为完美视口
           将网页的视口设置为完美视口
           <meta name="viewport" content="width=device-width, initial-scale=1.0">
VW适配 rem
    vw 表示的是视口的宽度（viewport width）
        - 100vw = 一个视口的宽度
        - 1vw = 1%视口宽度
        vw这个单位永远相当于视口宽度进行计算
	rem
              - 1 rem = 1 html的字体大小
               - 1 rem = 40 px(设计图)

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 设置视口大小 device-width表示设备的宽度（完美视口）-->
    <!-- <meta name="viewport" content="width=device-width"> -->
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html{
            /* 
                网页中字体大小最小是12px，不能设置一个比12像素还小的字体
                    如果我们设置了一个小于12px的字体，则字体自动设置为12
                0.1333333vw = 1px
                5.3333vw = 40px
            */
            font-size: 5.3333vw;
        }
        .box1{
            /* 
                rem
                    - 1 rem = 1 html的字体大小
                    - 1 rem = 40 px(设计图)
            */
            width: 18.75rem;
            height: 0.875rem;
            background-color: #bfa;
        }
    </style>
</head>

二、响应式布局

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /*
         使用媒体查询 
            语法： @media 查询规则{}
                媒体类型：
                    all 所有设备
                    print 打印设备
                    screen 带屏幕的设备
                    speech 屏幕阅读器
                    - 可以使用,连接多个媒体类型，这样它们之间就是一个或的关系

                可以在媒体类型前添加一个only，表示只有。
                    only的使用主要是为了兼容一些老版本浏览器
         */
        /* @media print,screen{
            body{
                background-color: #bfa;
            }
        } */
        @media only screen {
            body{
                background-color: #bfa;
            }
        }
        /*
             媒体特性：
                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 only screen and (min-width: 500px) and (max-width:700px){
             body{
                background-color: #bfa;
             }
         }
    </style>
</head>
<body>
    <!-- 
        响应式布局
            - 网页可以根据不通的设备或窗口大小呈现出不同的效果
            - 使用响应式布局，可以使一个网页适用于所有设备
            - 响应布局的关键就是 媒体查询
            - 通过媒体查询，可以为不通的设备，或设备不同状态来分别设置样式
     -->
    
</body>