跳到主要内容

屏幕适配

媒体查询​

媒体查询是一种提供给开发者针对不同设备需求进行定制化开发的一个接口。你可以根据设备的类型（比如屏幕设备、打印机设备）或者特定的特性（比如屏幕的宽度）来修改你的页面。

媒体查询的使用方式主要有三种：

  • 方式一：通过 @import使用不同的CSS规则【不再通过 <link>引入css】

    • 【@import可以用来引入css的样式，我们可以通过一定的限制来引入css做到不同的适配】

    • bgc.css：body{background-color:red;}

    • test.html：

    • <style>
          /* 当我们的宽度小于800px的时候就背景变成红色 */
          @import:url('bgc.css')(max-width:800px);
      </style>

  • 方式二：通过link引入：<link ref="stylesheet" ref="bgc.css" media="(max-width:800px)">

  • 方式三： 使用media属性为<style>，<link>，<source>和其他HTML元素指定特定的媒体类型【常用】

    • 语法：@media (语法){}【eg：@media (max-width:800px){body:{background-color:red;}】

其中我们最常见的就是 @media：

在使用媒体查询时，你必须指定要使用的媒体类型。媒体类型是可选的，并且会（隐式地）应用all类型。

常见的媒体类型值如下:

  • all：适用于所有设备。【当你不写的时候就默认为all】
  • print：适用于在打印预览模式下在屏幕上查看的分页材料和文档。
  • screen(掌握)：主要用于屏幕。
  • speech：主要用于语音合成器。

视口viewport​

PC端

  • 在一个浏览器中，我们可以看到的区域就是视口(viewport)
  • 我们说过看到的区域就是视口(viewport) fixed就是相对于视口来进行定位的
  • 在PC端的页面中，我们是不需要对视口进行区分，因为我们的布局视口和视觉视口是同一个

移动端

  • 在移动端，不太一样，你布局的视口和你可见的视口是不太一样的
  • 这是因为移动端的网页窗口往往比较小，我们可能会希望一个大的网页在移动端可以完整的显示
  • 所以在默认情况下，移动端的布局视口是大于视觉视口的
  • 在移动端，我们可以将视口划分为三种情况
    • 布局视口(layout viewport)
      • 默认情况下，一个在PC端的网页在移动端会如何显示呢
        • 第一，它会按照宽度为980px来布局一个页面的盒子和内容
        • 第二，为了显示可以完整的显示在页面中，对整个页面进行缩小
      • 我们相对于980px布局的这个视口，称之为布局视口(layoutviewport) 【布局视口的默认宽度是980px】
    • 视觉视口(visual layout)
      • 如果默认情况下，我们按照980px显示内容，那么右侧有一部分区域就会无法显示，所以手机端浏览器会默认对页面进行缩放以显示到用户的可见区域中
      • 那么显示在可见区域的这个视口，就是视觉视口(visual viewport)
    • 理想视口(ideal layout)：将布局视口设置为视觉视口就是理想视口

移动端适配​

两个概念​

  • 自适应：根据不同的设备屏幕大小来自动调整尺寸、大小
  • 响应式：会随着屏幕的实时变动而自动调整，是一种自适应

移动端的屏幕尺寸通常是非常繁多的，很多时候我们希望在不同的屏幕尺寸上显示不同的大小。这个时候，我们可能可以想到一些方案来处理尺寸：

  • 方案一：百分比设置【因为不同属性的百分比值，相对的可能是不同参照物，所以百分比往往很难统一，所以百分比在移动端适配中使用是非常少的】
  • 方案二：rem单位+动态html的font-size
  • 方案三：vw单位
  • 方案四：flex的弹性布局

rem单位+动态html的font-size​

rem单位是相对于html元素的font-size来设置的，那么如果我们需要在不同的屏幕下有不同的尺寸，可以动态的修改html的font-size尺寸。

这样在开发中，我们只需要考虑两个问题：

  • 问题一：针对不同的屏幕，设置html不同的font-size
  • 问题二：将原来要设置的尺寸，转化成rem单位

解决方案：

  • 方案一：媒体查询

    • 可以通过媒体查询来设置不同尺寸范围内的屏幕html的font-size尺寸
    • 缺点:
      • 我们需要针对不同的屏幕编写大量的媒体查询
      • 如果动态改变尺寸，不会实时的进行更新

  • 方案二：js动态计算

    • 如果希望实时改变屏幕尺寸时，font-size也可以实时更改，可以通过js代码

    • 方法：

      • 根据html的宽度计算出font-size的大小，并且设置到html上

      • 监听页面的实时改变，并且重新设置font-size的大小到html上

      • //获取html元素
        const htmlEl = document.documentElement

        function setRemUnit(){
            //获取html宽度（视口的宽度）
            const htmlWidth = htmlEl.clientWidth
            // 计算font-size的一个值大小
            const htmlFontSize = htmlWidth / 10
            // 动态的给font-size赋值
            htmlEl.style.fontSize = htmlFontSize + 'px'
        }

        //在我们刚进入页面的时候执行一次
        setRemUnit()

        //当尺寸发生变化的时候修改font-size的值
        window.addEventListener("resize",setRemUnit)

  • 方案三：lib-flexible库

vw单位​

100vw就是屏幕的宽度

rem事实上是作为一种过渡的方案，它利用的也是vw的思想：

  • 前面不管是我们自己编写的js，还是flexible的源码
  • 都是将1rem等同于设计稿的1/10，在利用1rem计算相对于整个屏幕的尺寸大小
  • 那么我们来思考，1vw不是刚好等于屏幕的1/100吗
  • 而且相对于rem还更加有优势【可以设置当屏幕大小大于一定的值的时候font-size不在改变】

vw相比于rem的优势：

  • 优势一：不需要去计算html的font-size大小，也不需要给html设置这样一个font-size
  • 优势二：不会因为设置html的font-size大小，而必须给body再设置一个font-size，防止继承
  • 优势三∶因为不依赖font-size的尺寸，所以不用担心某些原因html的font-size尺寸被篡改，页面尺寸混乱
  • 优势四：vw相比于rem更加语义化，1vw刚才是1/100的viewport的大小
  • 优势五：可以具备rem之前所有的优点