含义:
移动设备(手机,平板)
webapp:在移动设备上的web应用(基于移动设备的浏览器)
原生app(native app):ios和android的应用
使用:
常用的:
chrome浏览器的手机模拟器:F12开发者工具,点击手机图标,调整手机机型,显示比例,显示设备像素比,模拟网速,模拟翻转
设备像素(css像素)
ios:375 X667 820X1180 414X896 768X1024
android:370X740 412X915 912X1368
常用单位:em,rem,vw,vh
视口:
布局视口:跟机型无关,永远是980px
视觉视口:跟屏幕大小有关
布局视口和视觉视口保持一致:meta vp
<meta name="viewport" content="width(布局视口)=device-width(视觉视口), initial-sca
缩放比例:initial-scale=1.0
<meta name="viewport" content="width=device-width, initial-scale=1.0">
常用单位:
常用单位:
em:(没有用)
1em=16px--默认 自身font-size的大小
(自身没有font-size属性,寻找父级有没有,直至查找到)
rem:(最常用)
1rem=16px--默认 html的font-siae大小
vw,vh
1 vw=1 viewport width=1%视口宽度
1 vh=1 viewport height=1%视口高度
vw,vh和%的区别:
% 相对父元素,
vw,vh 相对视口
移动端适配:
含义: 在不同尺寸的屏幕下,元素大小会做出相应的调整
rem适配:
1 屏幕大小改变时,html的font-size随着改变
2 设计图测量的尺寸单位是px,实际rem:手机屏幕/设计图宽度 * 100
100px=1rem
px 和rem切换插件:px to rem
// rem适配:
// 监听窗口改变:
window.addEventListener('resize',function(){
// 获取当前视口宽度:
let vw=document.documentElement.clientWidth;
// 获取html,并设置font-size
// document.documentElement.style.fontSize=vw/10+'px';
document.documentElement.style.fontSize=vw/750*100+'px';
})
// 缺陷:字体会过大或过小
// 解决:给body fot-size
flex布局(弹性盒布局):
pc端开发:如果需要兼容浏览器低版本,可以采用float布局,
如果不需要兼容浏览器低版本,可以采用float布局
移动端开发:采用flex布局
弹性盒布局使用后,子盒子不能使用float,clear,vertical-align
父级盒子属性:
display:flex
给父级弹性盒子,使子元素水平排列,里面的子元素为弹性项
flex-direction 主轴方向
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。
flex-wrap 换行
nowrap(默认):不换行
wrap:换行,第一行在上方
wrap-reverse:换行,第一行在下方
justify-content 主轴对齐方式
flex-start(默认值):左对齐
flex-end:右对齐
center: 居中---常用
space-between:两端对齐,项目之间的间隔都相等。----常用
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
align-items 侧轴对齐方式
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
.box{
width:500px;
height:200px;
background-color:green;
display: flex;
flex-direction: row;
flex-wrap:wrap;
justify-content: center;
align-items: center;
}
弹性项盒子属性:
order 排列顺序(默认0)
flex-grow 放大比例 (默认0)
flex-shrink 缩小比例(默认1)
flex-basis (默认auto)
flex-basis在弹性项不被压缩的时候有效
简写:flex:flex-grow, flex-shrink flex-basis
align-self 单个元素对齐方式(默认auto)
swiper插件:
常用于移动端网站的内容触摸滑动(轮播图)
1下载:
cdn
本地:网络,npm i swiper
2 引入
3 使用:
添加内容
var mySwiper = new Swiper ('.swiper', {
direction: 'horizontal', // 横向切换选项
loop: false, // 循环模式选项
autoplay:true, //自动播放
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
})
事件:
手指按下:touchstart
手指抬起:touchend
手指移动:touchmove
手指事件对象touchevent
1 touches:手指所在位置
2 target:触摸的目标
3 targetTouches:多指触摸
4 changedTouches 多指触摸
各种手势插件:hammer.js
click:
缺陷:300ms延迟问题
解决:
1 meta标签添加user-scalable=0------禁止缩放
2 FastClick库
let box= document.querySelector('.box');
box.onclick=function(){
console.log('点击');
}
box.addEventListener('touchstart',function(e) {
console.log(e);
console.log('按下');
})
zepto框架:
移动端开发框架:zepto
1 含义:一个轻量级的、针对现代高级浏览器的 JavaScript 工具库,它兼容 jQuery 的 API 。 如果你会用 jQuery,就已经会用 Zepto 。
2 下载: npm i zepto
3 模块:
默认:zepto,event,care,ajax,form,ie
常见问题:
禁用iPhone中字号调整
禁止缩放表单
取消链接高亮
移动端点击a链接出现蓝色背景问题解决
设置HTML5元素为块
真机测试:
使用:
1 安装node。js
2 npm install -g browser-sync
3
静态网站
browser-sync start --server --files "**/*.css, **/*.html"
动态网站:npm run serve
移动端开发技术:
1 html+css+js(zepto) 多页面应用(mpa)不利于模块化管理
ui框架:bootstrap(响应),jq22插件网
适合场景:页面少或者页面间重复重复结构不多
2 html+css+框架(vue cli) 单页面应用 切换快
ui框架:vant ui mint ui
适合场景:几乎任何h5页面
3 html+css+uni-app(vue为基础)
ui框架:uview,uni ui ,color ui
适合场景:几乎任何h5页面,跨端
css预处理器:(仅用于js开发模式)
vscode------ easy sass插件
使用:
1 创建一个scss为结尾的文件