关于H5页面开发适配指南

最新推荐文章于 2024-08-10 23:05:55 发布

水痕01

最新推荐文章于 2024-08-10 23:05:55 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/kuangshp128/article/details/65438874

版权

html 同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

css3

11 篇文章 0 订阅

订阅专栏

html5

10 篇文章 0 订阅

订阅专栏

说明：本人习惯性的直接上代码，不想用太多的文字去表述

一、`html页面`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        var dpr, rem, scale;
        //人为给头部添加一个meta标签
        document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>')
        var docEl = document.documentElement;
        var fontEl = document.createElement('style');
        var metaEl = document.querySelector('meta[name="viewport"]');
        //获取到设备像素比，如果没有就默认为1
        dpr = window.devicePixelRatio || 1;
        //设置跟节点的字体大小
        rem = docEl.clientWidth * dpr / 10;
        //设置缩放比
        scale = 1 / dpr;
        // 设置viewport，进行缩放，达到高清效果
        metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');

        // 设置data-dpr属性，留作的css hack之用
        docEl.setAttribute('data-dpr', dpr);
        docEl.style.fontSize = rem + 'px';
        docEl.style.width = '100%';
        docEl.style.height = '100%';
        docEl.style.overflow = 'hidden';
        // 动态写入样式
        //docEl.firstElementChild.appendChild(fontEl);
        //fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';

        // 给js调用的，某一dpr下rem和px之间的转换函数(可以不写)
        window.rem2px = function (v) {
            v = parseFloat(v);
            return v * rem;
        };
        window.px2rem = function (v) {
            v = parseFloat(v);
            return v / rem;
        };

        window.dpr = dpr;
        window.rem = rem;
    </script>
    <link rel="stylesheet" href="demo2.css">
</head>
<body>
<div class="app">
    <div class="header">
        <div class="text">你好，我是标题</div>
    </div>
</div>
</body>
</html>

二、`less代码`

@charset "utf-8";
//定义一个px转rem的方法
.px2rem(@name, @px) {
    @{name}: @px / 75 * 1rem;
}

.px2px(@name, @px) {
  @{name}: round(@px / 2) * 1px;
  [data-dpr="2"] & {
      @{name}: @px * 1px;
  }
  // for mx3
  [data-dpr="2.5"] & {
      @{name}: round(@px * 2.5 / 2) * 1px;
  }
  // for 小米note
  [data-dpr="2.75"] & {
      @{name}: round(@px * 2.75 / 2) * 1px;
  }
  [data-dpr="3"] & {
      @{name}: round(@px / 2 * 3) * 1px
  }
  // for 三星note4
  [data-dpr="4"] & {
      @{name}: @px * 2px;
  }
}

* {
  margin: 0;
  padding: 0;
}

.app {
  width: 100%;
  height: auto;
}

.header {
  width: inherit;
  .px2rem(height, 90);
  background: #f90;
  .text{
    .px2rem(height,90);
    .px2rem(width,500);
    .px2px(font-size,30);
    .px2rem(line-height,90);
    .px2px(margin-left,50);
  }
}