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

| 移动端布局

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

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

| 移动端布局

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

介绍

核心思想：不使用固定布局，而是使用百分比
为了保护盒子的内容不因拉伸得过小而挤掉内容，我们需要设置最大 / 最小长度限制
从某种意义上来说，流式布局比web端的简单得多。因为无需精确测量width了，且可以使用CSS3的盒子无需考虑border和padding

图片

示例代码


"en">
    "UTF-8">
    "X-UA-Compatible" content="IE=edge">
    "viewport" content="width=device-width, user-scalable=0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    Document
    
    "box">
        "box1">
        "box2">

应用案例

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

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

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

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

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