移动端项目
移动端浏览器及内核分析
手机浏览器种类：
UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器， 搜狗手机浏览器，猎豹浏览器，其他杂牌浏览器。
国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自助 研发的内核，就像国内的手机操作系统都是基于Android修改的。
viewport
width:设置viewport的宽度（即之前所提及到的，浏览器的宽度），这里可以为 一个整数，又或者是字符串〃device-width〃。
initial-scale:页面初始的缩放值，为数字，可以是小数。
minimum-scale:允许用户的最小缩放值，为数字，可以是小数。
maximum-scale:允许用户的最大缩放值，为数字，可以是小数。
height:设置viewport的高度（我们一般不用）。
user-scalable:是否允许用户进行缩放，’ no’ 为不允许，’ yes’为允许我们把 这个标签设在head里面。
移动端布局解决方案
固定布局
在＜head＞里把viewport加好，跟pc端一样，设想整个网页的宽度为750px居中即可， 超出部分留白。
优点：思路沿用PC端，上手简单。
缺点：大屏幕手机及手机横屏时，两边是留白较大，且大屏幕手机下看起来页面会特 别小，操作的按钮也很小，用户体验较差。
流式布局
流动布局重点就是使用百分比来代替传统px，但是高度大都是用px来固定住，所以 在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一 样，优点是流动布局可以很好解决自适应需求，缺点是通过大量的百分比布局，会出现兼 容性的问题，且更适用于对横向拉伸的设计元素，设计的时候存在很多局限性。
响应式做法
根据目标用户的访问设备的主要类型做三种或四种布局。
每种布局有一个区间即可利用媒体查询@media,可以为不同分辨率的设备加载不同的 样式。这种方法的优点是可以相对精确的控制显示效果，但可能需要对同一个类书写不同 的样式会导致代码比较繁复，后期维护困难
rem 布局
rem是指相对于根元素的字体大小的单位，即根据html元素的font-size来计算大小。 比如说 html 的 font-size 大小为 100px, 一个 div 的 width 为 1rem，则 div 的 width大小为100px
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"><script>
function auto() {
//获取html宽度（设备宽度）
var deviceWidth = document.documentElement.clientWidth;
// 720可以根据实际设计宽度进行修改
if (deviceWidth > 720) {
deviceWidth = 720;
}
var fs = (deviceWidth * 100) / 720;
document.documentElement.style.fontSize = fs + "px";
}
window.onresize = function () {
auto();
}
</script>
vw + vh
vw 即 Viewport’s width 的简写，是 CSS3 规范中的视口单位，相对于视口的宽度，视口被均分为 100 单
位的 vw, 相对于视口的高度，视口被均分为 100 单 位的 vh。
750px设计稿 750px=100vw 1px = 0.1333333vw;
如果使用rem 预设1rem = 100px 100px就是 13.333333vw 由此vm和rem 就可以进行换算了
Media
@media (max-width: 768px) {
.banner {
margin-top: 44px;
background-color: blue;
height: 2.88rem;
width: 100%;
}
}
orientation: portrait;/*锁定为纵向*/
orientation: landscape;/* 锁定为横向*/
@media screen and (orientation: landscape) {
div {
width: 300px;
height: 300px;
background-color: red;
}
}
@media screen and (orientation: portrait) {
div {
width: 300px;
height: 300px;
background-color: blue;
}
}兼容问题
小字体处理
不同浏览器的最小字体不同，有的是10px，有的是12px。
解决办法：设置字体时，不要小于12px，如果一定要小于12px，使用
transform:scale()进行缩放。
移动端重置样式
1、禁止用户选中文字，安卓无效（在事件那章解决，包括长按的时候会出菜单，用阻止 touchstart 后的默认
行为搞定）。
-webkit-user-select: none;
2、禁止长按弹出系统菜单
-webkit-touch-callout: none;
3、去除 android 下 a/button/input 标签被点击时产生的边框 & 去除 ios 下 a 标签被点击时产生的半透明灰
色背景。
-webkit-tap-highlight-color: rgba(0,0,0,0);
4、切换横竖屏或者用户自己通过浏览器设置的话，可以改变字体的大小 ( 需要给 body 下的所有元素 )。
-webkit-text-size-adjust: 100%;
5、按钮在 ios 下都是圆角。
-webkit-appearance: none; //button 与 input 都会有个默认背景
border-radius: 0; //input 有个默认圆角