[CSS3]百分比布局

news2025/5/23 2:25:10

移动端特点

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>