html5中如何使用hotcss.js实现手机端自适配

这篇文章将为大家详细讲解有关html5中如何使用hotcss。js实现手机端自适配,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

<强>简介

使用动态的HTML根字体大小和动态的视窗规模。

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

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

src //主要文件在这里
├──hotcss。js
├──px2rem。少
├──px2rem。scss
└──px2rem.styl

2. hotcss。js 文件可以下载官方的,也可以在大神GitHub（https://github.com/Grace110/hotcss）上下载整个demo

注意：

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

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

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

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

 

//pc2rem.scss页面代码

@function  px2rem (, px 美元;){ 　　,,,@return  px * 320/designWidth/20美元,+,快速眼动; 　　} 　　designWidth 美元:750;,//如设计图是750

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

vscode编辑器里面安装插件

<强> 4。编写代码

写个简单的html页面,内容如下

& lt; ! DOCTYPE  html> 　　& lt; html> 　　& lt; head> 　　,,,& lt; meta  charset=癠TF-8"比; 　　,,,& lt; meta  name=皏iewport",内容=翱矶?设备宽度,初始=1,最大范围=1,user-scalable=no"比; 　　,,,& lt; title> hotcss在编辑中的使用& lt;/title> 　　& lt; !——,引入hot.scss文件,,或者把js文件直接复制到这里——比; 　　,,,& lt; https://www.yisu.com/zixun/script  src=" js/hotcss.js "> 　　 　　 　　

　　

　　

hotcss在编辑中的使用

　　

　　

　　身体 　　 　　

html5中如何使用hotcss.js实现手机端自适配