web移动开发总结(四)

总结

1. 移动端的一些基本基础知识
2. 移动京东的项目搭建
3. 公共样式的定义
4. 顶部通栏的布局
5. 轮播图的布局
6. 导航条的布局
7. 秒杀商品布局
8. 京东超市布局

原生移动web开发

1. 响应式开发： 写一个页面同时适配多个终端
2. 原生的移动web开发： 分别针对每个端都写一套代码 PC端写一套代码 移动端写一套代码
   1. PC端一般使用固定宽高的布局
   2. 移动端全屏撑满整个页面 全屏100% 使用百分比布局（流式布局）
      目前最流行最先进的方式rem布局方式

网页的布局方式

1. 固定宽高布局 （PC端）
2. 百分比布局 （PC和移动端都能用）
3. flex伸缩布局 (PC和移动端都能用 广泛用在移动端)
4. rem布局 (移动端 相对单位相对根元素的字体大小)
5. 浮动 + 定位 (PC和移动端都能用)

注意以上布局方式不是每个页面只能使用这一种 你可以根据需求根据效果灵活搭配使用
百分比+flex
百分比+rem
flex+rem
百分比+flex+rem

移动端的站点 以m开头

1. m.jd.com

2. m.taobao.com
   移动端页面结构

   搜索框
   轮播图
   导航条
   商品
   底部

移动端页面的内容比较简单 样式也简单
移动端页面核心： 用户体验（UI界面效果 加载速度快） 功能方便快捷 考虑各种手机屏幕适配

移动端一些常见的屏幕的相关知识

1. 长度单位(绝对单位和相对单位)
   1. 尺寸in： 单位 绝对单位 1英寸=2.54厘米 在手机里面的英寸指的是手机对角线的长度
      手机对角线长度5英寸 5*2.54厘米 = 12.7厘米
   2. 像素px: 单位 如果按照屏幕 就是屏幕里面的最小单元 如果图片就图片里面的最小单元
      屏幕都是一格格的 px就是屏幕里面的一个格子
      图片也是一格一格的 px就是图片里面的一个格子
   3. 点pt: 打印机里面的最小单元 每一个点 1pt = 1/72英寸 ，1点=0.376毫米=1.07英美点=0.0148英尺=0.1776英寸
   4. ppi像素密度: 每英寸里面的px数量 1英寸里面的px越多屏幕越清晰 小格子越多
      PPI公式： https://baike.baidu.com/item/PPI/9910558
   5. vw、vh、vmin、vmax 的含义
      1. vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。
         视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。
      2. 具体描述如下：
         vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
         vh：视窗高度的百分比（1vh 代表视窗的高度为 1%）
         vmin：当前 vw 和 vh 中较小的一个值
         vmax：当前 vw 和 vh 中较大的一个值
         单位的详解： https://www.cnblogs.com/lidongfeng/p/7243650.html
         vw、vh、vmin、vmax应用场景： https://blog.csdn.net/ZNYSYS520/article/details/76053961
   6. %: 百分比 参照父元素百分比的大小也是相对单位

视口的概念

1. 视口: 浏览器的可视窗口 在PC端就是显示页面的哪一块不包含 上面的框框和调试窗口 屏幕宽度变化可视窗口大小也会变化
2. 视口在移动端： 表示移动端可视窗口就是 在chrome模拟器中就是整个模拟器的窗口
   但是移动端默认视口宽度不是跟随窗口变化而变化的而是一个固定的值980
3. 移动端视口默认980的原因： 是为了兼容PC网页能够完全在手机里面展示但是PC网页很宽移动端手机屏幕很小所以会导致页面缩放显示如果想看的就要双击放大或者拖放放大
4. 但是现在我们单独开发移动端网页是不会设置很宽的宽度的就不需要这个默认视口，希望视口宽度和屏幕宽度一致
   通过meta标签设置视口的默认值

width=device-width 设置视口默认宽度 为设备的真实宽度 initial-scale=1.0 设置视口默认缩放比例 为 1 user-scalable=no 是否允许用户拖放 no不允许 yes允许 minimum-scale=1.0 最小缩放 maximum-scale=1.0 最大缩放

移动端的像素

1. 屏幕分辨率像素： 屏幕里面的一个显示页面的屏（内屏的大小 显示的格子数量）
   iphone6 7 8 7501334 表示屏幕水平能够放750个格子px 垂直能放1334个格子 px
   iphone 4s 5 6401136 表示水平640格子px 垂直1136格子px
   iphoneplus 10801920 表示水平1080格子px 垂直1920格子px
   电脑分辨率 1366768 表示水平1336格子px 垂直是768格子px
   手机分辨率 大的值是高 小的是宽
   电脑分辨率 大的值是宽 小的值是高
2. 屏幕的真实像素 ： 屏幕尺寸的大小 (外屏大小和手机尺寸有关)
   iphone 6 7 8 375667 表示屏幕的真实的宽度375px真实的高度667px
   iphone 4 5 320568 表示屏幕的真实的宽度320px真实的高度568px
   电脑 1366*768 表示屏幕的真实的宽度1366px真实的高度768px
3. 屏幕分辨率像素和真实像素的关系
   1. 手机 屏幕分辨率 比 真实像素 大2倍的
   2. 电脑 屏幕分辨率 和 真实像素 一致
   3. 一般如果分辨率比真实像素 大 就表示这种屏幕是retina屏幕 (视网膜高清屏) 如果分辨率和真实一致表示普通屏幕
4. CSS逻辑像素： 由我们程序员自己来控制 根据视口来控制
   一般在PC端视口宽度=设备宽度 在PC写了1px在页面就是1px
   在移动默认视口!=设备像素 在移动端默认写1px不是真实的1px
   但是一般我们会设置移动端视口宽度=设备的真实宽度 这个时候1px=1真实px

总结:

1. 手机的分辨率px的大小和真实px大小不一样
   现在的主流是2倍 分辨率大小px是真实屏幕px大小的2倍
2. 电脑的分辨率px和 真实px大小一样的
   分辨率 1366768 == 真实 1366768
3. 由于视口设置得和真实屏幕宽度一致 CSS逻辑像素 == 视口宽度 == 真实像素
4. 由于手机真实px=分辨率的一半 CSS像素也是分辨率的一半
   写了一个375的盒子 在分辨率放大2倍来显示 把盒子宽高都放大2倍
5. 写代码是按照真实的px来写代码的的

移动端设计图

1. 移动端设计稿一般是按照分辨率设计的 （为了保证图片在分辨率里面不会失真）
2. 但是写代码按照真实像素来代码
3. 由于分辨率比真实大2倍 所以 写代码的时候量设计稿的大小 缩小一半来写
4. 例如量了750宽度 只能写375 量了80 只能写40（一般设计师会标好 也要按照标好的一半来写）

移动端二倍图的原理

1. 页面宽高参照真实像素 但是真实像素比分辨率小一半的
2. 页面在分辨率呈现的时候都会放大2倍 页面所有内容包括图片文字都会放大2倍
3. 如果是矢量图放大不会失真 文字放大也不会失真 但是一些非矢量图在移动端放大就会失真
4. 使用图片的时候不能写图片真实大小 要缩小一半来写

后续3倍 4倍 解决方案都一样

1. 设计师会设计3倍图片 和设计稿 写页面的时候 缩小3倍来
   2倍设计稿 640 iphone 4/ 5 720 小米 三星 750 iphone 6 / 7 / 8
   3倍 1125 iphonex

总结移动端的px概念和二倍图的原理

1. 分辨率表示内屏显示的像素数量 手机分辨率一般比较高都是2倍以上的
2. 真实像素表示设备真实的物理像素
3. CSS逻辑像素表示CSS中写的px单位(但是由于视口和真实像素一致所以CSS逻辑=真实像素)
4. 移动端设计稿和图片一般是按照分辨率来设计（因为页面最终都会在分辨率显示为了保证图片不失真）
5. 当我们拿到设计稿的写代码的时候因为 分辨率是真实2倍也是CSS像素2倍
   所以设计稿上的px都要缩小1半在CSS中写
   例如设计稿750px 写样式只能写375px
   设计稿是80px 只能写 40px
   设计稿的文字大小是32 只能写16px

移动的其他知识

http://www.woshipm.com/pmd/176328.html
http://www.cnblogs.com/jiangzilong/p/6700023.html

搭建京东移动端项目

1. 创建jd项目文件夹
2. 打开day04 1-教学资料 》 jd完整版 》 复制 image+lib文件夹 放到你自己的jd里面
3. 搭建页面 写视口 引包

移动端JD项目

搭建项目的结构

1. 创建一个jd的文件夹
2. 打开day04 > 1-教学资料 > jd完整版 把images和lib复制到你创建的jd项目
3. 进入jd文件夹创建index.html主页
4. 给页面添加视口
5. 页面引包
   创建项目需要的less文件夹 index.less
   和js文件夹 index.js
6. 项目初始样式（没有使用框架需要自己写样式初始化代码）
   创建一个base.less公共样式文件
   移动端常见的样式初始化：
   1. 移动端需要设置盒模型为border-box 防止页面出现水平滚动条
   2. 移动端要去除标签点击高亮
   3. 去除图片3px间隙
      移动端公共的样式
      1.浮动
      2.清除浮动

jd头部布局

1. 左边一个logo图标
2. 中间一个from表单 里面一个search图标 和 Input输入框
3. 右边一个登录链接
4. 样式 给图标设置背景图 同时设置背景大小 使用flex左右2边固定 中间flex:1自适应
5. 给左边的logo设置固定的宽度高度加padding 让内容到中间 同时设置背景图的定位原点为content-box 和背景图的裁切也为content-box
6. 中间的表单设置input 宽度100% 高度30px 圆角15px 居中
7. 给中间表单里面的搜索图标也添加精灵图定位在搜索框的上面
8. 右边的登录链接设置固定宽高文字水平垂直居中即可

轮播图布局

1. 暂时只添加一个图片 后面在做轮播图
2. 样式 给图片设置宽度百分百

导航条布局

1. 写一个列表 里面8个li 里面都有a 和 图片旁边有一个p段落
2. 样式 给ul设置flex布局同时支持换行 每个li宽度25% 里面的a转块设置居中 图片设置原图的一半
3. 设置ul的内边距padding 和 p的上下间距margin

主体商品布局

1. 写一个main大容器包裹所有商品
2. 在main里面添加一个秒杀商品容器
3. 再添加3个京东超市容器
4. 给main设置一个背景色 和 padding:10px;

秒杀商品布局

1. 添加秒杀的标题title
2. 添加秒杀的商品内容content
3. 在title里面添加秒杀的图标 文字 倒计时 更多
4. 在content 添加 ul li 里面添加a 图片 和价格
5. 样式
   1. 给标题里面的图标设置宽高为图片的一半
   2. 设置文字样式
   3. 设置倒计时的背景色和字体颜色 和中间2个: 背景色字体颜色 使用nth-child(3n)
   4. 设置右边的文字右浮动
   5. 设置间距
   6. 设置整体标题的高度行高居中 和底部边框
   7. 设置内容里面的ul flex布局 里面的每个li flex:1;
   8. 设置内容里面的图片缩小一半
   9. 设置价格的颜色字体大小

京东超市布局

1. 添加一个京东超市title
2. 添加一个京东超市内容content
3. 在title里面添加一个h4标题
4. 在content内容里面添加 左left 右 right 容器
5. 在左右容器里面 添加a a里面添加图片
6. 样式 给京东超市title设置行高 左padding 再添加一个伪元素定位到左边
   给内容设置flex布局 左右容器flex:1;
   给a转块 图片100%

底部的布局

1. 添加一个ul li
2. 在li里面添加a a 里面添加图片 图片地址使用(检测元素查看完整版网络地址)
3. 样式 给ul设置flex布局 li 设置flex:1 里面a转块 文本居中 图片缩小一半设置宽高

总结

1. 移动端一些基本的概念
2. 原生移动web的布局  页面通常全屏不使用框架 使用flex布局 后面还会使用rem
3. 移动web的长度单位
   1. 绝对单位： in cm pt 永恒固定的不会变化就是绝对单位
   2. 相对单位: px em rem vw vh  可能根据不同屏幕设备会变化 就是相对单位
4. 像素的概念：  显示图像的最小物理单元  像素越多 图像越清晰  像素越少图像越模糊
5. 分辨率像素 真实像素 CSS逻辑像素概念和关系
   1. 分辨率像素： 虚拟用来呈现图像的内屏
电脑分辨率  1 : 1  宽度高度 1366768
手机分辨率比例 2:1  或者 3:1  或者 4:1   高度宽度  1334750
   2. 设备真实像素： 设备外屏真实大小  和手机尺寸有关
   3. CSS逻辑像素： CSS逻辑像素参照是视口 如果视口宽度和设备的真实像素一致   CSS逻辑像素=真实像素
6. 移动端设计稿
   1. 移动端由于分辨率比真实设备大2倍以上 设计稿按照分辨率设计的 保证图片在分辨率里面显示的时候不会失真   2倍图@2x  @3x
   2. 但是CSS逻辑像素参照 真实像素  写代码的时候 看移动端设计稿的标准 或者测量都要除以2 
7. 二倍图的原理
   1. 设计稿的图片 页面使用图片都是2倍图片 使用图片的时候都要按照图片原图大小一半来设置宽高 
   2. 不管是图片标签 width height还是背景图  background-size
8. jd项目搭建
9. 写jd移动端样式初始化
   1. 盒模型的设置 border-box 为了让页面不会因为边距间距出现滚动条
   2. 去除a标签 按住的高亮颜色 -webkit-tap-highlight-color:transparent;
   3. 图片对齐方式 input边框内边框 a默认下划线字体颜色 li小圆点等
   4. 使用网上写好的样式初始化 https://blog.csdn.net/qq_30669833/article/details/78186794
10. jd头部布局  
    1. 结构左  中  右 
    2. 左边添加图标 使用精灵图  使用padding把图标挤到中间
    3. 背景图默认不会受到padding的影响 设置背景图定位起点 和背景图裁切
    4. 左右高度宽度 中间flex:1;
    5. 设置中间表单样式 和 搜索图标定位
11. 导航条布局
    1. 使用flex 每个li各占1/4 25% 给ul设置flex-wrap:wrap; 要设置换行
    2. 设置a大小 图片缩小一半  间距等
12. jd秒杀布局
    1. 标题title 和 内容 上下布局
    2. 标题从左往右依次写图片 文字 倒计时 更多
    3. 使用 ul li 3列布局 里面有图片价格
    4. 设置样式 title 文字居中行高高度 设置文字大小颜色间距 设置倒计时背景色 nth-child(3n)
    5. 设置内容flex布局 li flex:1    +li 设置2个边框
    6. 设置价格文字颜色大小
    7. 设置整个盒子盒阴影
13. jd超市布局
    1. 使用title cotent 上下布局
    2. 修改标题h4样式添加伪元素定位在左边
    3. 内容使用flex 左右两个各自flex:1;
    4. 里面a转块 添加边框 （封装了一些边框类名）
14. 底部布局
    1. 使用ul li flex布局 每个li flex:1;
    2. 设置图片缩小一半
    3. 设置底部固定定位在底部 设置宽度 z-index 位置固定在底部
    4. 底部会和商品重叠在一起   给body设置margin-bottom 让内容往上挤
15. 头部设置固定定位定位在上面 设置宽 和 z-index 透明背景色