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实现水平垂直居中效果的方法
Mar 10 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 HTML / CSS
简单聊聊H5的pushState与replaceState的用法
Apr 03 HTML / CSS
W3C公布最新的HTML5标准草案
Oct 17 HTML / CSS
HTMl5的存储方式sessionStorage和localStorage详解
Mar 18 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
May 08 HTML / CSS
HTML5 embed标签定义和用法详解
May 09 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
Feb 14 HTML / CSS
利用三角函数在canvas上画虚线的方法
Jan 11 HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
Sep 09 HTML / CSS
详解HTML5 Canvas标签及基本使用
Jan 10 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把大写命名转换成下划线分割命名
2015/04/27 PHP
浅谈laravel-admin的sortable和orderby使用问题
2019/10/03 PHP
如何在PHP中使用数组
2020/06/09 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
javascript中的变量是传值还是传址的?
2010/04/19 Javascript
简单几行JS Code实现IE邮件转发新浪微博
2013/07/03 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
jQuery操作基本控件方法实例分析
2015/12/31 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
js操作DOM--添加、删除节点的简单实例
2016/07/08 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
jquery replace方法去空格
2017/05/08 jQuery
vue2.0 实现页面导航提示引导的方法
2018/03/13 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
2019/03/21 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
Django 跨域请求处理的示例代码
2018/05/02 Python
python之消除前缀重命名的方法
2018/10/21 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
Lulu & Georgia官方网站:购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
大学生村官事迹材料
2014/01/21 职场文书
婚礼司仪主持词
2014/03/14 职场文书
购房意向书范本
2014/04/01 职场文书
疾病防治方案
2014/05/31 职场文书
2014年征兵标语
2014/06/20 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
广播体操比赛主持词
2015/06/29 职场文书
开学随笔
2015/08/15 职场文书
环保建议书作文400字
2015/09/14 职场文书
解决jupyter notebook图片显示模糊和保存清晰图片的操作
2021/04/24 Python
vue使用echarts实现折线图
2022/03/21 Vue.js