html5中使用hotcss.js实现手机端自适配的方法

HTML5页面在手机端做自适配是很常见的技术需求，下面介绍下在ht ML 页面使用hotcss

简介

使用动态的HTML根字体大小和动态的viewport scale。

遵循视觉一致性原则。在不同大小的屏幕和不同的设备像素密度下，让你的页面看起来是一样的。

1.新建一个项目文件夹，目录结构如下图:

src&nbs p; //主要文件在这里
├── hotcss.js
├── px2rem.less
├── px2rem.scss
└── px2rem.styl

2.hotcss.js 文件可以下载官方的,也可以在大神G IT H ub （https://github .COM /Grace110/hotcss）上下载整个demo

注意：

hotcss.js必须在其他JS加载前加载，万不可异步加载。

如果可以，你应将hotcss.js的内容以内嵌的方式写到<head>标签里面进行加载，并且保证在其他js文件之前。

为了避免不必要的bug，请将CSS放到该JS之前加载。

hotcss.js也可以直接复制到<head>标签里面

//pc2rem.scss 页面代码

@function px2rem( $px ){
    @return $px*320/$designWidth/20 + rem;
}
$designWidth : 750; //如设计图是750

3.但是html是无法直接调用scss文件的，这时我们需要一个 scss文件实时编译器

vscode 编辑器里面安装插件

4.编写代码

写个简单的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>
<!-- 引入hot.scss文件 ， 或者 把js文件直接复制到这里-->
    <script src="js/hotcss.js"></script>
    <!-- 引入css文件，注意，不是scss -->
    <link rel="stylesheet"  hr ef="css/style.css"> 
</head>
<body>
    <div class="cont ai ner">
        <div class="content">
            <p>hotcss在h5中的使用</p>
        </div>
    </div>
</body>
 
</html>

接下来写scss 样式

同时打开style.css,可以看到，style.scss文件上的内容会实时编译到style.css'

走到这一步，就已经能够完成了自适应，在浏览器中打开

到此这篇关于html5中使用hotcss.js实现手机端自适配的文章就介绍到这了,更多相关html5 hotcss.js 手机端自适配内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

总结

以上是为你收集整理的 html5中使用hotcss.js实现手机端自适配的方法全部内容，希望文章能够帮你解决 html5中使用hotcss.js实现手机端自适配的方法所遇到的问题。

如果觉得网站内容还不错，推荐好友。

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did205966

更新时间：2023-05-03 阅读：17次