网站落地页和普通网页小程序建站平台
移动端特点
PC和手机
PC端网页和移动端网页的有什么不同?
- PC屏幕大，网页固定版心
- 手机屏幕小，网页宽度多数为100%
谷歌模拟器
使用谷歌模拟器可以在电脑里面调试移动端的网页
屏幕尺寸
了解屏幕尺寸概念
屏幕尺寸: 指的是屏幕对角线的长度，一般用英寸来度量
PC端主流设备的分辨率
- PC端常见分辨率
- 这个分辨率是屏幕硬件的分辨率, 出厂自带, 无法修改, 就是物理分辨率
- 1920 * 1080
- 1366 * 760
- 在操作系统中, 都会有一个推荐的缩放比例
- 应用这个缩放150%之后, 屏幕呈现的分辨率就变了
- (1920/150%) * (1080/150%)
- 这个实际使用的分辨率是操作系统(软件)控制的, 就是逻辑分辨率
- 逻辑分辨率的作用就是统一屏幕的显示效果, 让不同分辨率的屏幕呈现一致的UI体验
移动端主流设备的分辨率
制作网页参考物理分辨率还是逻辑分辨率?
- 制作网页都要参考逻辑分辨率
- 下面是京东网站, 在我电脑上展示的宽度是1690, 这个就是我的屏幕的逻辑分辨率: 2560 / 150% = 1707
- 存在误差是因为京东网页右侧滚动条占用了一点宽度
- 下面是移动端网站, 使用的也是逻辑分辨率
适口标签
默认情况下，PC网页的宽度和逻辑分辨率是相同的
<!DOCTYPE html>
<html lang="en">/* 最简单的HTML */
/* 默认宽度就是屏幕的逻辑分辨率宽度 */
/* 2560 / 150% = 1707 */
<head><meta charset="UTF-8"><title>Document</title>
</head><body><div>hello</div>
</body></html> 
默认情况下，手机网页的宽度固定是980, 和逻辑分辨率无关
使用适口标签, 使移动端网页的宽度和设备宽度(逻辑分辨率)相同
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- 适口: 显示HTML网页的区域 --><!-- 适口标签: 用来约束适口的标签 --><!-- 属性: viewport: 视口width=device-width: 视口宽度=设备宽度initial-scale=1.0: 缩放1倍(不缩放)--><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div>hello</div>
</body></html>
二倍图
设计师的设计图一般都是750px的图(也就是苹果6/7/8的物理分辨率), 称为二倍图
- 如果设计图是375px, 更方便我们写代码, 因为代码要按照设备的逻辑分辨率设置元素尺寸
- 但是375px的图放在750px的屏幕上显示, 效果是不好的,会模糊失真
- 为了保证显示效果, 设计稿都是按照物理分辨率(750px)设计
- 在H5中二倍图最多, App中, 有可能会遇到多倍图
能够使用像素大厨软件测量二倍图中元素的尺寸
- 拿到移动端设计稿之后, 我们把设计稿拖到像素大厨, 然后在开发模式里, 把设计稿选项里的1x改成2x,
- 然后再测量尺寸, 这个尺寸就是写代码的尺寸
百分比布局
百分比布局也叫流式布局,
- 就是宽度自适应(百分比单位), 高度固定(像素单位)
- 代码示例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>京东</title><style>* {margin: 0;padding: 0;}li {list-style: none;}.toolbar {position: fixed;left: 0;bottom: 0;/* 百分比布局 流式布局 */width: 100%;height: 50px;background-color: pink;border-top: 1px solid #ccc;}.toolbar li img {height: 100%;}.toolbar li {float: left;width: 20%;height: 50px;}</style>
</head><body><div class="toolbar"><ul><li><a href="#"><img src="./images/index.png" alt=""></a></li><li><a href="#"><img src="./images/classify.png" alt=""></a></li><li><a href="#"><img src="./images/jd.png" alt=""></a></li><li><a href="#"><img src="./images/car.png" alt=""></a></li><li><a href="#"><img src="./images/login.png" alt=""></a></li></ul></div>
</body></html>
随着技术发展,行业要求也越高,现在也要求高度自适应.
