常见的移动端布局方法-流式布局(百分比布局)
核心设置百分比,来适应屏幕变化
- 我们需要用一个新的属性max-width 和min-width
width: 100%;
/*最大允许width* /
/*最小语序width*/
/*保证不会有盒子掉下来的问题*/
max-width: 980px;
min-width: 320px;
margin: 0 auto;
代码实例:请详见我的github。上面有完整的源码和尽可能详细的笔记,这里只写一些核心的代码块
注意:我们在移动端页面里面,一般来说是不给ul和li的,我们直接都是给a就完成导航栏的布局了
/*注意,在html结构里面,对于很多小盒子,我们不给链接,后期用js来做就行*/
/*给body指定宽度,里面的盒子继承就可以了,限定足最大最小宽度*/
/*常见演示初始化演示*/
body {
width: 100%;
min-width: 320px;
max-width: 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;
width: 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;
width: 100%;
/*注意,固定地位的盒子需要给宽*/
min-width: 320px;
max-width: 640px;
/* background-color: pink; */
overflow: hidden;
}
/*去除图片底部缝隙上*/
img {
/*去除图片底部的缝隙*/
vertical-align: top;
}