学习回顾No.6

移动WEB开发

视口（viewport）

1. 布局视口
2. 视觉视口
3. 理想视口

meta视口标签

• width => 设viewport宽度
• initial-scale => 初始缩放比
• maximum-scale => 最大
• minimum-scale => 最小
• user-scalable => 用户是否可缩放，yes或no（1或0）

物理像素&物理像素比

• Retina(视网膜屏幕) 使移动端和PC端像素不一一对应
• 多倍图 => 先放大再缩小

背景图片缩放

• background-size:width,height;(写%,相对父盒子)/cover/contain

单独制作移动端页面（主流） 响应式页面（其次）

移动端CSS初始化推荐使用normalize.css

http://necolas.github.io/normalize.css/

设置box-sizing

• border-box => padding和border不会撑大盒子了
• content-box => 传统模型

清除高亮

• -webkit-tap-highlight-color:transparent;

ios去掉外观

• -webkit-appearance:none;

禁用长按页面时的弹出菜单

• img,a{-webkit-touch-callout:none;}

单独制作移动端页面（主流）

• 流式布局（百分比布局）
• flex弹性布局（强烈推荐）
• less+rem+媒体查询布局
• 混合布局

响应式页面兼容移动端（其次）

• 媒体查询
• bootstarp

流式布局（百分比布局）

• 非固定像素布局
• max-width(max-height)
• min-width(min-height)

二倍精灵图做法

• 在firework中缩放到一半
• 测坐标
• background-size:原来一半宽度

传统布局

1. 兼容性好
2. 布局繁琐
3. 局限性，不能在移动端很好布局

flex弹性布局

1. 操作方便，布局极为简单，移动端应用很广泛
2. PC端浏览器支持情况较差
3. IE11或更低版本，不支持或部分支持
4. 为父盒子设为flex布局后，子元素的float、clear和vertical-align失效
5. 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

父项属性

• flex-direction => 主轴方向

• justify-content => 主轴上子元素排列方式（一定确定主轴）

• flex-wrap => 子元素是否换行

• align-content => 侧轴上的子元素排列方式（多行）

• align-items => 侧轴上的子元素排列方式（单行）

• flex-flow => 复合属性，同时设置flex-direction和flex-wrap

• flex-direction:row(左->右)/row-reverse(右->左)/column(上->下)/column-reverse(下->上)

• justify-content:flex-start/flex-end/center/space-around/space-between

• flex-wrap:nowrap(默认)/wrap

• align-items:flex-start/flex-end/center/stretch(拉伸)

• align-content:flex-start/flex-end/center/space-around/space-between/stretch

• flex-flow:row wrap;(同时设置flex-direction flex-wrap)

2D转换之移动translate（不会影响其他元素的位置） 行内块无效

• transform:translate(X,Y) / translateX(n) / translateY(n) 可用百分比（相对自身）

2D转换之旋转rotate

• transform:rotate(度数) 45deg 正为顺时针，负为逆时针

2D转换中心点transform-origin

• transform-origin:X Y; （百分比、像素、方位名词）

2D转换之缩放scale（不影响其他盒子）

• transform:scale(x,y); (纯数字，无单位)

2D转换综合写法

• transform:translate() rotate() scale()等

用keyframes定义动画

@keyframes 动画名称{from/0%{width:100px;} to/100%{width:200px;}}

使用

• animation-name => 动画名称
• animation-duration:ns => 持续时间
• animation-delay => 何时开始
• animation-iteration-count:infinite => 播放次数
• animation-fill-mode:forwards 保持 backwards 回到起始
• animation-play-state:running/paused
• animation-timing-function:规定速度曲线
• animation-direction:normal/alternate 逆播放

动画简写

• animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束状态
• animation-timing-function:steps(5); => 分几步来完成动画
• white-space:nowrap => 强制一行显示

3D转换

• 近大远小
• 物体后面遮挡不可见

三维坐标系

• X右为正，左为负
• Y下为正，上为负
• Z往外为正，往里为负
• 3D位移：translate3d(x,y,z)
• 3D旋转：rotate3d(x,y,z) rotateX(45deg)/rotateY(45deg)/rotateZ(45deg)/rotate3d(1,1,0,45deg)
• 透视：perspective
• 3D呈现：transform-style
• 透视写在被观察元素的父盒子上面的（加单位px）
• Z值越大物体越大
• transform-style:flat 子元素不开启3d立体空间（默认）/ preserve-3d 开启3d立体空间
• 代码写在父级，但影响的是子盒子

浏览器私有前缀

• -moz- => firefox浏览器
• -ms- => ie浏览器
• -webkit- => safari、chrome浏览器
• -o- => opera私有

子项属性

• flex子项目占的份数
• align-self控制子项自己在侧轴的排列方式
• order属性定义子项排列顺序（前后顺序）
• .item{flex:;/*default:0*/}
• align-self:flex-end;
• order:-1 => 数值越小排列越靠前，默认为0

背景颜色渐变（必须添加前缀）

background:-webkit-linear-gradient（起始方向,颜色1,颜色2,...）

rem(root em)

• em相对于父元素的字体大小
• rem相对于html元素的字体大小

媒体查询（Media Query）是CSS3的新语法

• @media可以针对不同的屏幕尺寸设置不同的样式
• @media mediatype and/not/only (media feature){css-code;}
• 引入资源
• Less(Leaner Style Sheets)是一门CSS扩展语言，也成为CSS预处理器
• 常见的css预处理器：Sass、Less、Stylus
• Less变量 => @变量名:值;
• less嵌套 => 子元素样式直接写到父元素里
• 伪类、交集选择器、伪元素选择器 内层选择器前面需要加&
• Less运算 => 以第一个值的单位为准

rem适配方案技术使用

• 技术方案1 => less 媒体查询 rem

• 技术方案2(推荐) => flexible.js rem

• 页面元素的rem值=页面元素在750像素下px值/html里的文字大小

• @import可把一个样式文件导入到另一个样式文件里

• link把一个样式文件引入到html页面里

• px转换rem插件：cssrem

• js文件放入body里是为了确保html结构渲染成功

• swiper插件使用

• 地址：https://www.swiper.com.cn/

1. 下载需要的css和js文件
2. 官网找到类似案例，复制html结构、css样式、js语法
3. 根据需求定制修改模块

• 蓝湖/慕客协作平台
• 慕客官网：https://www.mockplus.cn/
• PS安装插件

移动web开发响应式布局

• Bootstrap来自twitter前端框架
• 中文官网：http://www.bootcss.com/
• 官网：http://getbootstrap.com/
• 推荐使用：http://bootstrap.css88.com/
• 使用四步曲：1.创建文件夹结构 2.创建html骨架结构 3.引入相关样式文件 4.书写内容
• 条件注释只有IE浏览器能识别，其他浏览器会忽视掉
• 优点

1. 标准化的html+css编码规范
2. 提供一套简洁、直观、强悍的组件
3. 有自己的生态圈，不断更新迭代
4. 让开发更简单，提高开发效率

布局容器

1. container类

• 响应式布局容器，固定宽度
• 大屏（>=1200px） 定为1170px
• 中屏（>=992px） 定为970px
• 小屏（>=768px） 定为750px
• 超小屏（100%）

2. container-fluid类

• 流式布局容器 100%宽度
• 占据全部视口的容器
• 适合于单独做移动端开发

栅格系统（grid systems） 网格系统

• 响应式、移动设备优先，随着屏幕或视口尺寸增加，系统会自动分为最多12列
• 类前缀：.col-xs-、.col-sm-、.col-md-、.col-lg-
• xs-extra small:超小 sm-small:小 md-medium:中等 lg-large:大
• 每一列默认有左右15px的padding
• 可同时为一列指定多个类名：class=“col-md-4 col-sm-6”
• 列嵌套 => 加1个行row这样可以取消父元素的padding值，而且高度自动和父级一样高
• 列偏移 => 使用.col-md-offset-n类使列向右偏移n份，实际上为当前元素加了左侧margin
• 列排序 => 使用.col-md-push-n（左侧）和.col-md-pull-n（右侧）来改变列的顺序
• 隐藏：.hidden-xs(sm,md,lg)
• 显示：.visble-xs(sm,md,lg)

移动端布局

1. 流式布局（百分比布局）
2. flex弹性布局（推荐）
3. rem适配布局（推荐）
4. 响应式布局

rem（常见）

1. 需要不断修改html文字大小
2. 需要媒体查询media
3. 需要flexible.js

vw/vh

1. 省去各种判断和修改
2. 代表：b站

• vw/vh是一个相对单位（类似em和rem相对单位）
• vw是viewport width 视口宽度单位
• vh是viewport height 视口高度单位
• 1vw = 1/100 视口宽度
• 1vh = 1/100 视口高度
• 和百分比有区别的，百分比是相对于父元素的，而vw和vh总是针对当前视口来说的
• 开发中使用vw，需要像素大厨把模式改为2x模式
• 还原设计稿 确定设计稿视口宽度 直接使用测量数值/（视口宽度/100）
• 因为涉及到大量除法，适应less更好
• 开发中使用vw基本够用，vh很少使用
• 兼容性：网站：https://caniuse.com/