开发者学堂课程【移动 Web 前端开发：首页-头部搜索 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8496
首页-头部搜索
内容介绍
一、外部整体构架
二、内部布局
一、外部整体构架
如何让固定版心在某一个范围内达到自适应。首先 .sn_layout 中设置宽度为%100，最大不超过750px，最小不超过320px，这样版心就有了最大宽度最小宽度的限制，此处并没有用 rem 换算，因为是固定的750px，320px，代替没有意义，此时再设置一个高度，背景颜色运行查看一下，
mdel.less 模块设计如下：
.sn_layout{
width:100%;
max-width:750px;
min-width:320px;
margin:0 auto;
background:red;
height：100px；
}
运行效果：
运行结果发现文本不顶栏，所以还要向：：after 中设置一下 margin，padding，
mdel.less 模块代码如下：
*，：：before，：：after{
margin：0；
padding：0；
box-sizing：border-box；
-webkit-box-sizing：border-box；
}
观察头部内容有，分类，购物车，中间有块内容，内容里面有对话框，再里面有提示还有搜索的图标，
如图：
头部搜索中首先 标签创建 icon_category 分类和 icon_cart 购物车，
再在其中创建表单 input 类型为 search，然后切换设备视图将 Screen 切 换成750，此时页面大小和设计稿一样，
然后通过这个设计稿调取标尺去量取底部宽高度，对于宽度肯定使用%100比 rem 更准确，而高度需要去换算，
所以 width 为100%，height不能为 90px，因为现在的适配方案都是基于750来的，而且给定的基准值是100，height 应该是 90px/@baseSize,此时可以刷新页面在 style 中查看到 height 为 0.9px，再加上 rem 为 90rem/@baseSize，如果此时不拼在一块会报错，所以还是使用 90/100rem, 然后再将背景颜色换为苏宁黄，刷新页面可查看到效果。
如下：
index.html 代码设计：
cheader class="sn_ search"
mdel.less 模块代码：
…
.sn_search{
width:100%;
height:90/100rem;
background:@snColor;
}
运行效果如下：
因为两边分类购物车模块都是正方形，所以在 model 中添加 a 样式，宽为90/100rem，高为 90/100rem，定义一个绝对定位，
top值为0，设置两头 category 和 cart 向两边走，这样布局就做好了，然后设置from 标签，将 width 设置成%100，padding 设置成上下为0，左右为90/100rem，
此时下面还有一个 input，将 width 设置%100，发现用 rem 做适配的时候还是离不开流式，流式是一种布局方式，而 rem 是使自身内容达到一种适配的方案。还有一个 search 的样式与 input 平齐的。现在大体布局就设置好了，mdel.less 模块内容如下：
.sn_layout{
width:100%;
max-width:750px;
min-width:320px;
margin:0 auto;
background:red;
}
//头部搜索
.sn_ search{
width: 100%;
height: 90/100rem;
background: @snColor;
position: relative;
a{
width: 90/10erem;
height: 90/100rem;
position: absolute;
top: 0;
&.icon. category{
left: 0;
}
&.icon_ cart{
right: 0;
form{
width: 100%;
padding: 0 90/100rem;
.icon_ search{
}
input{
width: 100%;
}
}}
运行效果为：
二、内部布局
接下来开始内部布局，内部布局首先要把左右两个按钮放上去，a 现在是有了，但是每一个 a 对于的背景不一样，这里先放入 category 图片，大小为44×70，正常理论上要把他缩小一倍，但是现在不是流式布局方案，所以应该用rem来做，在使用44×70图片时要转化成 rem0.44和0.7，转化之后如果切换到375就缩小一半，图也跟着缩小一半，基准值变了 rem 也会改变，原来是100的基准值，现在变成50，这样也是压缩了。
第一张图大小定义在 center 正中心，url 引入图片地址，属性不重复出现，背景大小，而背景大小要固定死，如果不是的话，在网页缩小的时候背景图片大小不变会显示不全，所以要通过 rem 设置图片宽高大小，如44/100rem,70/100rem。
就是 rem 换算大小，当以100为基准换算使用375px 的设备查看时 44×70的图片大小会变为22×35的尺寸，此时基准值也改变为50。其他的背景图同理，最终效果要随着页面缩小图片也进行压缩。model 中增加代码如下：
…
&.icon. category{
left: 0;
background: url(" ../ images/icon. category.png") no-repeat center / 44/ 100rem 70/ 100rem;
}
&.icon_ cart{
right: 0;
background: ur1(" ../images/icon cart . png") no-repeat center / 63/100rem 68/100rem ;
…
运行效果如下：
可以发现任何涉及 px 的地方都可以通过 rem 进行换算，包括定位也可以，用 rem 做定位图的话根据 rem 换算就行。
不管是 psd 测量还是正常比例测量，量完之后都要转化成 rem 尺寸，适配方案准备好了只需要知道背景图片尺寸通过基准值换算就行，与其他无关。
接下来测量提示框高度为60，文字大小为24，框的四个角为圆角，都要转换成rem，受 rem 控制，顶部距离是15，取消边框属性，背景颜色设置为白色，羽化度为0.6，谷歌最小只能显示12px，所以看不到效果，放在火狐上可以看到。
再增加代码 outline 边框属性为 none，最后搜索图标 .icon_ search，url引入图片地址，假设高30宽30都要转化成 rem，所以距顶部距离为 30/100rem，不影响图片大小为27，28。
设置为绝对定位，总共提示框为 90px，图片大小为27px×28px，而且要居左居中，转化成 rem 为 27/100rem，28/100rem，中 model 增加代码如下：
…
form{
width: 100%;
padding: 0 90/100rem;
.icon_ search{
width: 30/100rem ;
height: 30/100rem;
position: absolute ;
1eft: 1rem;
top: 30/ 100rem;
background: url(" .. /images/icon_ search.png")no-repeat center /27/100rem 28/100rem ;
}
input{
width: 100%;
height: 60/ 100rem;
margin-top: 15/100rem;
border: none;
background: rgba(255, 255,255,0.6);
border - radius: 6/100rem;
font-size: 24/100rem;
outline: none;
padding-left: 50/ 100rem;
}
}}
最终运行结果：
网页内容随着窗口的放大缩小等比例不变。
