今天学习总结
- 移动端的一些基本基础知识
- 移动京东的项目搭建
- 公共样式的定义
- 顶部通栏的布局
- 轮播图的布局
- 导航条的布局
- 秒杀商品布局
- 京东超市布局
原生移动web开发
- 响应式开发: 写一个页面同时适配多个终端
- 原生的移动web开发: 分别针对每个端都写一套代码 PC端写一套代码 移动端写一套代码
- PC端一般使用固定宽高的布局
- 移动端全屏撑满整个页面 全屏100% 使用百分比布局(流式布局)
目前最流行最先进的方式rem布局方式
网页的布局方式
- 固定宽高布局 (PC端)
- 百分比布局 (PC和移动端都能用)
- flex伸缩布局 (PC和移动端都能用 广泛用在移动端)
- rem布局 (移动端 相对单位相对根元素的字体大小)
- 浮动 + 定位 (PC和移动端都能用)
注意以上布局方式不是每个页面只能使用这一种 你可以根据需求根据效果灵活搭配使用
百分比+flex
百分比+rem
flex+rem
百分比+flex+rem
移动端的站点 以m开头
- m.jd.com
- m.taobao.com
移动端页面结构
搜索框
轮播图
导航条
商品
底部
移动端页面的内容比较简单 样式也简单
移动端页面核心: 用户体验(UI界面效果 加载速度快) 功能方便快捷 考虑各种手机屏幕适配
移动端一些常见的屏幕的相关知识
-
长度单位(绝对单位和相对单位)
-
尺寸in: 单位 绝对单位 1英寸=2.54厘米 在手机里面的英寸指的是手机对角线的长度
手机对角线长度5英寸 5*2.54厘米 = 12.7厘米 -
像素px: 单位 如果按照屏幕 就是屏幕里面的最小单元 如果图片就图片里面的最小单元
屏幕都是一格格的 px就是屏幕里面的一个格子
图片也是一格一格的 px就是图片里面的一个格子 -
点pt: 打印机里面的最小单元 每一个点 1pt = 1/72英寸
-
像素密度ppi: 每英寸里面的px数量 1英寸里面的px越多屏幕越清晰 小格子越多
-
vw、vh、vmin、vmax 的含义
-
vw、vh、vmin、vmax 是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗(Viewport)大小来决定的,单位 1,代表类似于 1%。
视窗(Viewport)是你的浏览器实际显示内容的区域—,换句话说是你的不包括工具栏和按钮的网页浏览器。 -
具体描述如下:
vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%)
vh:视窗高度的百分比
vmin:当前 vw 和 vh 中较小的一个值
vmax:当前 vw 和 vh 中较大的一个值
移动端的像素
-
屏幕分辨率像素: 屏幕里面的一个显示页面的屏(内屏的大小 显示的格子数量)
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
手机分辨率 大的值是高 小的是宽
电脑分辨率 大的值是宽 小的值是高 -
屏幕的真实像素 : 屏幕尺寸的大小 (外屏大小和手机尺寸有关)
iphone 6 7 8 375667 表示屏幕的真实的宽度375px真实的高度667px
iphone 4 5 320568 表示屏幕的真实的宽度320px真实的高度568px
电脑 1366*768 表示屏幕的真实的宽度1366px真实的高度768px -
屏幕分辨率像素和真实像素的关系
- 手机 屏幕分辨率 比 真实像素 大2倍的
- 电脑 屏幕分辨率 和 真实像素 一致
- 一般如果分辨率比真实像素 大 就表示这种屏幕是retina屏幕 (视网膜高清屏) 如果分辨率和真实一致表示普通屏幕
-
CSS逻辑像素: 由我们程序员自己来控制 根据视口来控制
一般在PC端视口宽度=设备宽度 在PC写了1px在页面就是1px
在移动默认视口!=设备像素 在移动端默认写1px不是真实的1px
但是一般我们会设置移动端视口宽度=设备的真实宽度 这个时候1px=1真实px
总结:
- 手机的分辨率px的大小和真实px大小不一样
现在的主流是2倍 分辨率大小px是真实屏幕px大小的2倍 - 电脑的分辨率px和 真实px大小一样的
分辨率 1366768 == 真实 1366768 - 由于视口设置得和真实屏幕宽度一致 CSS逻辑像素 == 真实像素
- 由于手机真实px=分辨率的一半 CSS像素也是分辨率的一半
写了一个375的盒子 在分辨率放大2倍来显示 把盒子宽高都放大2倍 - 写代码是按照真实的px来写代码的的
移动端设计图
- 移动端设计稿一般是按照分辨率设计的 (为了保证图片在分辨率里面不会失真)
- 但是写代码按照真实像素来代码
- 由于分辨率比真实大2倍 所以 写代码的时候量设计稿的大小 缩小一半来写
- 例如量了750宽度 只能写375 量了80 只能写40(一般设计师会标好 也要按照标好的一半来写)
移动端二倍图的原理
- 页面宽高参照真实像素 但是真实像素比分辨率小一半的
- 页面在分辨率呈现的时候都会放大2倍 页面所有内容包括图片文字都会放大2倍
- 如果是矢量图放大不会失真 文字放大也不会失真 但是一些非矢量图在移动端放大就会失真
- 使用图片的时候不能写图片真实大小 要缩小一半来写
后续3倍 4倍 解决方案都一样
- 设计师会设计3倍图片 和设计稿 写页面的时候 缩小3倍来
总结移动端的px概念和二倍图的原理
- 分辨率表示内屏显示的像素数量 手机分辨率一般比较高都是2倍以上的
- 真实像素表示设备真实的物理像素
- CSS逻辑像素表示CSS中写的px单位(但是由于视口和真实像素一致所以CSS逻辑=真实像素)
- 移动端设计稿和图片一般是按照分辨率来设计(因为页面最终都会在分辨率显示为了保证图片不失真)
- 当我们拿到设计稿的写代码的时候因为 分辨率是真实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