[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>

</body> </html>

随着技术发展,行业要求也越高,现在也要求高度自适应.