JS_移动端开发
## 移动端
-浏览器
-手机屏幕
# 移动端调试
-web服务器：域名，服务器等
-chrome
## 视口（viewport）
浏览器显示页面内容的屏幕区域
布局视口——layout viewport
ios/android 基本上把这个布局视口分辨率设置980px
视觉视口：visual viewport
用户看到的网站区域
理想视口：ideal viewport
布局视口的宽度应该与理想视口的宽度一致
一般在移动开发中，会将布局视口宽度设置为视觉视口
width=device-width 手机宽度
initial-scale=1.0 默认比例
user-scalable=no 不允许缩放
maximum-scale=1.0 最大比例
minimum-scale=1.0 最小比例
## 相关技术
-考虑webkit兼容问题 浏览器的私有前缀添加：webkit即可
-H5 . CSS3 都支持——移动端基本都支持前端语法！
-移动端CSS初始化
normalize.css:
//兼容性问题，PC端要有该底线思维
box-sizing:border-box; //css3盒子模型：宽度指盒子宽度：包含padding+border；而不设置即传统为：内容的宽度
box-sizing:content-box; //内容宽度
## 常用布局：缺少实际网站参考，仅有概念导致印象不深刻+还得加自我实践项目驱动后的认知提升【实践一线前20~30年必须始终泡在一线！】
-单独移动站点
-百分比布局——流式布局
-flex布局——推荐
-布局简单 移动端使用管饭
-pc端浏览器支持不好，《=ie11，部分支持；6.7[一般PC端建议使用传统布局]
-移动端，或者PC端不考虑兼容
-rem + less + 媒体查询
-混合布局
## 响应式
媒体查询
bootstrap
-父元素设置为flex布局，子元素的float\clear\vertical-align失效
-flex项目
## flex布局
给父盒子添加flex,控制子元素的位置和排列方式
父项常用的属性：
flex-direction:设置主轴的方向，默认主轴方向水平向右；侧轴垂直向下
row:默认值:水平向右
row-reverse:改变横轴方向
column:设置为竖轴
column-reverse:改变竖轴方向
justify-content:设置主轴上子元素的排列方式
flex-start:[默认值]从头部开始
flex-end:默认是从尾部开始
cneter:居中
space-around:平分间距
space-between:两边对齐，剩余空间平分
flex-wrap:控制元素是否是换行
[nowrap:默认值]弹性盒子：自伸缩；默认资源不换行
align-content
align-item
flex-flow
align-order
前端具体应用反而有点生疏
display:flex; 默认为横轴
align-items:center //在侧轴上居中 //对单行有效
//flex-end 下对齐
//flex-start 上对齐
align-items:stretch; 子元素会拉伸，但是子元素不给高度
flex-direction:column 同理如果主轴为竖轴，则子元素不给宽度，拉伸
flex-wrap:wrap; 迁至换行
// 设置子元素在侧轴的排列方式（多行，单行无效）
align-content:flex-start;//flext-end; center; // 整体巨上，巨下，局中
space-around
space-between
stretch
flex-flow 复合属性： flex-direction + flex-wrap
==============
侧轴
单行： alig-items
多行： align-content
主轴：
justify-content
align-self:flex-end; 在子元素身上的对齐方式：侧轴方向
flex-start center
order:N; 定义子项目的排列方式，数值越小，排列越靠前
/* inline-flex 内联弹性盒 */
margin-left: 10px;
justify-content: flex-end;
justify-content: end;
justify-content: flex-start;
justify-content: space-around;
justify-content: space-evenly;
justify-content: space-between;
补充：
padding margin
内边距与外边距使用问题？
绝大多数下可以混用，但是总有一个最好用的，建议：
优先使用width > padding > margin
(ie6 margin会加倍问题)浮动：
1 标准流（文档流 普通流）
一个网页的标签元素，正常是从上往下，从左到右排列；
块级元素独占一行，行内元素按照顺序依次前后排列三种布局：标准流 浮动 定位
浮动：最初是做文字环绕效果
——元素设置了浮动属性，会脱离标准流的控制（脱标）
浮动，脱离原始位置，不占位置
子盒子浮动 不会压住父盒子的padding、margin
浮动元素改变元素的模式
无论行内元素还是块级元素，设置浮动后，都具有行内块元素{可以设置宽高，不设置由内容撑开}{浮动找最近的父亲盒子对齐}
总结：
float :一般需要与标准流的父级元素搭配使用，浮动可以改变元素的显示模式！{一般：父盒子不设置高度}
CSS元素总结：
/* font-family: "consolas","Arial","微软雅黑" ,"SimSun*\"宋体",*/
/* font-weight:400 正常 100：100：700*/
/* 善于用父亲的Padding ，少用儿子的Margin */
/* margin:0 auto; 让块级元素局中：div、p、li、h1~h6 */
/* 行内元素：span margin-left\right可以；margin-top\bottom不可以*/
rgba()
opacity:让整个内容变透明
选择器
1 基本选择器：标签选择器、类(常用)、id
{id 唯一性}：一般是特定（独一无二）的选择区域2 高级选择器：
后代选择器 div p 表示div中所有后代P
交集选择器 div.box {} div.box li{} p.p1#p1(ie6不支持连续交集写法)
并集选择器 div,p,li,ul
3 继承性：CSS中有一部分属性可以被继承，比如文字和文本的属性：color，font-size,font-family,font-*,text-*
4 层叠性：
权重
继承父类，近亲原则！important 提升权重，无法提升继承的权重。
浏览器不同，默认显示字号不一样，并且加载的最小字号也不同！
chrome浏览器：默认16px;支持显示最小12px
ie6浏览器：默认14px;支持显示最小1px
常用：12、14、16px————实际项目根据设计师指定为准
dl dt dd
thead tr th
tbody tr td
selectmultiple="multiple"size="2"
perspective: 500px;
/*
视距：让3D变换的子元素拥有透视效果（近大远小）
加给父亲，只对3d变换的元素有效
值越小透视效果越明显，无穷大时接近于none
通常：500px - 800px
*/
transform-style: preserve-3d;
/*
flat 2D展示
preserve-3d 3D展示
*/
transition-timing-function:时间函数
linear:匀速
ease-in:加速
ease-out:减速
ease:缓动
ease-in-out:先加速后减速
