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

下面我将详细讲解使用HotCSS.js实现手机端自适应的步骤。

1. 引入HotCSS.js文件

首先需要在html文档中引入HotCSS.js文件，可以下载并引入本地文件，也可以通过CDN方式引入。代码如下：

<script src="https://cdn.jsdelivr.net/npm/hotcss@1.1.0/hotcss.min.js"></script>

2. 设置Viewport

接着，在页面头部需要设置viewport，使网页能够正确的进行缩放。代码如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

3. 设置REM基准值

HotCSS.js是使用REM来进行手机端适配的。所以，我们需要使用一个REM基准值，这个值是相对于html根元素的字体大小。我们可以设置1rem等于多少像素，通常情况下，我们设置成10px或者16px比较合适。代码如下：

hotcss.designWidth = 750;
hotcss.fontSize = 100; //假设我们设置1rem等于100px

上面的代码中，hotcss.designWidth表示设计稿的宽度，我们将设计稿的宽度设置成750px，也就是iPhone6的屏幕宽度。hotcss.fontSize表示我们设置1rem等于多少像素，我们设置成100px。

4. 使用REM布局

现在我们已经设置好REM基准值，接下来我们需要进行REM布局，也就是将所有的尺寸都使用REM作为单位。代码如下：

body {
  font-size: .28rem;
  border: 1px solid #ddd;
  padding: .4rem;
}

h1 {
  font-size: .5rem;
  margin-bottom: .5rem;
}

p {
  font-size: .28rem;
  line-height: .5rem;
  margin-bottom: .3rem;
}

在上面的代码中，我们将body的字体大小设置成.28rem，h1的字体大小设置成.5rem。这样，不管在哪种分辨率下，这些元素的大小都会按照我们设置的样式来显示。

示例1：对话框自适应

下面，我提供一个例子，使用HotCSS实现对话框自适应。代码如下：

HTML：

<div class="dialog">
  <div class="dialog-inner">
    <h1 class="dialog-title">标题</h1>
    <p>这是对话框的内容。</p>
    <button class="dialog-close">关闭</button>
  </div>
</div>

CSS：

.dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
}

.dialog-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: .4rem;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: .1rem;
}

.dialog-title {
  font-size: .44rem;
  text-align: center;
  margin-top: 0;
}

.dialog p {
  font-size: .32rem;
  margin: .3rem 0;
  text-align: center;
}

.dialog button {
  display: block;
  width: 100%;
  font-size: .32rem;
  padding: .3rem;
  background: #fff;
  border: none;
  border-top: 1px solid #ddd;
  color: #00a0e9;
  border-radius: 0 0 .1rem .1rem;
}

JavaScript：

$(function() {
  var $dialog = $('.dialog');
  var $btnClose = $dialog.find('.dialog-close');

  $btnClose.click(function() {
    $dialog.hide();
  });

  $(window).resize(function() {
    hotcss.setRootFontSize();
    $dialog.show(); // 防止缩放后对话框跑到屏幕外面去了
    var dialogWidth = $dialog.width();
    var dialogHeight = $dialog.height();
    $dialog.find('.dialog-inner').css({
      'width': dialogWidth / hotcss.px2remRatio + 'rem',
      'height': dialogHeight / hotcss.px2remRatio + 'rem'
    });
  });

  $(window).resize();
});

在这个例子中，我们使用REM单位实现了对话框的自适应。每当窗口大小发生变化时，我们都会重新计算对话框的宽度和高度，并将其转换成REM单位。

示例2：响应式图片

接下来，我提供另外一个例子，演示如何使用HotCSS.js实现响应式图片。代码如下：

HTML：

<div class="post">
  <h1 class="post-title">这是一篇文章</h1>
  <div class="post-image">
    <img src="https://placehold.it/600x400" alt="">
  </div>
  <div class="post-content">
    <p>这是一篇文章的内容。</p>
  </div>
</div>

CSS：

.post {
  margin: 1rem;
  padding: .5rem;
  background: #fff;
  border-radius: .1rem;
}

.post-title {
  font-size: .44rem;
  text-align: center;
  margin-bottom: .5rem;
}

.post-image {
  text-align: center;
}

.post-image img {
  width: 100%;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

在这个例子中，我们使用了REM单位来设置文章的标题和内容的字体大小。图片使用了百分比的宽度，这样就可以根据屏幕宽度自适应。

结语

以上就是使用HotCSS.js实现手机端自适应的完整攻略，希望对你有所帮助。