开发者学堂课程【移动 Web 前端开发：首页-结构 avi】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8495
首页-结构 avi
使用适配方案完成首页
通过 ren 达到适配，
rem：基于根元素 html 元素的字体大小来的单位。
less 适配类型结合 rem 达到适配类型，因为用自己写 rem 做维护不方便。js插件能在浏览器直接运行解析，
代码如下：
<link rel=" stylesheet" type= "text/less" href= "less/main.less"/><script src=" assets/less/less. min. js"></script>要先引入一个 less，
再引入 script，通过 js 解析，所以在实际应用中不适用。
接下来利用适配方案完成苏宁页面。
index.html 结构如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" >
<meta name= "Viewport" content= "width=device-width, initial-scale=1.0, user-scalable=e"/>
<title>苏宁-25</title>
<link rel="stylesheet" type="text/less" href="less/main.less"/>
<script src="assets/less/less .min.js"></script>
< /head>
<body>
<!--主体容器->
<div class="sn_ layout">
<!--头部搜索—>
<header class="sn_ search" ></header>
<1--轮播图-->
<div class="sn_ banner"></div>
<!--导航-->
<nav class="sn_ nav"></nav>
<footer class="sn_tabs"></footer>
</div>
<script src="js/index.js"></script>
</body>
</html>
model.less模块代码如下：
@charset "utf-8" ;
// reset css
*,::before, ::after{
box-sizing: border-box;
-webkit-box- sizing: border-box;
}
body{
font-size: 14px;
font- family: ‘Microsoft YaHei' ,sans-serif;;
}
