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

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

成都创新互联公司专注于夏河企业网站建设,响应式网站建设,成都做商城网站。夏河网站建设公司,为夏河等地区提供建站服务。全流程按需求定制开发,专业设计,全程项目跟踪,成都创新互联公司专业和态度为您提供的服务

简介

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

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

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

src //主要文件在这里
├── hotcss.js
├── px2rem.less
├── 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 + rem;
}
$designWidth : 750; //如设计图是750

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

vscode 编辑器里面安装插件

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

4.编写代码

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




    
    
    hotcss在h6中的使用

    
    
     


    
        
            

hotcss在h6中的使用

        
    
 

接下来写scss 样式

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

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

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

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

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

关于“html5中如何使用hotcss.js实现手机端自适配”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


分享标题:html5中如何使用hotcss.js实现手机端自适配
文章源于:http://bzwzjz.com/article/jdsoec.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 重庆网站制作 移动手机网站制作 网站建设方案 成都网站制作 营销型网站建设 成都网站制作 成都h5网站建设 温江网站设计 成都网站建设 成都营销网站制作 品牌网站建设 成都模版网站建设 定制级高端网站建设 达州网站设计 成都企业网站设计 自适应网站建设 高端定制网站设计 成都网站建设 高端网站设计 手机网站制作 成都商城网站制作 公司网站建设