关于H5页面开发适配指南

作者：Rain雨露Dew | 来源：互联网 | 2023-05-16 21:29

说明：本人习惯性的直接上代码，不想用太多的文字去表述一、html页面<!DOCTYPEhtml><html><head>

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

一、`html页面`


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
    <script type="text/Javascript">
 var dpr, rem, scale;
 //人为给头部添加一个meta标签
 document.write('')
 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', 'hljs-string">',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);
  }
}

三、说明

在less文件中有两个方法px2rem和px2px的使用情况
- 1、关于盒子大小、图片大小都是用px2rem方法
- 2、字体大小与padding，margin,定位用的right都是用px2px

推荐阅读

copy
Nginx使用（server参数配置）

本文介绍了Nginx的使用，重点讲解了server参数配置，包括端口号、主机名、根目录等内容。同时，还介绍了Nginx的反向代理功能。 ... [详细]

蜡笔小新 2023-12-14 17:08:34
config
VScode格式化文档换行或不换行的设置方法

本文介绍了在VScode中设置格式化文档换行或不换行的方法，包括使用插件和修改settings.json文件的内容。详细步骤为：找到settings.json文件，将其中的代码替换为指定的代码。 ... [详细]

蜡笔小新 2023-12-14 17:15:38
main
猜字母游戏

猜字母游戏猜字母游戏——设计数据结构猜字母游戏——设计程序结构猜字母游戏——实现字母生成方法猜字母游戏——实现字母检测方法猜字母游戏——实现主方法1猜字母游戏——设计数据结构1.1 ... [详细]

蜡笔小新 2023-12-13 12:04:03
char
PHPMailer邮件类邮件发送功能的使用教学及注意事项

本文介绍了使用国外开源码PHPMailer邮件类实现邮件发送功能的简单教学，同时提供了一些注意事项。文章涵盖了字符集设置、发送HTML格式邮件、群发邮件以及避免类的重定义等方面的内容。此外，还提供了一些与PHP相关的资源和服务，如传奇手游游戏源码下载、vscode字体调整、数据恢复、Ubuntu实验环境搭建、北京爬虫市场、进阶PHP和SEO人员需注意的内容。 ... [详细]

蜡笔小新 2023-12-13 11:56:08
list
eclipse学习（第三章：ssh中的Hibernate）——11.Hibernate的缓存（2级缓存，get和load）

本文介绍了eclipse学习中的第三章内容，主要讲解了ssh中的Hibernate的缓存，包括2级缓存和get方法、load方法的区别。文章还涉及了项目实践和相关知识点的讲解。 ... [详细]

蜡笔小新 2023-12-14 00:31:35
main
关于cuowu类的错误提示和使用AdjustmentListener的问题

本文讨论了一个关于cuowu类的问题，作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案，并给出了两个可能导致错误的原因。 ... [详细]

蜡笔小新 2023-12-13 22:09:56
main
基于事件驱动的并发编程及其消息通信机制的同步与异步、阻塞与非阻塞、IO模型的分类

本文介绍了基于事件驱动的并发编程中的消息通信机制，包括同步和异步的概念及其区别，阻塞和非阻塞的状态，以及IO模型的分类。同步阻塞IO、同步非阻塞IO、异步阻塞IO和异步非阻塞IO等不同的IO模型被详细解释。这些概念和模型对于理解并发编程中的消息通信和IO操作具有重要意义。 ... [详细]

蜡笔小新 2023-12-13 19:32:09
char
Java String与StringBuffer的区别及其应用场景

本文主要介绍了Java中String和StringBuffer的区别，String是不可变的，而StringBuffer是可变的。StringBuffer在进行字符串处理时不生成新的对象，内存使用上要优于String类。因此，在需要频繁对字符串进行修改的情况下，使用StringBuffer更加适合。同时，文章还介绍了String和StringBuffer的应用场景。 ... [详细]

蜡笔小新 2023-12-13 19:21:06
config
Linux下Perl的安装及第一个程序运行

本文介绍了在Linux下安装Perl的步骤，并提供了一个简单的Perl程序示例。同时，还展示了运行该程序的结果。 ... [详细]

蜡笔小新 2023-12-13 18:29:11
controller
后台获取视图对应的字符串

1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注：不会执行对应的ac ... [详细]

蜡笔小新 2023-12-13 18:03:01
js
《数据结构》学习笔记3——串匹配算法性能评估

本文主要讨论串匹配算法的性能评估，包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库，可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n)，通过随机取出长度为m的子串作为模式P，在文本T中进行匹配，统计平均复杂度。对于成功和失败的匹配分别进行测试，分析其平均复杂度。详情请参考相关学习资源。 ... [详细]

蜡笔小新 2023-12-13 16:16:05
list
Vue项目中结合Element UI解决连续上传多张图片及图片编辑问题

本文介绍了在Vue项目中如何结合Element UI解决连续上传多张图片及图片编辑的问题。作者强调了在编码前要明确需求和所需要的结果，并详细描述了自己的代码实现过程。 ... [详细]

蜡笔小新 2023-12-13 13:42:30
list
解决IE678伪类不兼容问题的方法

本文介绍了解决IE678伪类不兼容问题的方法，包括少用CSS3和HTML5独有的属性，使用CSS hacker，使用last-child清除浮动、批量添加标签、去掉list item最后一个的border-right等技巧。同时还介绍了使用after清除浮动时加上IE独有属性zoom:1的处理方法。另外，本文还提到可以使用jQuery代替批量添加标签的功能，以及使用负边距和CSS2选择器element+element去掉list item最后一个的border-right的方法。 ... [详细]

蜡笔小新 2023-12-13 10:50:43
get
Android 7自学笔记总结、移动架构视频、安卓面试真题、项目实战源码讲义

本文介绍了Android 7的学习笔记总结，包括最新的移动架构视频、大厂安卓面试真题和项目实战源码讲义。同时还分享了开源的完整内容，并提醒读者在使用FileProvider适配时要注意不同模块的AndroidManfiest.xml中配置的xml文件名必须不同，否则会出现问题。 ... [详细]

蜡笔小新 2023-12-13 10:06:58
get
Java项目管理工具及配置教程推荐

本文介绍了一些Java开发项目管理工具及其配置教程，包括团队协同工具worktil，版本管理工具GitLab，自动化构建工具Jenkins，项目管理工具Maven和Maven私服Nexus，以及Mybatis的安装和代码自动生成工具。提供了相关链接供读者参考。 ... [详细]

蜡笔小新 2023-12-13 06:45:16