• 【第三部分 | 移动端开发】2:流式布局


    目录

    | 移动端布局

    | 流式布局(百分比布局)

    | 案例:京东搜索页相关知识点


    | 移动端布局

     

     

    | 流式布局(百分比布局)

    介绍

    • 核心思想:不使用固定布局,而是使用百分比

    • 为了保护盒子的内容不因拉伸得过小而挤掉内容,我们需要设置最大 / 最小长度限制

    • 从某种意义上来说,流式布局比web端的简单得多。因为无需精确测量width了,且可以使用CSS3的盒子 无需考虑border和padding

    图片

     示例代码

    1. "en">
    2. "UTF-8">
    3. "X-UA-Compatible" content="IE=edge">
    4. "viewport" content="width=device-width, user-scalable=0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    5. Document
    6. "box">
    7. "box1">
    8. "box2">
  • 应用案例

    如京东页面: 一行放5个盒子。每个盒子的width为20%

     


    | 案例:京东搜索页相关知识点

    • 移动端常用的 max-width 为320px

    • 两边的按钮固定像素。中间的搜索栏用 calc( 100% - 两边按钮的像素大小 ) 即可完成“按钮固定、搜索栏随页面大小而变化” 的效果

    有时候精灵图需要缩放(因为1px在手机端实际为2px。因此需要考虑到缩放问题)。下面给出 物理像素比==2 的手机中的精灵图的处理方法

     

     

  • 相关阅读:
    pm命令给某个应用授权限
    上海亚商投顾:沪指缩量震荡 龙字辈个股掀跌停潮
    1.8寸TFT LCD128X160 ST7735S SPI串口屏驱动示例
    Docker安装EMQX
    Midjourney如何实现人物角色的一致性?
    Cookie、Session、Token、JWT详解
    ubuntu 安装 mysql-5.7.37-linux-glibc2.12-x86_64.tar.gz 报错
    Nginx 配置 HTTPS 过程(+反向代理)
    如何自己开传奇单机架设超详细图文教程
    用好CompletableFuture类,性能起飞
  • 原文地址:https://blog.csdn.net/m0_57265007/article/details/127949547