一、顶部固定定位搜索栏
需求 : 制作如下搜索栏 ;
1、固定定位盒子居中对齐
首先 , 设置固定定位 , 固定定位盒子始终显示在浏览器中指定的位置 , 与父容器或其它容器无关 ;
/* 固定定位盒子始终显示在浏览器中指定的位置...translateX(-50%);
2、设置最大宽度和最小宽度
在移动端网页中 , 一般都要设置一个 最大宽度 和 最小宽度 ;
当浏览器的宽度超过最大宽度 , 则网页布局最大就是该 最大宽度 , 继续放大网页不再随着页面一起放大...: 640px;
3、使用 Flex 弹性布局管理宽度
在搜索框中 , 左侧是搜索栏 , 右侧是搜索按钮 ;
右侧的搜索按钮始终都是 44x44 像素大小 ;
左侧的搜索栏随着网页布局的宽度变化而变化...;
此处 使用 Flex 弹性布局管理宽度 , 右侧的按钮直接设置一个固定大小 , 左侧的搜索框设置 flex: 1; 样式 , 也就是 自动占据剩余空间 ;
Flex 子项目的 flex 样式默认都为...0 , 只要有一个子项目设置了 flex: 1; 样式 , 那么该子项目就会自动占据剩余的所有空间 ;
4、二倍精灵图设置
下图中的 放大镜图片 和 头像图标 都定义在精灵图中 ,
二倍精灵图设置步骤