移动web——学习笔记整理
目录
Day1
00.流式布局
00.1目标
00.2目录
01.移动端浏览器
02.视口（layout viewport）
03.meta视口标签（单标签）
04.物理像素&物理像素比
05.二倍图
06.背景缩放（background-size）
07.背景二倍图以及多倍图切图
08.移动端开发选择
09.移动端技术解决方案
10.移动端特殊样式
11.移动端技术选型
12.流式布局（百分比布局）
13.京东移动端首页
13.1 准备工作
13.2 App布局——先写顶层Header
13.3 搜索模块布局
13.4 搜索模块布局内容填充
13.5 二倍精灵图的做法
13.6 焦点图制作
13.7 品牌日模块制作
13.8 补充：行内元素&块元素&行内块元素
13.10 新闻模块
13.11 商城移动端首页终结
Day2
00. 移动WEB开发之flex布局
00.1目标
00.2目录
01.flex布局体验
02.flex布局原理
03.flex布局父项常见属性（6个）
03.1 flex-direction 设置主轴的方向☆
03.2 justify-content 设置主轴子元素排列☆
03.3 flex-wrap 设置子元素是否换行
03.4 align-items 设置侧轴上的子元素的排列方式（单行）
03.5 align-contents 设置侧轴上的子元素的排列方式（多行）
03.6 align-contents和align-items的区别
03.7 flex-flow 设置复合属性
04.flex布局子项常见属性（个）
04.1 flex子项目占的份数
04.2 align-self和order
05.携程网案例
05.1 准备工作，技术选型
05.2 搜索模块布局
05.3 搜索模块user制作
05.4 搜索模块search制作
05.5 焦点图focus模块制作
05.12 热门模块制作
05.13 更多福利模块制作
05.14 sales-bd模块制作
携程网首页案例制作自行补写后得：
Day3
00.移动web开发——rem适配布局
00.1目标
00.2目录
01.rem单位
02.媒体查询语法（Media Query）
02.1 mediatype查询类型
02.2 关键字
02.3 media feature媒体查询
02.4 媒体查询——背景变色
02.5 媒体查询+rem实现元素动态大小变化
02.6 媒体查询——引入资源（理解）
03.css弊端
04.Less
05.Less使用
05.1 Less变量
05.2 Less编译 （easy less插件）
05.3 Less嵌套
05.4 Less运算※
06.rem适配方案原理
06.1 rem适配方案使用（市场主流）
06.2 rem适配方案一
07. 苏宁首页案例制作
07.1 苏宁首页common.less制作
07.2 苏宁首页import导入样式
07.3 苏宁首页body样式设置
07.4 苏宁首页search-content模块布局
07.5 苏宁首页search-content内容布局、模块制作
08.rem适配方案二
09.使用rem适配方案二
09.1 使用rem适配方案二 ——苏宁首页body样式修改
09.2 使用rem适配方案二 ——vscode插件之cssrem（px to rem & rpx）
09.3 使用rem适配方案二 ——修改flexible默认html字体大小
09.4 使用rem适配方案二 ——search-content内容制作一
09.5 使用rem适配方案二 ——search-content内容制作二
16.Swiper插件的使用
Day4
00.移动web开发四——响应式布局
00.1目标
00.2目录
01.响应式开发原理
02.响应式布局容器
03.响应式导航案例
04.Bootstrap简介
05.Bootstrap使用
05.1 Bootstrap使用一
05.2 Bootstrap使用二
06.Bootstrap布局容器
07.Bootstrap栅格系统
08.Bootstrap栅格系统的使用
09.Bootstrap列嵌套
10.Bootstrap列偏移（.col-md-offset-）
11.Bootstrap列排序
12.Bootstrap响应式工具
13.阿里百秀（使用Bootstrap）
13.1 阿里百秀首页制作分析
13.2 阿里百秀首页准备工作
13.3 阿里百秀logo制作
13.6 阿里百秀news制作
13.7 阿里百秀publish模块制作
13.8 阿里百秀aside模块制作
13.9 阿里百秀logo响应式制作
13.11 阿里百秀news响应式制作
13.12 阿里百秀publish响应式制作
移动端总结
移动端主流方案
移动端技术选型
其余补充的小内容
01.vw和vh
02.vw怎么使用
03.怎么还原设计稿
04.vw注意事项
05.B站仿作——下载B站的字体图标
05.1 easyless自动保存css指定位置
05.2按px转换为vw的小插件（px2vw）
05.3 bilibili搜索栏布局（用vw）、logo制作、right制作
学习笔记整理——移动web(黑马的教程)
Day1
00.流式布局
00.1目标
知道web开发现状、写标签viewport、用移动web调试方法、说出移动端常见的布局方案、描述流式布局、独立完成京东移动端首页。
00.2目录
移动端基础、视口、二倍图、移动端调试、移动端技术解决方案、移动端常见开发——流式布局、京东移动首页制作
01.移动端浏览器
兼容移动端主流浏览器，处理webkit内核浏览器即可。
02.视口（layout viewport）
- 布局视口（layout viewport）
- 视觉视口（visual viewport）
- 理想视口（ideal viewport）：需要给移动端添加meta视口标签。手机屏幕多宽，视口就多宽。
03.meta视口标签（单标签）
content="width=device-width"：viewport的宽度=设备宽度
initial-scale=1.0：初始缩放比为1，maximum-scale=1.0：最大缩放比为1，
minimum-scale=1.0：最小缩放比为1，user-scalable=no"：用户是否可以缩放（yes或no）
04.物理像素&物理像素比
物理像素：即为分辨率。
物理像素比：一个px能显示物理像素点的个数。
【eg：Iphone8:1px开发像素=2个物理像素】
05.二倍图
即：准备的图片比实际需要的图片大小大两倍。
06.背景缩放（background-size）
语法：background-size：图宽 图高
- 只写其中一个参数时，会等比例缩放
- 单位可跟%，相对于父盒子而言的
- cover：等比例拉伸，但是背景图会显示不全
- contain：宽、高等比例拉伸，故可能会有留白区域
07.背景二倍图以及多倍图切图
background:url(...);//插入图片
background-size:...px ...px;//缩放比例50%即可得二倍图多倍图切图：PS——>cutterman（可一下子切3倍图、2倍图、1倍图原图）