移动端入门
测试环境:
-
chrome 模拟器
-
360 模拟器
等各种模拟器, 模拟器只是模拟手机的尺寸大小,并没有模拟每个浏览器相应的特性以及兼容性
viewport视口(可视区窗口) --设置可视区大小以及缩放等等
手机端 默认不设置viewport ,一般可视区宽度在移动端是980px(所以相同尺寸的东西在移动端变小了)
可以为 viewport 设置一个属性,也可以设置多个属性,多属性用逗号间隔
属性设置有 :
1.width=:可视区的宽度 (number || device-width)
width = number 在安卓机中支持不好,
一般会写第二种写法:width = device-width 为设备的宽度
2.user-scalable (yes||no) 是否允许用户缩放
坑:IOS-10 系统 无效
3.initial-scale 初始缩放比例 大于1的数,放大的倍数; 小于1, 缩小的倍数
[其实并没有真的把所有元素的大小改变,只是改变的可视区的大小来达到 初始缩放的效果]
一般是:initial-scale = minmum-scale = maximum-scale设置为一样的
4.minimum-scale = 最小缩放比例
5.maximum-scale = 最大缩放比例
像素比 window.devicePixelRatio
- 只能获取不能设置
- 把一个像素放大至N个像素去显示,所以N = devicePixelRatio
- 1px放大成2px显示
- 100px放大成200px显示
- 320px放大成640Px显示
- 选图的时候,要乘以它的像素比,否则图片模糊,,
- 至少750px以上的设计图去切图
meta基础知识
常用meta 设置
<meta name="viewport" content="width = device-width,user-scalable = no" />
<meta name="x5-orientation" content="portrait" />
<!--x5 内核浏览器(qq 微信)下只能竖屏显示-->
<meta name="x5-fullscreen" content="true" />
<!-- x5内核浏览器下全屏显示,也就是 去掉地址栏和工具栏-->
<mata name = "screen-orientation" content="portrait | landscape" />
<!--UC强制竖屏或横屏显示-->
<meta name="full-screen" content="yes" />
<!-- uc全屏显示-->
<!--坑:苹果原生浏览器和安卓原生浏览器都没有办法设置全屏和强制竖屏显示-->
<meta name="format-detection" content="telephone = no, email = mo"/>
<!--碰到数字或者邮箱,移动端会点击识别,,,上面的写法会使得页面所有的数字和邮箱不被识别,,,可以手动为需要的数字或邮箱添加识别-->
<!-- 解决方法:
拨打电话和发邮件
<a href="tel:15188888888">请拨打电话:15188888888</a>
<a href="mailto:528226249@qq.com">请发送邮件</a>
-->
常见问题
清除移动端默认样式
- -webkit-text-size-adjust:100% 进制用户对字体进行缩放
body * {
-webkit-text-size-adjust: 100%;
/* 切换横竖屏时,或者用户设置了最大号字体,这条样式就规定了禁止用户对文字缩放*/
}
- -webkit-tap-highlight-color: transparent; 去除链接,按钮默认的高亮色
a,input,button{
/*点击的高亮颜色*/
-webkit-tap-highlight-color: transparent;
}
- -webkit-appearance: none; 清除按钮,input的圆角
input,button{
/*清除 真机 下的圆角*/
-webkit-appearance: none;
border-radius: none;
}
- -webkit-user-select:none; 禁止用户选中文字
p{
-webkit-user-select:none ; /* 禁止用户选中该文字 */
}
- font-family: helvetica;
移动设备都会有的,但是它是英文字体,,,中文的话,看用户手机上有什么字体了,或者用font-face
移动端问题
- font-boosting
当一段文字,容器没有设置height的时候,在某些情况下,在移动端会把字体放大
解决方法:
- 设置height
- 设置 max-height
- fixed 问题
- IOS 的body的overflow问题
移动端适配
方法:
-
百分比 适配
只能width用百分比,高度用定值,用处不是很大,需要配合别的东西来用
-
viewport 适配
scale 缩放倍数
自己设定一个理想宽度,让所有屏幕宽度都是理想宽度,把initial-scale minimum-scale maximum-scale设置为相同的值为 (屏幕实际宽度/理想宽度) -
rem 适配
box-sizing:border-box; 怪异盒模型
使得元素的width是从盒子border开始算的,这样有好处,就是不用量了width 再减去border ,padding了
rem 根据根节点的字体大小计算 r:root
根据设计图的宽度 算好一个好除的数
比如:设计图宽度750px,我们让html的rem是750/15 = 50px
那么把屏幕分成15份,一份是50px
再区测量每个元素的大小是,设置为(元素的宽度/50)rem就可以了
但是,每次计算很麻烦,所以用less(一种 动态 样式 语言.
LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。 )
来动态的计算每个元素的大小,最后通过"koala"换算
利用less来进行计算rem 就不用一直换算成多少的ren了
( function(){
var html = document.documentElement;
var hWidth = html.getBoundingClientRect().width;
html.style.fontsize = hWidth/15+'px';
console.log(hWidth);
} )();
less文件下声明变量:
移动端下的清除默认样式:
a,
input,
button {
-webkit-tap-highlight-color: transparent;
}
body {
margin: 0;
-webkit-user-select: none;
font-family: helvetica;
}
input,
button {
/*清除 真机 下的圆角*/
-webkit-appearance: none;
border-radius: none;
}
body * {
-webkit-text-size-adjust: 100%;
/* 切换横竖屏时,或者用户设置了 最大号字体,这条样式就规定了禁止用户对文字缩放*/
}
img{
vertical:top;
}
-
弹性盒模型
有新版的display:flex,也有的display:-webkit-box
但是,在移动端老版支持的好
对比着记忆
弹性盒模型 元素排列和主轴设置
/* 新版 弹性盒模型*/
display: flex;
/*设置主轴为水平方向*/
flex-direction: row; /*子元素超过父元素会自动地在下一排排列*/
/*设置主轴为垂直方向*/
flex-direction: column;
/*设置主轴方向为水平,元素排列为反序,子元素从父元素的右边开始排*/
flex-direction: row-reverse;
/*设置主轴方向为垂直,元素排列为反序*/
flex-direction: column-reverse;
/*老版弹性盒模型*/
display: -webkit-box;
/*设置主轴为水平方向*/
-webkit-box-orient: horizontal; /*子元素超过父元素的宽度并不会在第二排继续排列*/
/*设置主轴为垂直方向*/
-webkit-box-orient: vertical;
/*元素在主轴上排列为正序,两句样式结合使用*/
-webkit-box-direction: normal;
/*元素在主轴上排列为反序*/
-webkit-box-direction: reverse;
弹性盒模型在主轴上富裕空间管理,加给父级
/* 新版 弹性盒模型*/
display: flex;
justify-content: flex-start;/*元素在主轴开始位置,富裕空间在主轴结束位置*/
justify-content: flex-end;/*元素在主轴结束位置,富裕空间在主轴开始位置*/
justify-content: center; /*元素在主轴中间,富裕空间在主轴两侧*/
justify-content: space-between;/*富裕空间平均分配在每两个元素之间*/
justify-content: space-around; /*富裕空间平均分配到每个元素两侧*/
/*老版弹性盒模型*/
/*display: -webkit-box;*/
/*-webkit-box-pack主轴方向富裕空间管理*/
-webkit-box-pack: start; /*元素在主轴开始位置,富裕空间在主轴结束位置*/
-webkit-box-pack: center; /*元素在主轴中间,富裕空间在主轴两侧*/
-webkit-box-pack: end; /*元素在主轴结束位置,富裕空间在主轴开始位置*/
-webkit-box-pack: justify; /*富裕空间平均分配在每两个元素之间*/
弹性盒模型在侧轴上富裕空间管理,加给父级
新版:align-items:flex-star| flext-end|enter|baseline
旧版:-webkit-box-align:start|end|center
/*新版弹性盒模型*/
/*display: flex;*/
/*元素在侧轴开始位置，富裕空间在侧轴结束位置*/
/*align-items: flex-start;*/
/*元素在侧轴结束位置，富裕空间在侧轴开始位置*/
/*align-items: flex-end;*/
/*元素在侧轴中间位置，富裕空间在侧轴两侧*/
/*align-items: center;*/
/*根据侧轴方向上**文字**的基线对齐*/
/*align-items: baseline;*/
/*老版弹性盒模型*/
/*display: -webkit-box;*/
/*元素在侧轴开始位置，富裕空间在侧轴结束位置*/
/*-webkit-box-align: start;*/
/*元素在侧轴结束位置，富裕空间在侧轴开始位置*/
/*-webkit-box-align: end;*/
/*元素在侧轴中间位置，富裕空间
-webkit-box-align:center
定义盒子的弹性空间,写在子元素上
/*新版的*/
flex-grow: 1; /*子元素所占的比例*/
子元素的尺寸 = 盒子的尺寸*子元素的box-flex属性值/所有子元素的box-flex属性值的和
/*老版的*/
-webkit-box-flex:num;
定义盒子的顺序,写在子元素上
/**新版的/
order:num; /*数值越小,排序越靠前,可以是负值*/
/*旧版的*/
-webkit-box-ordinal-group: num; /*最小数值默认从1开始*/
移动端事件
移动端三大事件
-
手指按下: ontouchstart,不管有几根手指
-
手指滑动: touchmove —— 当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动
-
手指移开: ontouchend
移动端的点透问题:
当上层元素发生点击的时候,下层元素也有点击(或者焦点)特性,在300ms之后,如果上层元素消失或者隐藏,目标点就会"漂移"到下层元素身上,就会触发点击行为.
解决:
1.下层不要使用有点击(焦点)特性的元素 ,如:a input button标签
2.阻止pc事件,尽量不要用Pc的事件,要用移动端的事件 ev.preventDefault(); //阻止事件的默认行为
document.addEventListener('touchstart',function(ev){
ev.preventDefault();
})
3.手动给需要的元素添加移动端事件
移动端阻止Pc事件的优点:
1.IOS10下设置meta禁止用户缩放是不行的(使用阻止pc事件就可以在ios10下禁止用户缩放)
2.解决IOS10x下溢出隐藏的问题
3.禁止系统默认的滚动条消除橡皮筋效果
4.可以禁止长按选中文字,选中图片,弹出系统默认菜单
5.解决点透问题
6.也阻止了焦点元素的焦点行为,可以为该元素阻止事件冒泡,ev.stopPropagation();
就可以正常使用了