Web移动前端开发-——流式布局

常见的移动端布局方法-流式布局（百分比布局）

我们通过一个 仿 手机端京东首页的布局来巩固和加深我们的学习

核心设置百分比，来适应屏幕变化

1. 我们需要用一个新的属性max-width 和min-width

             100%;
            /*最大允许width* /
            /*最小语序width*/
            /*保证不会有盒子掉下来的问题*/
            max- 980px;
            min- 320px;
            margin: 0 auto;

2. 代码实例：请详见我的github。上面有完整的源码和尽可能详细的笔记，这里只写一些核心的代码块。

注意：我们在移动端页面里面，一般来说是不给ul和li的，我们直接都是给a就完成导航栏的布局了

/*注意，在html结构里面，对于很多小盒子，我们不给链接，后期用js来做就行*/
/*给body指定宽度，里面的盒子继承就可以了，限定足最大最小宽度*/
/*常见演示初始化演示*/
body {
     100%;
    min- 320px;
    max- 640px;
    margin: 0 auto;
    background-color: #fff;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.5;
    color: #666666;
}
    .header{
  /*图片和文字居中对齐*/
    /*一般来说，出现行内块的地方我们都加上一  个vertical-aling:middle,图片就是行内块inline-block*/
    vertical-align: middle;}
    /*盒子居中显示且自适应*/
    .sercah {
    height: 30px;
    background-color: skyblue;
    /*我们这里，没有给宽度，宽度自适应，以便于实现我们想要的自动变大效果*/
    margin: 0 50px;
    margin-top: 7px;
    /*注意出现外边距合并问题，给父级添加overfowl*/
    border-radius: 15px; 
}
    /*注意一下精灵图的缩放方法*/
.sou {
    position: absolute;
    top: 8px;
    left: 50px;
     18px;
    height: 15px;
    background: url(../images/jd-sprites.png) no-repeat -81 0;
    background-size: 200px auto;
}

/*注意一下，如果采取固定定位，你需要给一个宽度，要不然会出问题*/

.search-wrap {
    /* position: relative; */
    position: fixed;
    height: 44px;
     100%;
    /*注意，固定地位的盒子需要给宽*/
    min- 320px;
    max- 640px;
    /* background-color: pink; */
    overflow: hidden;
}
/*去除图片底部缝隙上*/
img {
    /*去除图片底部的缝隙*/
    vertical-align: top;
}