## 移动端
-浏览器
-手机屏幕
# 移动端调试
-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即可
-移动端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:控制元素是否是换行
align-content
align-item
flex-flow
align-order
前端具体应用反而有点生疏
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
stretch
flex-flow 复合属性： flex-direction + flex-wrap
==============
侧轴
单行： alig-items
多行： align-content
主轴：
justify-content
align-self:flex-end; 在子元素身上的对齐方式：侧轴方向
flex-start center
order:N; 定义子项目的排列方式，数值越小，排列越靠前
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
