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. 长度单位(绝对单位和相对单位)

2. 尺寸in： 单位 绝对单位 1英寸=2.54厘米 在手机里面的英寸指的是手机对角线的长度
   手机对角线长度5英寸 5*2.54厘米 = 12.7厘米

3. 像素px: 单位 如果按照屏幕 就是屏幕里面的最小单元 如果图片就图片里面的最小单元
   屏幕都是一格格的 px就是屏幕里面的一个格子
   图片也是一格一格的 px就是图片里面的一个格子

4. 点pt: 打印机里面的最小单元 每一个点 1pt = 1/72英寸

5. 像素密度ppi: 每英寸里面的px数量 1英寸里面的px越多屏幕越清晰 小格子越多

6. vw、vh、vmin、vmax 的含义

7. vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。
   视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。

8. 具体描述如下：
   vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
   vh：视窗高度的百分比
   vmin：当前 vw 和 vh 中较小的一个值
   vmax：当前 vw 和 vh 中较大的一个值

移动端的像素

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

   扫描二维码关注公众号，回复： 4394272 查看本文章

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倍来

总结移动端的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