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


Posted in HTML / CSS onApril 23, 2020

Html5页面在手机端做自适配是很常见的技术需求,下面介绍下在html页面使用hotcss

简介

使用动态的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的内容以内嵌的方式写到<head>标签里面进行加载,并且保证在其他js文件之前。

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

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

<script>(function(window,document){var hotcss={};(function(){var viewportEl=document.querySelector('meta[name="viewport"]'),hotcssEl=document.querySelector('meta[name="hotcss"]'),dpr=window.devicePixelRatio||1,maxWidth=540,designWidth=0;dpr=dpr>=3?3:dpr>=2?2:1;if(hotcssEl){var hotcssCon=hotcssEl.getAttribute("content");if(hotcssCon){var initialDprMatch=hotcssCon.match(/initial\-dpr=([\d\.]+)/);if(initialDprMatch){dpr=parseFloat(initialDprMatch[1])}var maxWidthMatch=hotcssCon.match(/max\-width=([\d\.]+)/);if(maxWidthMatch){maxWidth=parseFloat(maxWidthMatch[1])}var designWidthMatch=hotcssCon.match(/design\-width=([\d\.]+)/);if(designWidthMatch){designWidth=parseFloat(designWidthMatch[1])}}}document.documentElement.setAttribute("data-dpr",dpr);hotcss.dpr=dpr;document.documentElement.setAttribute("max-width",maxWidth);hotcss.maxWidth=maxWidth;if(designWidth){document.documentElement.setAttribute("design-width",designWidth);hotcss.designWidth=designWidth}var scale=1/dpr,content="width=device-width, initial-scale="+scale+", minimum-scale="+scale+", maximum-scale="+scale+", user-scalable=no";if(viewportEl){viewportEl.setAttribute("content",content)}else{viewportEl=document.createElement("meta");viewportEl.setAttribute("name","viewport");viewportEl.setAttribute("content",content);document.head.appendChild(viewportEl)}})();hotcss.px2rem=function(px,designWidth){if(!designWidth){designWidth=parseInt(hotcss.designWidth,10)}return(parseInt(px,10)*320)/designWidth/20};hotcss.rem2px=function(rem,designWidth){if(!designWidth){designWidth=parseInt(hotcss.designWidth,10)}return(rem*20*designWidth)/320};hotcss.mresize=function(){var innerWidth=document.documentElement.getBoundingClientRect().width||window.innerWidth;if(hotcss.maxWidth&&innerWidth/hotcss.dpr>hotcss.maxWidth){innerWidth=hotcss.maxWidth*hotcss.dpr}if(!innerWidth){return false}document.documentElement.style.fontSize=(innerWidth*20)/320+"px";hotcss.callback&&hotcss.callback()};hotcss.mresize();window.addEventListener("resize",function(){clearTimeout(hotcss.tid);hotcss.tid=setTimeout(hotcss.mresize,33)},false);window.addEventListener("load",hotcss.mresize,false);setTimeout(function(){hotcss.mresize()},333);window.hotcss=hotcss})(window,document);</script>
 

//pc2rem.scss 页面代码

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

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

vscode 编辑器里面安装插件

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

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" href="css/style.css"> 
</head>
<body>
    <div class="container">
        <div class="content">
            <p>hotcss在h5中的使用</p>
        </div>
    </div>
</body>
 
</html>

接下来写scss 样式

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

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

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

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

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

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

HTML / CSS 相关文章推荐
HTML+CSS3 模仿Windows7 桌面效果
Jun 17 HTML / CSS
纯CSS3实现绘制各种图形实现代码详细整理
Dec 26 HTML / CSS
实例讲解使用CSS实现多边框和透明边框的方法
Sep 08 HTML / CSS
CSS3实现时间轴效果
Jul 11 HTML / CSS
详解HTML5通讯录获取指定多个人的信息
Dec 20 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
Jul 17 HTML / CSS
HTML5本地存储之Database Storage应用介绍
Jan 06 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
Jul 11 HTML / CSS
HTML5打开手机扫码功能及优缺点
Nov 27 HTML / CSS
吃透移动端 Html5 响应式布局
Dec 16 HTML / CSS
使用canvas压缩图片上传的方法示例
Feb 07 HTML / CSS
CSS3 制作的彩虹按钮样式
Apr 11 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
Apr 20 #HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 #HTML / CSS
HTML中meta标签及Keywords
Apr 15 #HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
Apr 15 #HTML / CSS
html5移动端自适应布局的实现
Apr 15 #HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
Apr 14 #HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
Apr 14 #HTML / CSS
You might like
php中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
codeigniter数据库操作函数汇总
2014/06/12 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
php操作mongodb封装类与用法实例
2018/09/01 PHP
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
浅谈JavaScript中的对象及Promise对象的实现
2015/11/15 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
Angular2使用jQuery的方法教程
2017/05/28 jQuery
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
详解JavaScript的BUG和错误
2018/05/07 Javascript
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
详解微信小程序开发之formId使用(模板消息)
2019/08/27 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
基于Django与ajax之间的json传输方法
2018/05/29 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
Python3.7 读取 mp3 音频文件生成波形图效果
2019/11/05 Python
Python实现像awk一样分割字符串
2020/09/15 Python
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
新西兰网上购物,折扣店:BestDeals.co.nz
2019/03/20 全球购物
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
启动一个线程是用run()还是start()
2016/12/25 面试题
自荐信格式技巧有哪些呢
2013/11/19 职场文书
团结演讲稿范文
2014/05/23 职场文书
综合办公室岗位职责
2015/04/11 职场文书
银行稽核岗位职责
2015/04/13 职场文书
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
简述Java中throw-throws异常抛出
2021/08/07 Java/Android
单机多实例部署 MySQL8.0.20
2022/05/15 MySQL