移动端适配

视口（viewport）

      - 视口就是屏幕中用来显示网页的区域
                  - 可以通过查看视口的大小，来观察CSS像素和物理像素的比值
                  - 默认情况下：
          视口宽度 1920px（CSS像素）
                          1920px（物理像素）
                          - 此时，css像素和物理像素的比是 1:1

• 放大两倍的情况：   视口宽度 960px（CSS像素）                   1920px（物理像素）

• 此时，css像素和物理像素的比是1:2      

  - 我们可以通过改变视口的大小，来改变CSS像素和物理像素的比值

视口比

https://material.io/resources/devices/

vw

表示的是视口的宽度（viewport width）

• 100vw = 一个视口的宽度

• 1vw = 1%视口宽度

vw这个单位永远相当于视口宽度进行计算

      设计图的宽度
          750px 1125px

      设计图
          750px  

      使用vw作为单位
          100vw

      创建一个 48px x 35px 大小的元素

      100vw = 750px(设计图的像素) 0.1333333333333333vw = 1px
      6.4vw = 48px(设计图像素)
      4.667vw = 35px

vw 适配

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

          0.1333333vw = 1px

          5.3333vw = 40px

rem       1 rem = 1 html的字体大小       1 rem = 40 px(设计图)

媒体查询

• 语法：@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;
            }
        }

像素：

• 屏幕是由一个一个发光的小点构成，这一个个的小点就是像素

• 分辨率：1920 x 1080 说的就是屏幕中小点的数量

• 在前端开发中像素要分成两种情况讨论：CSS像素 和 物理像素

  • 物理像素，上述所说的小点点就属于物理像素

  • CSS像素，编写网页时，我们所用像素都是CSS像素

    浏览器在显示网页时，需要将C SS像素转换为物理像素然后再呈现 一个css像素最终由几个物理像素显示，由浏览器决定：默认情况下在pc端，一个css像素 = 一个物理像素

• 设置视口大小 device-width表示设备的宽度（完美视口）

<meta name="viewport" content="width=device-width">

• 移动端默认的视口大小是980px(css像素)，

  • 默认情况下，移动端的像素比就是  980/移动端宽度  （980/750）如果我们直接在网页中编写移动端代码，这样在980的视口下，像素比是非常不好， 导致网页中的内容非常非常的小

  • 编写移动页面时，必须要确保有一个比较合理的像素比：    1css像素 对应 2个物理像素    1css像素 对应 3个物理像素

• 可以通过meta标签来设置视口大小

<meta name="viewport" content="width=device-width, initial-scale=1.0">