移动Web——移动适配

news2024/12/26 11:21:37

移动适配

当屏幕宽度变化了，网页元素的宽高都要等比例变化，而且像间距、像素、字体等都是等比例变化的

移动适配方案

1、谷歌模拟器

2、屏幕分辨率

屏幕分辨率：纵横向上的像素点数，单位是px

pc分辨率：

1920*1080
1366*768
…

缩放150%

1920 / 150%
1080 / 150%

总结

硬件分辨率——物理分辨率（出厂设置）
缩放调节的分辨率 ---> 逻辑分辨率（软件/驱动设置）

3、视口

手机屏幕尺寸不同，网页宽度均为100%
网页的宽度和逻辑分辨率尺寸相同

视口：显示HTML网页的区域，用来约束HTML尺寸

width=device-width：视口宽度 = 设备宽度

initial-scale = 1.0：缩放1倍（不缩放）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 视口标签：规定HTML的尺寸，让HTML的宽度 = 逻辑分辨率的宽度/设备的宽度 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

4、二倍图

概念：设计稿里面每个元素的尺寸的倍数

作用：防止图片在高分辨率屏幕下模糊失真

现阶段设计稿参考iPhone6/7/8，设备宽度375px产出设计稿。
二倍图设计稿尺寸：750px

5、适配方案

宽度适配：宽度自适应
- 百分比布局
- Flex布局
等比适配：宽高等比缩放
- rem
- vw

<!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;
      }

      .toolbar ul {
        display: flex;
      }

      .toolbar li {
        width: 25%;
        height: 50px;
        text-align: center;
      }

      .toolbar img {
        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/car.png" alt="" /></a>
        </li>
        <li>
          <a href="#"><img src="./images/login.png" alt="" /></a>
        </li>
      </ul>
    </div>
  </body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1430462.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！