移动端基础

移动端浏览器主要是 webkit 内核

viewport 视口 手动添加 meta 标签

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
// 宽度等于设备的宽度  限制用户缩放  初始比例缩放  最大缩放  最小缩放

PC 端 1px 为 1 物理像素

移动端每种设备物理像素比不一样，在 iPhone8 内是两倍

通常会使用倍图来设计，具体几倍看公司的需求，准备一个比样式图大几倍的图片，通常为二倍图

背景图大小通过 background-size 设定，除了像素之外还有 cover，将整个盒子盖住，contain，将宽度或高度适应盒子，含有空白区域

常见移动端布局

移动端初始化样式推荐使用mormalize.css

清除高亮：-webkit-tap-highlight-cokor:transparent 设置为透明

给输入框定义样式-webkit-appearance:none

禁止长按弹出菜单：img,a{-webkit-touch-callout：none}

流式布局（百分比布局）

将宽度设置为百分比，随着屏幕宽度变化

设置最大和最小宽度，保证内容在合理范围

一般最小设置为 320px

二倍精灵图先缩放为一半，然后测量图片位置，最后将 background-size 将整张图缩小一半

flex 弹性布局

父盒子设置 flex 后，子盒子的 float、clear 和 align 都将失效，通过给父元素设置 flex 属性来控制子盒子的排列方式和位置

固定定位和父元素无关，它以屏幕为准

常用属性

flex-direction 设置主轴方向 默认为 row 即 x 轴

row x 轴 row-reverse 翻转 x 轴 column 为 y 轴 column-reverse 翻转 y 轴

justify-content 设置主轴上的排列方式（先确定主轴的方向） 默认为 flex-start 从左到右

flex-end 从右到左

center 居中对齐

space-around 平均分配空间

space-between 先两边贴边再平分剩余空间

flex-wrap 设置子元素是否换行

nowrap 默认不换行，如果放不下会强行缩小子元素的宽度

wrap，设置换行

align-items 设置侧轴的排列方式（单行）

flex-start 上部

center 居中

flex-end 底部

stretch 拉伸

align-content 设置多行的排列方式，前提是先换行，单行无效果

flex-start 整体从头对齐

center 整体居中

flex-end 从尾对齐

space-around 平分空间

space-between 两边贴边，其余平分

stretch 拉伸

less+rem+媒体查询布局

rem

em 是缩进用的，相对于父元素的字体大小

而 rem 是相对于 html 的字体大小，如果将 html 的字体设置为 12px,2rem 则为 24px

媒体查询

@media 可以针对不同的屏幕尺寸设置不同的样式

@media screen and （max-width：800px）{}在最大屏幕宽度是即小于 800px 时使用这个样式，也可将 max 改为 min

screen 可替换为 all

@media screen and (max-width: 300px) {
  body {
  　　 background-color:lightblue;
  }
}

可以直接在 link 引入 css 时判断屏幕尺寸从而引入不同的 css

less

less 是一种 css 扩展语言 还有 sass、stylus 皆为 css 预处理语言

less 需要编译为 css 文件才能被 html 使用，使用 ease less 插件可自动转换

less 变量

@变量名：值；@a: 100px 大小写敏感且不能以数字开头

之后调用变量名即可

less 嵌套

less 嵌套将子元素样式直接写在父元素里面

可用+ - * / 进行运算，除法要加括号才能运算，符号左右要有空格

如果两个数只有一个有单位则结果就是那个单位，如果有两个单位则以第一个值的单位为准

flexible.js

不需要写媒体查询，引用 js 来计算

csstorem 插件

cssrem 可以将 px 装换为 rem

在使用之前要先设置 cssrootfont（默认为 16px）改为设计稿大小

响应式布局

原理是通过媒体查询来适配不同设备，响应式布局通过父级元素改变来控制子元素排列（即 container 类，container-fluid 为流式布局）基于 Twitter，react 是基于 facebook 的

超小屏幕：小于 768px 宽度 100%

小屏平板：768-992 宽度 750px

中等屏幕：992-1200 宽度 970px

大屏幕：1200+ 宽度 1170px

bootstrap 框架 点击可直接查看文档

栅格

将页面划分为等宽的列，无论系统屏幕多宽都会划分为 12 列，它不是栅格整个页面，而是栅格 container

要栅格需要添加类前缀，后面跟份数

最小的.col-xs-

小屏.col-sm-

中等 .col-md-

大屏.col-lg-

如果刚好等于 12 则占一行，小于有留白，多余的则那部分另起一行

每一列默认有 15px 的 padding

可以写多类名，col-lg-3，col-md-4，这样同时给类名可以在不同屏幕尺寸展示不同的列数

bootstrap 嵌套

可以再 bootstrap 里面进行再嵌套，将子类分为 12 等份，嵌套前需要再加一个 row，可以清除默认的 padding 值，还能将高度改为和父元素一样高

列偏移

.col-md-offset-可以进行偏移，将偏移的数字写在后面即可，本质是加左边的 margin 值

列排序

.col-md-push- 向右推

.col-md-pull- 向左拉

响应式

通过设置 hidden 隐藏部分列与之相反的为 visible

.hidden-xs 隐藏最小屏

.hidden-sm 隐藏小屏

.hidden-md 隐藏中屏

.hidden-lg 隐藏大屏

bootstrap 内有清除浮动，改颜色，标题等，可以直接去调用样式

vw vh 布局

vw,vh 是相对单位，就可以不用媒体查询

vw：viewport width 1vw=1/100 视口宽度，即浏览器窗口为 1000px 时，1vw=10px

vh：viewport height 1vw=1/100 视口高度

和百分比的区别是，百分比是相对父元素的，vw、vh 则是对于视口单位

开发中比较多用 vw，（vh 较少用，因为要按宽度进行比例缩放）

插件 px2vw

事件

touch 触摸事件

touchstart 开始触摸

tuochmove 拖动触摸

touchend 触摸离开

touches 正在触摸屏幕的所有手指

targetTouches 正在触摸当前 dom 元素的所有手指(最常用)targetTouches[0]可以获取触摸的第一个手指的相关信息，手指坐标等

changedTouches 手指状态发生改变的列表，从无到有，从有到无

在进行手指移动时要阻止屏幕滚动，e.preventDefault()

移动端让盒子移动直接用 translate

无缝滚动使用监听过度完成的事件 transitionend

手指离开要开启定时器，但开启前要清除定时器，当需要进行触摸移动时记得阻止屏幕移动

移动端 click 事件会有 300ms 的延迟，因为双击缩放页面

技巧

窗口等比例缩放

const designWidth = 375
const scale = document.documentElement.clientWidth/designWidth
let viewport = document.querySelector('meta[name='viewport']')
let content = 'width=device-width' + ',initial-scale=' + scale + ',minimum-scale=' + scale +
',maximum-scale=' + scale + ',user-scalable=no'
viewport.setAttribute('content', content)

其他

尽量不要使用 12px 及以下的图片或字体，否则可能出现图片或文字在安卓和 IOS 不同

多个 image 之间可能有缝隙解决方法

1、将 Image 设置为块级元素：display:block;。这将使得 vertical-align 属性失效，因为它不适用于块级元素，且会导致图片独占一行，文字会跑到下面一行。

2、更改 Image 的 vertical-align 属性：vertical-align:bottom; 或者其他值，如 top、middle 等。

3、修改父元素的 line-height 值。图片下面的空隙高度，实际上是文字计算后的行高值和字母 x 下边缘的距离。

4、紧挨着写：将所有的 <img> 标签写在一行，不要有换行或空格。

5、设置父对象的文字大小为 0px：这样可以消除图片之间的间隙，但是这种方法的缺点是父对象不能有文字。

6、设置图片的浮动属性：可以配合 overflow: hidden; 使用，创建一个 BFC 环境。

7、设置负边距：给每一张图片加一个 -1 的 margin。