移动端

Icarrot
159 阅读4分钟

移动端

  • 逻辑分辨率 屏幕的宽高 px
  • 设备分辨率 屏幕中一共拥有的物理像素点的个数
    • 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。
  • PPI 单位英寸内的物理像素点个数，值越大，屏幕越清晰
  • 设备像素比 设备分辨率和逻辑分辨率的比例，可以理解为屏幕的清晰度的倍数
  • 好的影像质量搭配好的设备才是最清晰的

多倍图

  1. 前端需要解决的问题

    1. 一套代码：可以自动识别当前设备屏幕的清晰度，自动加载对应清晰度的图片

  2. 美工给三张图片 1倍 2倍 3倍 3. srcset属性可以自动识别并加载对应清晰度图片

    <img srcset="./images/1.jpg 1x, ./images/2.jpg 2x, ./images/3.png 3x" />

1647507555281.png

  1. 布局视口：版心980px
  2. 理想视口：1647508438949.png
  3. meta标签（对网页设置语言，设置seo关键字）
    1. name 告诉 meta标签 设置viewport
    2. content 设置视口内容
      1. width = device-width 视口的宽度等于屏幕的宽度
      2. initial-scale=1.0 设置网页打开的时候 缩放的倍数 1.0 没有缩放（通常情况下没有需要缩放网页）
      3. maximum-scale=1 允许缩放，最大缩放的倍数1.0
      4. minimum-scale=1 允许缩放，最小缩放的倍数1.0
      5. user-scalable=no 控制是否允许用户双击手指或者捏合手势缩放网页
        1. no 不允许，不同厂商的浏览器缩放倍数不一样，从而脱离了开发者的控制
        2. 开发者可通过js代码控制缩放动作

移动端布局

移动端 PC端 布局区别

  • pc端

    • 定版心

    • 页面中元素宽高几乎都是用px单位，定死大小

  • 移动端

    • 不用定版心
    • 元素大小常用相对长度单位，百分比单位 rem vw vh, 屏幕越大，元素越大

移动端布局方式

  1. 流式布局：有弊端，不方便
  2. flex布局（弹性）：好用方便，前端必学

flex布局（2w）！important

  1. display: flex;——设置div编程flex盒子，弹性flex（df）

  2. flex盒子

    1. flex盒子称之为父项
    2. 子元素称之为子项

  3. 具体变化

    1. 不再区分块级，行内块；全部都可以设置宽高
    2. 子项
      1. 宽度由内容撑开
      2. 高度等于父项的高度
      3. 使用浮动无效
      4. 使用定位、margin、transform有效
      5. 默认状态下：子项总宽度大于父项的宽度也不会换行！

  4. flex不会换行，只会压缩自身的宽度

  5. 以下情况很重要，需要注意，英文，数字会被认为是整体，中文一个字就是整体，所以加了flex会被换行，需要在li标签加上另外的属性

    white-wrap:space-nowrap;

        <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        div {
            width: 200px;
            overflow-x: auto;
            margin: 100px auto;
        }
        ul {
            list-style: none;
            background-color: red;
            display: flex;
        }
        li {
            padding: 0 10px;
            border: 1px solid #000;
            display: flex;
            justify-content: center;
            align-items: center;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>你好</li>
            <li>你好</li>
            <li>你好</li>
            <li>你好</li>
        </ul>
    </div>
</body>

主轴对齐方式

justify-content（justify：两端对齐）

  1. 左对齐——flex-start
  2. 右对齐——flex-end
  3. 居中对齐——center
  4. 先两侧对齐，再平均分配空间——space-between（sb）
  5. 平均分配空间，不过两边的空间会比中间的空间小——space-around（sd）
  6. 绝对平均——space-evenly（sv）

侧轴-单行对齐

align-items

  1. flex-start——上对齐
  2. flex-end——下对齐
  3. center——垂直居中 aic

侧轴-多行对齐

align-content

  1. 上对齐——flex-start
  2. 下对齐——flex-end
  3. 垂直居中对齐——center
  4. space-between——两侧对齐
  5. space-around——两侧空间比中间空间小
  6. space-evenly（常用）——平均空间

换行属性

flex-wrap

  1. wrap——换行
  2. nowrap——不换行

修改主轴方向

flex-direction

  1. row——默认值，方向没有改变，排列方式从左到右（了解）
  2. row-reverse——方向没有改变，排列从右到左（了解）
  3. column——方向改变，XY轴调换，排列从上到下（常用）——高度由内容撑开，宽度继承父元素
  4. column-reverse——方向改变，排列从下到上（了解）

子项占父项宽高的比例

flex：；

  1. 值为纯数字，1值，（每个子项都占一份）
  2. 主轴方向改变时，则flex属性修改的是子项占父项高度

设置子项自己在侧轴的对齐方式

align-self

  1. flex-start——上对齐
  2. flex-end——下对齐
  3. center——居中对齐

单位

vw, vh

  • vw, vh, 是相对长度单位，相对于屏幕宽高
  • 100vw = 屏幕宽度
  • 100vh = 屏幕高度
  • 作用
    • 移动端的屏幕适配（屏幕越大，元素越大，常用）
  • 算法
    • 1647828500380.png
    • 1647828524943.png

css运算

calc

  • 用在css中
  • 写法
    • width: calc(50vh * 100（设计稿盒子宽度）/ 375（设计稿宽度）)
    • 运算符两边一定要加空格

运算插件

px2vw

  • 设计稿宽度不同，要在扩展设置修改设计稿宽度

rem

  1. rem是相对长度单位，参照的是跟标签 的font-size
  2. 默认 1rem = 16px （谷歌浏览器默认的字体大小是16px）
  3. 如果设置了 font-size: 1px;，会导致各大浏览器展示效果不一，所以通常不需要考虑小于12px的情况
  4. 使用前要先引入flexible.js

rem插件

1647856929433.png

avatar
文章
阅读
粉丝