移动端&&自定义组件

2024-03-18 19:42:28

文章目录

媒体查询


@media screen and(max-width) and (...){
    //定义一个媒体查询;(css板)
}

 screen：指的是pc 自能手机 ipad等这些设备 

link  方式定义媒体查询;  在css中添加这个字段，就可以在另一个页面完成媒体查询;
     
media="screen and (min-width:1200px) and (max-width:1920px)”

max-width:767px   //手机设备;

min-widht: 767px;  max-width: 992px;   //平板

min-width:992px   max-widht: 1200px;  //中型屏幕;

min-widht :1200px      //电脑设备;

viewport


<meta>   //元素可提供有关页面的元信息;

viewport  //设置窗口  只是针对移动端进行设置，对pc无效

width=device-width   //页面的可视区域的大小为设备的宽度

initial-scale=1.0   //初始大小比例;

pt、px、em、rem、vh、vw、vmax、vmin、rpx、ch


pt   绝对单位 相当于 1pt＝1/72英寸，常用于印刷当中;

px   像素，屏幕的分辨路，无论用户怎么放大缩小,都不会改变,

em  相对于父元素字体大小的倍数;

rem  相对于根元素字体大小的倍数;

vw   相对于可视窗口宽度的百分比 ；

vh  相对于可视窗口高度的百分比;

vmax  vw和vh取最大的一个；

vmin  vw和vh取最小的一个；

rpx   微信小程序中的css尺寸单位;rpx可以根据屏幕宽度自适应;

ch   表示 0 字的宽度；

ex  当前字体的x-height或者一个em的一半”。给定的字体的x-height是指那个字体的小写x的高度;

移动端适配

一般美工没出的设计搞的宽度是750px
开发的时候采用的是iphone的尺寸,是375px;
而这个高清像素，是一个像素点占了2个像素点;

1 css进行移动端适配;

在根目录设置font-size为相应比例的vw单位，所有子类进行rem操作; 一般设置为13.33vw 所有子类进行/100转化成rem单位;

font-size 实际屏幕宽度/设计稿宽度*100 vw;

2通过js进行移动端进行适配;

于css相类似，不过代码要写进resize事件里面了 resize事件，当页面进行缩放，执行此次函数；

移动端事件; 移动端事件，点击之后执行优先级为，先执行touchstart事件，在执行touchend事件，最后执行点击事件.因为在移动端,

click事件有300 ms 的延迟,因为这个特点，就会导致点透问题，（点透是指点击穿透，上层touchend事件，点击会立即消失，而浏览器此时并不会立刻去是否执行，

而是等待300ms 判断用户是否会双击，这时上层的触摸事件已经结束，然后就会触发下层的点击事件）;

touch事件 //触摸事件;(立刻执行)

e.targetTouches //返回所有触摸事件的点;

click事件 //点击事件(延迟300ms);

解决办法

1 禁止用户进行缩放功能,(不推荐，因为缩放已经成为了系统功能);

2 使用FastClick 轻量级库解决 fastclick 是专门解决300ms 延迟的一个轻量级的库，

fastclick会检测touch事件，通过dom自定义一个事件，模拟click事件，然后阻止原先300ms的事件执行;

https://cdn.bootcdn.net/ajax/libs/fastclick/1.0.6/fastclick.js

3 使用tap.js 插件阻止300ms事件发生通过touchend来阻止默认事件发生;

自定义组件 (适用于创建多个相同的标签和事件);

实现方法

 class UserCard extends HTMLElement{
            constructor(){
                super()

                // 需要自己组件的标签结构和样式
                var image = document.createElement("img")
                image.src="1.png" 
                image.classList.add("img")

                var container = document.createElement("div")
                container.classList.add("d1")

                var name = document.createElement("p")
                name.classList.add("name")
                name.innerText = "张三"

                var email = document.createElement("p")
                email.classList.add('email')
                email.innerText = "123.@.com"

                var button = document.createElement("button")
                button.innerText = "Fellow Me"
                button.classList.add('button')
                

                container.append(name,email,button)
                this.append(image,container)
            }
        }
        // customElements:自定义组件
        // define 定义，
        // 告诉浏览器解析user-card 与UserCard进行关联
        // 可以使用user-card 在body使用
        window.customElements.define('user-card',UserCard)

通过 calss 关键字创建并继承 HTMLElement;

在constructor()构造器里面填写要添加的标签和属性;（不要忘了写super() )；

最后在所有创建的标签添加到this里面;

在class 类外面添加下面这据代码;

window.customElements.define(‘标签名’,对象名);

customElements //自定义组件;

可以使用标签名了在body使用;

另一种写法

class UserCard extends HTMLElement{
        constructor(){
            super()
             var tem = document.querySelector("#usercard")
            //  tem.content.cloneNode(true) 复制template标签所有的节点，包含节点属性，true的就是把节点的属性也都克隆了
             var content = tem.content.cloneNode(true)
             this.append(content)

        }
    }
    window.customElements.define("user-card",UserCard)

html

   <template id="usercard">
        <img src="1.png" alt="" class="i1">
        <div id="container">
            <p class="name">张三</p>
            <p class="email">邮箱</p>
            <p class="fellow">Fellow Me</p>
            <button>点击</button>
        </div>
    </template>

利用template 在页面中不会显示的原理，再通过代码获取它的content内容，在克隆一份添加到this中，这种形式可以减少创建标签的繁琐;

移动端验证滑块插件;


插件底层对象:FtSlider;

var slider = new FtSlider({});

通过配置实例化对象,来进行移动端的滑块验证;

id   //要进行滑块验证的元素; 一般使用slider

width   //滑块的宽度;

height   //滑块的高度;

textMsg   //滑块里面的提示内容;

successMsg  //成功之后的提示内容;

callback   //回调函数，返回验证是否通过的布尔值;

码农公寓