在html5中使用hotcss实现手机端自适配

最新推荐文章于 2024-07-19 10:57:26 发布

Ashley的成长之路

最新推荐文章于 2024-07-19 10:57:26 发布

阅读量1.3k

点赞数

分类专栏：前端文章标签： hotcss h5 自适应手机端适配

本文链接：https://blog.csdn.net/weixin_40297452/article/details/91983477

版权

前端专栏收录该内容

44 篇文章 1 订阅

订阅专栏

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：本人职场新人，若有不恰当之处，欢迎指正！

Ashley的成长之路

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
在html5中使用hotcss实现手机端自适配

Html5页面在手机端做自适配是很常见的技术需求，下面介绍下在html页面使用hotcss，hotcss不是一个库，也不是一个框架。它是一个移动端布局开发解决方案。1、新建一个项目文件夹，目录结构如下图:hotcss.js 文件可以下载官方的,也可以在我GitHub（https://github.com/Grace110/hotcss）上下载整个demo//pc2rem.sc...
复制链接

扫一扫