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动画技术
Jan 01 HTML / CSS
css3进行截取替代js的substring
Sep 02 HTML / CSS
css3实现wifi信号逐渐增强效果实例
Aug 09 HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
Jun 22 HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
Jun 22 HTML / CSS
CSS3 实现发光边框特效
Nov 11 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
Sep 22 HTML / CSS
HTML5学习笔记之History API
Feb 26 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
Sep 21 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 HTML / CSS
canvas实现漂亮的下雨效果的示例
Apr 18 HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
Jul 26 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
fleaphp crud操作之findByField函数的使用方法
2011/04/23 PHP
PHP实现获取域名的方法小结
2014/11/05 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
如何在PHP中生成随机数
2020/06/04 PHP
破除网页鼠标右键被禁用的绝招大全
2006/12/27 Javascript
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
2011/10/19 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
2014/05/08 Javascript
jQuery实现购物车多物品数量的加减+总价计算
2014/06/06 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
vue深入解析之render function code详解
2017/07/18 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
2017/08/02 Javascript
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
对vuex中getters计算过滤操作详解
2019/11/06 Javascript
JQuery表单元素取值赋值方法总结
2020/05/12 jQuery
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
Python查询IP地址归属完整代码
2017/06/21 Python
已安装tensorflow-gpu,但keras无法使用GPU加速的解决
2020/02/07 Python
深入了解Python 变量作用域
2020/07/24 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
Python高并发和多线程有什么关系
2020/11/14 Python
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
西班牙高科技产品购物网站:MejorDeseo
2019/09/08 全球购物
幼儿园教师获奖感言
2014/03/11 职场文书
基督教婚礼主持词
2014/03/14 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
毕业大学生自荐信
2014/06/17 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
开展党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
尼克胡哲观后感
2015/06/08 职场文书
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js
解决Oracle数据库用户密码过期
2022/05/11 Oracle