移动Web开发

最新推荐文章于 2024-06-01 10:22:24 发布

dj_ax

最新推荐文章于 2024-06-01 10:22:24 发布

阅读量239

点赞数

文章标签： web app

本文链接：https://blog.csdn.net/m0_58839921/article/details/118250104

版权

纯属个人易忘点的笔记，素材来源于知播渔江哥：www.it666.com，良心教师质量教师，有意向走前端全栈的快快点击网址开始学习吧

1. 前端开发常用单位-像素

什么是像素(Pixel)?

在前端开发中视口的水平方向和垂直方向是由很多小方格组成的, 一个小方格就是一个像素
例如div尺寸是100 x 100, 那么水平方向就占用100个小方格, 垂直方向就占用100个小方格

像素特点

不会随着视口大小的变化而变化

结论：像素是一个固定的单位(绝对单位)

2.前端开发常用单位-百分比

什么是百分比?

百分比是前端开发中的一个动态单位, 永远都是以当前元素的父元素作为参考进行计算
例如父元素宽高都是200px, 设置子元素宽高是50%, 那么子元素宽高就是100px

百分比特点

子元素宽度是参考父元素宽度计算的
子元素高度是参考父元素高度计算的
子元素padding无论是水平还是垂直方向都是参考父元素宽度计算的
子元素margin无论是水平还是垂直方向都是参考父元素宽度计算的
不能用百分比设置元素的border

结论: 百分比是一个动态的单位, 会随着父元素宽高的变化而变化(相对单位)

3.前端开发常用单位-em

什么是em?

em是前端开发中的一个动态单位, 是一个相对于元素字体大小的单位
例如font-size: 12px; ,那么1em就等于12px

em特点

当前元素设置了字体大小, 那么就相对于当前元素的字体大小
当前元素没有设置字体大小, 那么就相当于第一个设置字体大小的祖先元素的字体大小
如果当前元素和所有祖先元素都没有设置大小, 那么就相当于浏览器默认的字体大小

结论: em是一个动态的单位, 会随着参考元素字体大小的变化而变化(相对单位)

4.前端开发常用单位-rem

1.什么是rem?

rem就是root em, 和em是前端开发中的一个动态单位,
rem和em的区别在于, rem是一个相对于根元素字体大小的单位
例如根元素(html) font-size: 12px; ,那么1em就等于12px

2.rem特点

除了根元素以外, 其它祖先元素的字体大小不会影响rem尺寸
如果根元素设置了字体大小, 那么就相对于根元素的字体大小
如果根元素没有设置字体大小, 那么就相对于浏览器默认的字体大小

结论: rem是一个动态的单位, 会随着根元素字体大小的变化而变化(相对单位)

5.前端开发常用单位-vwvh

什么是vw(Viewport Width)和vh(Viewport Height)?

vw和vh是前端开发中的一个动态单位, 是一个相对于网页视口的单位
系统会将视口的宽度和高度分为100份,1vw就占用视口宽度的百分之一, 1vh就占用视口高度的百分之一
vw和vh和百分比不同的是, 百分比永远都是以父元素作为参考
而vw和vh永远都是以视口作为参考

结论: vw/vh是一个动态的单位, 会随着视口大小的变化而变化(相对单位)

什么是vmin和vmax?

vmin: vw和vh中较小的那个
vmax: vw和vh中较大的那个

使用场景: 保证移动开发中屏幕旋转之后尺寸不变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05-前端开发常用单位-vwvh</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 10vmin;
            height: 10vmax;
            background: red;
        }
    </style>
</head>
<body>
<div></div>
<script>
 
    console.log(window.innerWidth, window.innerHeight);
    let oDiv = document.querySelector("div");
    console.log(getComputedStyle(oDiv).width);
    console.log(getComputedStyle(oDiv).height);
</script>
</body>
</html>

在这里插入图片描述

6.前端开发-视口

什么是视口?

视口简单理解就是可视区域大小我们称之为视口
在PC端，视口大小就是浏览器窗口可视区域的大小
在移动端, 视口大小并不等于窗口大小, 移动端视口宽度被人为定义为了980

为什么是980而不是其他的值?

因为过去网页的版心都是980
乔老爷子为了能够让网页在移动端完美的展示, 所以将iOS手机视口的大小定义为了980
后来谷歌也觉得这是一个非常牛X的方案, 所以Android手机的视口也定义为了980

移动端自动将视口宽度设置为980带来的问题

虽然移动端自动将视口宽度设置为980之后让我们可以很完美的看到整个网页
但是由于移动端的物理尺寸(设备宽度)是远远小于视口宽度的
所以为了能够在较小的范围内看到视口中所有的内容, 那么就必须将内容缩小
(和前面讲解Canvas时讲解的viewbox一样, 近大远小原理)

如何保证在移动端不自动缩放网页的尺寸?

通过meta设置视口大小

width=device-width 设置视口宽度等于设备的宽度
initial-scale=1.0 初始缩放比例, 1不缩放
maximum-scale：允许用户缩放到的最大比例
minimum-scale：允许用户缩放到的最小比例
user-scalable：用户是否可以手动缩放

7.移动端常用适配方案一

@media screen and (min-width: 375px){
            
        }

通过媒体查询

媒体查询的方式可以说是我早期采用的布局方式，
它主要是通过查询设备的宽度来执行不同的css代码，最终达到界面的配置

媒体查询优势

简单, 哪里不对改哪里
调整屏幕宽度的时候不用刷新页面即可响应式展示
特别适合对移动短和PC维护同一套代码的时候

媒体查询劣势

由于移动端和PC端维护同一套代码, 所以代码量比较大，维护不方便
为了兼顾大屏幕或高清设备，会造成其他设备资源浪费，特别是加载图片资源
为了兼顾移动端和PC端各自响应式的展示效果，难免会损失各自特有的交互方式

应用场景

对于比较简单(界面不复杂)的网页, 诸如: 企业官网、宣传单页等
我们可以通过媒体查询、伸缩布局、Bootstrap来实现响应式站点

对于比较复杂(界面复杂)的网页, 诸如: 电商、团购等更多的则是才是PC端一套代码, 移动端一套代码

8.移动端常用适配方案-界面自动跳转

如何实现PC端一套代码,移动端一套代码,

在PC端打开自动打开PC端界面
在移动端打开自动打开移动端界面

实现步骤:

默认打开PC端界面
在PC端界面中通过BOM拿到当前浏览器信息
通过正则判断当前浏览器是否是移动端浏览器
通过BOM的location对象实现跳转到移动端界面

let userAgentInfo = navigator.userAgent;
console.log(userAgentInfo);

PC: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36
(KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36
移动端: Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372
Safari/604.1
移动端: Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Mobile
Safari/537.36
* */

function isPc() {
        let userAgentInfo = navigator.userAgent;
        if(/iphone/i.test(userAgentInfo)){
            return false;
        }else if(/android/i.test(userAgentInfo)){
            return false;
        }
        return true;
    }
    if(!isPc()){
        location.href = "http://m.jd.com";
    }

9.移动端常用适配方案二

1.通过媒体查询 + rem

虽然我们将移动端独立到一套代码中了, 但是由于移动端也有很多的屏幕尺寸, 所以也需要进行适配
例如:
iPhone3/4/5: 320px
iPhone678: 375px
iPhoneX/plus: 414px

当下在企业开发中设计师提供给我们的移动端设计图片是750xxx的或者1125xxx的
所以我们需要对设计师提供的图片进行等比缩放, 这样才能1:1还原设计图片

2.如何等比缩放?

2.1将设计图片等分为指定份数,求出每一份的大小
例如: 750设计图片分为7.5份, 那么每一份的大小就是100px
2.2将目标屏幕也等分为指定份数,求出每一份的大小
例如: 375屏幕也分为7.5份, 那么每一份的大小就是50px
2.3用原始元素尺寸 / 原始图片每一份大小 * 目标屏幕每一份大小 = 等比缩放后的尺寸
例如: 设计图片上有一个150150的图片, 我想等比缩放显示到375屏幕上
那么: 150 / 100 * 50 = 1.550 = 75px

3.如何在前端开发中应用这个计算公式?

3.1目标屏幕每一份的大小就是html的font-size: 50px
3.2使用时只需要用 “原始元素尺寸 / 原始图片每一份大小rem” 即可
150 / 100 = 1.5 / 1.5rem
1rem = 50px / 1.5rem === 1.5*50 = 75px

4.大公司应用实例

4.1网易新闻
750/100=7.5
375/7.5=50;
320/7.5=42.7;
4.2苏宁易购
750/50=15
375/15=25
320/15=21.33

小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10-移动端常用适配方案二-练习</title>
    <style type="text/less">
        *{
            margin: 0;
            padding: 0;
        }
        @media screen and (max-width: 320px){
            /*
            750 / 7.5 = 100
            320 / 7.5 = 42.67
            iphone5:
            */
            html{
                font-size: 42.67px;
            }
        }
        @media screen and (min-width: 375px){
            /*
            750 / 7.5 = 100
            375 / 7.5 = 50
            iphone6:
            */
            html{
                font-size: 50px;
            }
        }
        @media screen and (min-width: 414px){
            /*
            750 / 7.5 = 100
            414 / 7.5 = 50
            iphone6Plus:
            */
            html{
                font-size: 55.2px;
            }
        }
        .top{
            position: relative;
        }
        .top>img{
            width: 100%;
            height: auto;
        }
        .top>p{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 80/100rem;
            font-size: 36/100rem;
            color: #fff;
        }
        .middle, .bottom{
            position: relative;
            height: 290/100rem;
        }
        .main{
            border: 1px dashed #0d7efb;
            border-radius: 5/100rem;
            padding: 10/100rem;
            display: inline-block;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
        .main>img:nth-of-type(1){
            width: 410/100rem;
            height: 270/100rem;
            vertical-align: bottom;
        }
        .main>img:nth-of-type(2){
            width: 84/100rem;
            height: 84/100rem;
            vertical-align: bottom;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 60/100rem;
        }
        .bottom{
            margin-top: 35/100rem;
        }
    </style>
    <script src="js/less.js"></script>
</head>
<body>
<div class="top">
    <img src="images/bg.png" alt="">
    <p>实名认证</p>
</div>

<div class="middle">
    <div class="main">
        <img src="images/back.png" alt="">
        <img src="images/add.png" alt="">
    </div>
</div>

<div class="bottom">
    <div class="main">
        <img src="images/back.png" alt="">
        <img src="images/add.png" alt="">
    </div>
</div>

</body>
</html>

10.移动端常用适配方案三

通过JS动态计算当前屏幕每一份大小的好处: 不用写很多的媒体查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>11-移动端常用适配方案三</title>
    <script>
        /*
        注意点: 通过JS动态计算当前屏幕每一份大小的好处: 不用写很多的媒体查询
                坏处: 切换了屏幕尺寸之后需要刷新界面才有效
                      而媒体查询如果切换了屏幕的尺寸不需要重新刷新界面
        * */
        document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";
    </script>
    <style type="text/less">
        *{
            margin: 0;
            padding: 0;
        }
        /*
        1.计算设计图片每一份大小: 750 / 7.5 = 100px
        2.计算当前屏幕每一份大小: 当前屏幕宽度 / 和设计图相同的分数 = 当前屏幕每一份大小
        */
        /*
        @media screen and (max-width: 320px){
            html{
                font-size: 42.67px;
            }
        }
        @media screen and (min-width: 375px){
            html{
                font-size: 50px;
            }
        }
        @media screen and (min-width: 414px){
            html{
                font-size: 55.2px;
            }
        }
         */
        .top{
            position: relative;
        }
        .top>img{
            width: 100%;
            height: auto;
        }
        .top>p{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 80/100rem;
            font-size: 36/100rem;
            color: #fff;
        }
        .middle, .bottom{
            position: relative;
            height: 290/100rem;
        }
        .main{
            border: 1px dashed #0d7efb;
            border-radius: 5/100rem;
            padding: 10/100rem;
            display: inline-block;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
        .main>img:nth-of-type(1){
            width: 410/100rem;
            height: 270/100rem;
            vertical-align: bottom;
        }
        .main>img:nth-of-type(2){
            width: 84/100rem;
            height: 84/100rem;
            vertical-align: bottom;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 60/100rem;
        }
        .bottom{
            margin-top: 35/100rem;
        }
    </style>
    <script src="js/less.js"></script>
</head>
<body>
<div class="top">
    <img src="images/bg.png" alt="">
    <p>实名认证</p>
</div>

<div class="middle">
    <div class="main">
        <img src="images/back.png" alt="">
        <img src="images/add.png" alt="">
    </div>
</div>

<div class="bottom">
    <div class="main">
        <img src="images/back.png" alt="">
        <img src="images/add.png" alt="">
    </div>
</div>

</body>
</html>

11.设备像素和CSS像素

1.什么是设备像素和CSS像素?
1.1设备像素又称为物理像素, 是"物理屏幕"上真实存在的发光点，只有屏幕一经出厂就固定不会改变
1.2CSS像素又称为逻辑像素，是编程世界中虚拟的东西, 我们通过代码设置的像素都是逻辑像素
例如: iPhone3G/iPhone3GS 3.5英寸/ 逻辑像素320*480 / 设备像素320*480
     iPhone4/4S         3.5英寸/ 逻辑像素320*480 / 设备像素640*960
也就是说CSS像素和设备像素在有的时候是不一样的

3.什么时候不一样?为什么不一样?
3.1在PC端，1个CSS像素往往都是对应着电脑屏幕的1个物理像素,
所以我们无需关心PC端的CSS像素和设备像素

3.2在手机端，最开始其实1个CSS个像素也是对应着手机屏幕的1个物理像素,
但是后来一个改变世界的男人(乔布斯)改变了这一切~
从iPhone4开始，苹果公司推出了所谓的retina视网膜屏幕。
iPhone4的屏幕尺寸却没有变化，但是像素点却多了一倍
这就导致了在1个CSS个像素等于1个物理像素的手机上, 我们设置1个CSS像素只会占用1个物理像素
而在1个CSS个像素不等于1个物理像素的手机上, 我们设置1个CSS像素就会占用2个物理像素
所以仔细观察你会发现同样是1像素但是在retina视网膜屏幕的手机上会粗一些

https://segmentfault.com/a/1190000015736900
https://ask.csdn.net/questions/692608

在这里插入图片描述

12.移动端常用适配方案四（终极适配方案）

let scale = 1.0 / window.devicePixelRatio;
        let text = `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no">`;
        document.write(text);

        document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>13-移动端常用适配方案四</title>
    <script>
        /*
        1.如何解决设备像素和CSS像素不一样的问题?
        如果设备像素和CSS像素一样, 那么无需处理不会带来任何负面影响
        如果设备像素是CSS像素的2倍, 那么我们只需将CSS像素缩小一半即可
        但是有时候设备像素可能是CSS像素的3倍/4倍...

        2.获取设备像素比DPR(Device Pixel Ratio)
        DPR = 设备像素 / CSS像素
        iPhone3GS :  320 / 320 = 1
        iPhone4S:    640 / 320 = 2
        iPhone678:   750 / 375 = 2
        iPhoneX:     1125 / 375 = 3
        在JS中我们可以通过 window.devicePixelRatio 获取当前的设备像素

        3.如何缩小?
        通过 <meta name="viewport">的initial-scale属性来缩小
        注意点: 缩放视口后视口大小会发生变化
        * */
        // console.log(1.0 / window.devicePixelRatio); // 1 / 1 = 1;  1 / 2 = 0.5;
        let scale = 1.0 / window.devicePixelRatio;
        let text = `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no">`;
        document.write(text);

        document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";
    </script>
    <style type="text/less">
        *{
            margin: 0;
            padding: 0;
        }
        .top{
            position: relative;
        }
        .top>img{
            width: 100%;
            height: auto;
        }
        .top>p{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 80/100rem;
            font-size: 36/100rem;
            color: #fff;
        }
        .middle, .bottom{
            position: relative;
            height: 290/100rem;
        }
        .main{
            border: 1px dashed #0d7efb;
            border-radius: 5/100rem;
            padding: 10/100rem;
            display: inline-block;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
        .main>img:nth-of-type(1){
            width: 410/100rem;
            height: 270/100rem;
            vertical-align: bottom;
        }
        .main>img:nth-of-type(2){
            width: 84/100rem;
            height: 84/100rem;
            vertical-align: bottom;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 60/100rem;
        }
        .bottom{
            margin-top: 35/100rem;
        }
    </style>
    <script src="js/less.js"></script>
</head>
<body>
<div class="top">
    <img src="images/bg.png" alt="">
    <p>实名认证</p>
</div>

<div class="middle">
    <div class="main">
        <img src="images/back.png" alt="">
        <img src="images/add.png" alt="">
    </div>
</div>

<div class="bottom">
    <div class="main">
        <img src="images/back.png" alt="">
        <img src="images/add.png" alt="">
    </div>
</div>

</body>
</html>

注意点：之所以将CSS像素缩小一半后，视口大小不变，元素不受影响，是因为缩小之前，系统会将其扩大一倍，再缩小。

13.zepto.js库

1.什么是Zepto?

Zepto 是一个轻量级的针对现代高级浏览器的 JavaScript库，
它与jQuery有着类似的api, 如果你会用jQuery，那么你也会用Zepto

2.既然和jQuery差不多, 为什么还需要Zepto?

2.1jQuery更多是在PC端被应用，Zepto更多是在移动端被应用；
也正是因为jQuery用在PC端, 所以jQuery考虑了很多低级浏览器的的兼容性问题, ,所以代码更多体积更大；
也正是因为Zepto用在移动端, 所以Zepto则是直接抛弃了低级浏览器的适配问题 , 所以代码更少体积更小；
2.2综上所述: Zepto其实就是专门用于移动端的轻量级的jQuery

3.官方网址:

英文版：http://zeptojs.com/
中文版：http://www.css88.com/doc/zeptojs_api/

4.Zepto的特点

Zepto采用了模块化的开发, 将不同的功能放到了不同的模块中,
在使用的过程中我们可以按需导入, 也就是需要什么功能就导入什么模块

14.swiper.js库

1.什么是swiper?

Swiper是纯javascript打造的滑动特效插件，面向PC、平板电脑等移动终端。
Swiper能实现触屏焦点图、触屏Tab切换等常用效果。
Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！

2.如何使用:

2.1引入swiper对应的css和js文件
2.2按照框架的需求搭建三层结构
2.3创建一个Swiper对象, 将容器元素传递给它

3.官网：

https://www.swiper.com.cn/

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-swiper基本使用</title>
    <link rel="stylesheet" href="css/swiper.css">
    <script src="js/swiper.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .swiper-container{
            width: 400px;
            height: 300px;
            border: 1px solid #000;
            margin: 100px auto;
        }
        .swiper-container>ul{
            list-style: none;
        }
    </style>
</head>
<body>
<div class="swiper-container">
    <ul class="swiper-wrapper">
        <li class="swiper-slide">Slide 1</li>
        <li class="swiper-slide">Slide 2</li>
        <li class="swiper-slide">Slide 3</li>
    </ul>
</div>
<script>
    let mySwiper = new Swiper ('.swiper-container');
</script>
</body>
</html>

15.iScroll.js库

1.什么是iScroll?

iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件。
iScroll不仅仅是滚动。在你的项目中包含仅仅4kb大小的iScroll，能让你的项目便拥有滚动，缩放，平移，无限滚动，视差滚动，旋转功能

2.iScroll基本使用

2.1按照iScroll的规定搭建HTML结构
2.2引入iScroll
2.3创建iScroll对象, 告诉它谁需要滚动

3.iScroll的版本

针对iScroll的优化。为了达到更高的性能，iScroll分为了多个版本。你可以选择最适合你的版本。
3.1iscroll.js，这个版本是常规应用的脚本。它包含大多数常用的功能，有很高的性能和很小的体积。
3.2iscroll-lite.js，精简版本。它不支持快速跳跃，滚动条，鼠标滚轮，快捷键绑定。但如果你所需要的是滚动(特别是在移动平台) iScroll 精简版是又小又快的解决方案。
3.3iscroll-probe.js，探查当前滚动位置是一个要求很高的任务,这就是为什么我决定建立一个专门的版本。如果你需要知道滚动位置在任何给定的时间,这是iScroll给你的。（我正在做更多的测试,这可能最终在常规iscroll.js脚本，请留意）。
3.4iscroll-zoom.js，在标准滚动功能上增加缩放功能。
3.5iscroll-infinite.js，可以做无限缓存的滚动。处理很长的列表的元素为移动设备并非易事。 iScroll infinite版本使用缓存机制,允许你滚动一个潜在的无限数量的元素。

最佳结构：

<div id="wrapper">
    <ul>
        <li>...</li>
        <li>...</li>
        ...
    </ul>
</div>

官网：

http://caibaojian.com/iscroll-5/

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-iScroll基本使用</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            touch-action: none;
        }
        div{
            width: 100%;
            height: 300px;
            border: 1px solid #000;
            box-sizing: border-box;
            overflow: hidden;
        }
        dl>dt{
            line-height: 30px;
            text-align: center;
            border-bottom: 1px solid #000;
        }
    </style>
    <script src="js/iscroll.js"></script>
</head>
<body>
<div class="box">
    <dl>
        <dt>我是标题1</dt>
        <dt>我是标题2</dt>
        <dt>我是标题3</dt>
        <dt>我是标题4</dt>
        <dt>我是标题5</dt>
        <dt>我是标题6</dt>
        <dt>我是标题7</dt>
        <dt>我是标题8</dt>
        <dt>我是标题9</dt>
        <dt>我是标题10</dt>
        <dt>我是标题11</dt>
        <dt>我是标题12</dt>
        <dt>我是标题13</dt>
        <dt>我是标题14</dt>
        <dt>我是标题15</dt>
        <dt>我是标题16</dt>
        <dt>我是标题17</dt>
        <dt>我是标题18</dt>
        <dt>我是标题19</dt>
        <dt>我是标题20</dt>
        <dt>我是标题21</dt>
        <dt>我是标题22</dt>
        <dt>我是标题23</dt>
        <dt>我是标题24</dt>
        <dt>我是标题25</dt>
        <dt>我是标题26</dt>
        <dt>我是标题27</dt>
        <dt>我是标题28</dt>
        <dt>我是标题29</dt>
        <dt>我是标题30</dt>
    </dl>
</div>
<script>
    let myScroll = new IScroll('.box');
</script>
</body>
</html>

dj_ax

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动Web开发

纯属个人易忘点的笔记，素材来源于知播渔江哥：www.it666.com，良心教师质量教师，有意向走前端全栈的快快点击网址开始学习吧1. 前端开发常用单位-像素什么是像素(Pixel)?在前端开发中视口的水平方向和垂直方向是由很多小方格组成的, 一个小方格就是一个像素例如div尺寸是100 x 100, 那么水平方向就占用100个小方格, 垂直方向就占用100个小方格像素特点不会随着视口大小的变化而变化结论：像素是一个固定的单位(绝对单位)2.前端开发常用单位-百分比.
复制链接

扫一扫