Html5页面在手机端做自适配是很常见的技术需求,下面介绍下在html页面使用hotcss,
hotcss不是一个库,也不是一个框架。它是一个移动端布局开发解决方案。
1、新建一个项目文件夹,目录结构如下图:
hotcss.js 文件可以下载官方的,也可以在我GitHub(https://github.com/Grace110/hotcss)上下载整个demo
//pc2rem.scss 页面代码
@function px2rem( $px ){
@return $px*320/$designWidth/20 + rem;
}
但是html是无法直接调用scss文件的,这时我们需要一个 scss文件 实时编译器
我用的是 koala编译器,koala下载地址: http://koala-app.com/index-zh.html
下载安装好后打开koala,选择需要编译的文件夹,然后执行编译,就可以将scss文件实时编译成css文件。
2、正式开始写html页面 和样式
写个简单的html页面,内容如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>hotcss在h5中的使用</title>
<!-- 引入css文件,注意,不是scss -->
<link rel="stylesheet" href="css/style.css">
<!-- 引入hot.scss文件 -->
<script src="js/hotcss.js"></script>
</head>
<body>
<div class="container">
<div class="content">
<p>hotcss在h5中的使用</p>
<ul>
<a href="">
<li>
<span>使用指南</span>
<img src="images/icon_details.png" alt="">
</li>
</a>
</ul>
</div>
</div>
</body>
</html>
接下来写scss 样式
同时打开style.css,可以看到,style.scss文件上的内容会实时编译到style.css'
走到这一步,就已经能够完成了自适应,在浏览器中打开,按f12 即可查看效果
ps:本人职场新人,若有不恰当之处,欢迎指正!