文章目录 移动web开发流式布局 1.0 移动端基础 1.1浏览器现状 1.2 手机屏幕的现状 1.3常见移动端屏幕尺寸 1.4移动端调试方法 2.0 视口 2.1 布局视口 layout viewport 2.3理想视口 ideal viewport 2.4meta标签 3.0二倍图 3.2背景缩放background-size 4.0 移动开发选择和技术解决方案 4.2 移动端技术解决方案 4.3 移动端大量使用 CSS3盒子模型box-sizin 4.4移动端特殊样式 5.0移动端常见布局 移动web开发——flex布局 1.0传统布局和flex布局对比 1.1传统布局 1.2 flex布局 1.3 建议 2.0 flex布局原理 3.0 父项常见属性 3.1 flex-direction设置主轴的方向 3.2 justify-content 设置主轴上的子元素排列方式 3.3 flex-wrap设置是否换行 3.4 align-items 设置侧轴上的子元素排列方式(单行 ) 3.5 align-content 设置侧轴上的子元素的排列方式(多行) 3.6 align-content 和align-items区别 3.7 flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性 4.0 flex布局子项常见属性 4.1 flex 属性 4.2 align-self控制子项自己在侧轴上的排列方式 4.3 order 属性定义项目的排列顺序 5.0 携程网首页案例制作 移动web开发流式布局 1.0 移动端基础 1.1浏览器现状 PC端常见浏览器:360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。 移动端常见浏览器:UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全浏览器