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 相关文章推荐
详解CSS样式中的 !important * _ 符号
Mar 09 HTML / CSS
详解CSS3中Media Queries的相关使用
Jul 17 HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
Sep 18 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
Aug 04 HTML / CSS
HTML5 Canvas像素处理使用接口介绍
Dec 02 HTML / CSS
HTML文本属性&amp;颜色控制属性的实现
Dec 17 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
Sep 15 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 HTML / CSS
详解CSS伪元素的妙用单标签之美
May 25 HTML / CSS
css height属性中的calc方法详解
Jun 03 HTML / CSS
html原生table实现合并单元格以及合并表头的示例代码
May 07 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
解析link_mysql的php版
2013/06/30 PHP
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
php实现最简单的MVC框架实例教程
2014/09/08 PHP
php简单判断两个字符串是否相等的方法
2015/07/13 PHP
php报错502badgateway解决方法
2019/10/11 PHP
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
在JavaScript中重写jQuery对象的方法实例教程
2014/08/25 Javascript
jQuery带箭头提示框tooltips插件集锦
2014/11/17 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
JS实现字符串转日期并比较大小实例分析
2015/12/09 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
2016/01/18 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
2016/12/24 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
用Python编写一个基于终端的实现翻译的脚本
2015/04/24 Python
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
深入了解NumPy 高级索引
2020/07/24 Python
浅析python 通⽤爬⾍和聚焦爬⾍
2020/09/28 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
Chemist Warehouse中文网:澳洲连锁大药房
2021/02/05 全球购物
成语的广告词
2014/03/19 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书
四年级作文之说明文作文
2019/10/14 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers
详解JS ES6编码规范
2021/05/07 Javascript
JavaScript实现简单计时器
2021/06/22 Javascript
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
2021/11/27 Vue.js
MySQL创建管理HASH分区
2022/04/13 MySQL