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

柔光的暖阳◎ 2022-08-30 15:59 232阅读 0赞

# 描述 #

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

# 思路一: 流式布局 #

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

## 代码 ##

最终效果:  
![在这里插入图片描述][a6c8d817cc5eee9b614e78d2fe5383ea.png]

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>

效果:  
![在这里插入图片描述][eb98c82889ae43f3b49c7645cbc80900.png]

## 例2 ##

最终效果:  
![在这里插入图片描述][994bce18f41f460eb794b9c84fccba24.png]  
代码:  
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;
    }

[https_m.jd.com]: https://m.jd.com/
[8b2fa5d3ec9a0b2dbc1184ddf8062042.png]: /images/20220829/3d272501b73b43bcaad121bb3e5cc39a.png
[c59121cf573732529254ab37c9e68a6c.png]: /images/20220829/f8f6bd3ebb1d42dab7d93bbd977aa2d3.png
[a6c8d817cc5eee9b614e78d2fe5383ea.png]: /images/20220829/b7bcabb8ce3a43df84138f431e1f732a.png
[eb98c82889ae43f3b49c7645cbc80900.png]: /images/20220829/2a4e470972834afaafa169ce492001eb.png
[994bce18f41f460eb794b9c84fccba24.png]: /images/20220829/6e431386b5d04a73907f01485ed33651.png