移动端布局实现搜索框宽度自适应

最新推荐文章于 2024-02-28 20:06:15 发布

Charonmomo

最新推荐文章于 2024-02-28 20:06:15 发布

阅读量1.2k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Charonmomo/article/details/118971501

版权

前端专栏收录该内容

56 篇文章 2 订阅

订阅专栏

本文介绍了两种实现移动端页面搜索框在浏览器宽度变化时保持两侧固定、中间自适应的方法。思路一是使用流式布局，通过设置position属性使两侧元素固定，中间元素通过margin实现自适应。思路二是利用Flex布局，中间元素设置flex:1以占据剩余空间，达到自适应效果。这两种方法都能有效实现响应式搜索框设计。

摘要由CSDN通过智能技术生成

描述

例如移动端京东页面 (https://m.jd.com/) 的搜索框布局, 两侧的内容是固定不变的, 当浏览器宽度变化时, 只有中间的搜索框宽度变化.
如何实现这个问题呢?
在这里插入图片描述

思路一: 流式布局

将这行中所有元素的位置都设置为position: fixed 将左右两边的元素设置position: absolu;
并且分别固定在左上角和右上角的位置, 这样两侧的元素就脱离了标准流.
中间的白色区域元素设置左右的margin值 (以及上下的margin), 空出两侧元素的位置. 但因为该元素仍在标准流中, 所以宽度会随着父元素的变化而变化.

代码

最终效果:
在这里插入图片描述

html:

<!-- 搜索区 -->
    <div class="search-box">
        <div class="search-btn"></div>
        <div class="search"></div>
        <div class="login"></div>
    </div>

css:

/* 搜索框 */
.search-box {
    position: fixed;
    top: 45px;
    left: 0;
    width: 100%;
    height: 44px;
    background-color: pink;
}
.search-box .search-btn{
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 44px;
    background-color: blue;
}
.search-box .search {
    height: 30px;
    margin: 7px 50px;
    background-color: #fff;
}
.search-box .login{
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 44px;
    background-color: blue;
}

思路二: flex布局

例1

父元素设置flex布局
在子元素中, 中间位置的元素利用flex: 1 实现宽度自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: o;
            padding: 0;
        }
        section {
            display: flex;
            width: 60%;
            height: 80px;
            margin: 50px auto;
            background-color: pink;
        }
        section div:nth-child(1), section div:nth-child(3){
            width: 80px;
            height: 80px;
            background-color: green;
        }
        section div:nth-child(2){
            flex: 1;
            height: 80px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>
</html>

效果:
在这里插入图片描述

例2

最终效果:
在这里插入图片描述
代码:
html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>携程旅行-酒店预订,机票预订查询,旅游度假,商旅管理-携程无线官网</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- 搜索框区域 -->
    <div class="search-index">
        <div class="search"></div>
        <div class="login"></div>
    </div>
    <!-- 搜索框结束 -->
</body>
</html>

index.css:

/* 初始化样式 */
body {
	max-width: 540px;
	min-width: 320px;
	margin: 0 auto;
	font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft	Yahei",STXihei,hei;
	color: #000;
	background: #f2f2f2;
	overflow-x: hidden;
	-webkit-tap-highlight-color: transparent;
}
ul,li {
  list-style: none;
  padding: 0;
  margin: 0;
}
a {
  color: #222;
  text-decoration: none;
}
h1,h2,h3,h4,h5,h5 {
  margin: 0;
  padding: 0;
}
/*点击高亮我们需要清除清除 设置为transparent 完成透明*/
*{
  -webkit-tap-highlight-color: transparent;
}
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
input{
  -webkit-appearance: none;
}
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }

/* 搜索框区域 */
.search-index {
  width: 100%;
  height: 44px;
  display: flex;
  padding-left: 12px;
  box-sizing: border-box;
  background-color: pink;
  align-items: center;
}
.search-index .search {
  flex: 1;
  height: 28px;
  padding: 2px 5px;
  border-radius: 16px;
  box-sizing: border-box;
  background-color: #fff;
}
.search-index .login {
  width: 51px;
  height: 44px;
  padding-right: 4px;
  background-color: skyblue;
}