CSS Day13-轮播图&Day14-移动端

最新推荐文章于 2024-03-25 20:43:10 发布

2301_76534754

最新推荐文章于 2024-03-25 20:43:10 发布

阅读量1k

点赞数 32

文章标签： css 前端

本文链接：https://blog.csdn.net/2301_76534754/article/details/135927256

版权

13.1 轮播图网站

Swiper演示 - Swiper中文网

---------------------------------------------------------------------------------------------------------------------------------

14.1 前言

移动端开发目前主要包括三类：

原生App开发（iOS、Android、RN、uniapp、Flutter等）

小程序开发（原生小程序、uniapp、Taro等）

Web页面（移动端的Web页面，可以使用浏览器或者webview浏览）

两个概念：

自适应：根据不同的设备屏幕大小来自动调整尺寸、大小

响应式：会随着屏幕的实时变动而自动调整，是一种自适应

14.2 视口-viewport

在一个浏览器中，我们可以看到的区域就是视口（viewport），在PC端的页面中，是不需要对视口进行区分的，因为布局视口和视觉视口是同一个；在移动端，布局的视口和可见的视口是不太一样的，因为移动端的网页窗口往往比较小，我们可能会希望一个大的网页在移动端可以完整的显示，所以在默认情况下，移动端的布局视口是大于视觉视口的

布局视口

视觉视口

理想视口

设置视口

14.3 移动端适配方案

14.3.1 常见方案

方案1：百分比设置

因为不同属性的百分比值，相对的可能是不同参照物，所以百分比往往很难统一，所以百分比在移动端适配中使用是非常少的

方案2：rem单位 + 动态html的font-size

方案3：vw单位

方案4：flex的弹性布局

14.3.2 rem 和动态html的font-size

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

在了解媒体查询之前先看一下媒体查询有哪些属性？

值	说明
all	检测所有设备
screen	检测电子屏幕例如：电脑手机平板屏幕
print	检测打印机

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 400px;
            background-color: salmon;
        }
        /* 打印机测试 */
        /* @media print{
            .box{
                color: aqua;
            }
        } */
        /* 所有设备测试 */
        /* @media all{
            .box{
                color: blue;
            }
        } */

        /* 屏幕测试 */
        @media screen {
            .box{
                color: blueviolet;
            }
        }
    </style>
</head>

<body>
    <div class="box">移动端测试</div>
</body>

</html>

媒体查询运算符

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 768px;
            height: 768px;
        }

        /* and 且运算符 */
        /* @media screen and (min-width:700px) and (max-width:800px) {
            .box {
                background-color: skyblue;
            }
        } */

        /* or 或运算符 or前后要有空格才能生效    这个是小于700或者大于800才会生效 */
        /* @media (max-width:700px) or (min-width:800px){
            .box{
                background-color: salmon;
            }
        } */

        /* 超小屏幕 768px */
        @media screen and (max-width:768px) {
            .box {
                background-color: sandybrown;
            }
        }

        /* 中等屏幕 768px-992px */
        @media screen and (min-width:768px) and (max-width:992px) {
            .box {
                background-color: seagreen;
            }
        }

        /* 大屏幕 992px-1200px */
        @media screen and (min-width:992px) and (max-width:1200px) {
            .box {
                background-color: red;
            }
        }
        /* 超大屏幕 1200px */
        @media screen and (min-width:1200px) {
            .box {
                background-color: slateblue;
            }
        }
    </style>
</head>

<body>
    <div class="box">媒体查询</div>
</body>

</html>

针对不同屏幕，设置html不同的font-size

方案一：媒体查询

通过媒体查询来设置不同尺寸范围内的屏幕html的font-size尺寸

缺点：

我们需要针对不同的屏幕编写大量的媒体查询

如果动态改变尺寸，不会实时的进行更新

@media screen and (min-width: 320px) {
  html {
    font-size: 20px;
  }
}

@media screen and (min-width: 375px) {
  html {
    font-size: 24px;
  }
}

@media screen and (min-width: 414px) {
  html {
    font-size: 28px;
  }
}

@media screen and (min-width: 480px) {
  html {
    font-size: 32px;
  }
}

.box {
  width: 5rem;
  height: 5rem;
  background-color: orange;
}

方案二：lib-flexible库，直接通过 <script> 引入flexible.js(重点1)，这个是手机淘宝团队开发的一个用来适配移动端的js库

特点：根据不同的视口宽度给网页中html根节点设置不同的font-szie,自动设置为视口宽度的十分之一

将原来要设置的尺寸，转化成rem单位

方案一：手动换算
- 比如有一个在375px屏幕上，100px宽度和高度的盒子，要将100px转成对应的rem值， 100/37.5=2.6667rem，其他也是相同的方法计算即可
方案二：VSCode插件
- px to rem 的插件，在编写时自动转化（重点2）

14.4 vw和vh

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

前面不管是我们自己编写的js，还是flexible的源码，都是将1rem等同于设计稿的1/10，在利用1rem计算相对于整个屏幕的尺寸大小，而1vw刚好等于屏幕的1/100

 .box {
            width: 10vw;
            height: 20vw;
            background-color: red;
        }

    <!-- vw:是根据视口宽度的百分之一设置 1vw=视口宽度的百分之一 -->
    <div class="box">

    </div>
vh

 .box {
            width: 20vh;
            height: 30vh;
            background-color: red;
        }
    </style>
</head>

<body>
    <!-- vh:是根据视口高度的百分之一设置 1vh=视口高度的百分之一 -->
    <div class="box">

    </div>