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

    目录

    | 移动端布局

    | 流式布局（百分比布局）

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

    | 移动端布局

     

     

    | 流式布局（百分比布局）

    介绍

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

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

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

    图片

     示例代码

    2. "en">
    4.     "UTF-8">
    5.     "X-UA-Compatible" content="IE=edge">
    6.     "viewport" content="width=device-width, user-scalable=0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    7.     Document
    8.     
    11.     
      "box">
    12.         
      "box1">
    13.         
      "box2">
    14.

    • 应用案例

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

     

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

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

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

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

     

     

  • 相关阅读:
    二、数据仓库详细介绍
    【JavaSE】/*基于Java语言的递归运算*/
    【mybatis基础(一)】mybatis入门案例
    ORB-SLAM2 ---- Initializer::Normalize函数
    DC进阶-多周期约束详解
    MyBatis基本用法 && 什么是自动化测试 && Spring事务和事务传播机制 && 性能测试概念和术语 && Loadrunner安装
    【梳理】第一章 浅谈物体检测与PyTorch
    6. Redis 发布与订阅
    nodejs毕业设计源码中介房屋租赁管理系统
    vue 概述
  • 原文地址：https://blog.csdn.net/m0_57265007/article/details/127949547