[CSS3]百分比布局

移动端特点

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>