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 相关文章推荐
详解CSS3伸缩布局盒模型Flex布局
Aug 20 HTML / CSS
CSS3 Flexbox中flex-shrink属性的用法示例介绍
Dec 30 HTML / CSS
CSS中几个与换行有关的属性简明总结
Apr 15 HTML / CSS
用CSS3绘制三角形的简单方法
Jul 17 HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 HTML / CSS
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
May 09 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
Jun 30 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
Jan 04 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
May 08 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
Jun 27 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
Aug 20 HTML / CSS
Html5 webview元素定位工具的实现
Aug 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
php中文本数据翻页(留言本翻页)
2006/10/09 PHP
PHP安装攻略:常见问题解答(一)
2006/10/09 PHP
PHP二维数组的去重问题解析
2011/07/17 PHP
模板引擎正则表达式调试小技巧
2011/07/20 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
php求数组全排列,元素所有组合的方法总结
2017/03/14 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
javascript背投广告代码的完善
2008/04/08 Javascript
javascript String 对象
2008/04/25 Javascript
ExtJs中gridpanel分组后组名排序实例代码
2013/12/02 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
JavaScript实现对下拉列表值进行排序的方法
2015/07/15 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
javascript 动态样式添加的简单实现
2016/10/11 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
最全的JavaScript开发工具列表 总有一款适合你
2017/06/29 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
Python实现新浪博客备份的方法
2016/04/27 Python
解读python logging模块的使用方法
2018/04/17 Python
pycham查看程序执行的时间方法
2018/11/29 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
生产内勤岗位职责
2013/12/07 职场文书
教导主任竞聘演讲稿
2014/05/16 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
格林童话读书笔记
2015/06/30 职场文书
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python
Java服务调用RestTemplate与HttpClient的使用详解
2022/06/21 Java/Android
volatile保证可见性及重排序方法
2022/08/05 Java/Android