媒体查询
@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 //回调函数,返回验证是否通过的布尔值;