当前位置: 首页 > news >正文

h5分享页适配手机电脑

实现思路

通过@media媒体查询结合rem继承html文字大小来实现。

快捷插件配置

这里使用了VSCode的px to rem插件。

  1. 先在插件市场搜索cssrem下载插件;
    在这里插入图片描述
  2. 配置插件
    在这里插入图片描述

页面编写流程及适配详情

  1. 配置meta
    h5常用配置信息:
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
    
    在这里插入图片描述2. 公共样式编写
    * {border: 0;-webkit-tap-highlight-color: transparent;outline: 0;margin: 0;padding: 0}*,:after,:before {box-sizing: border-box;}html {/* text-size-adjust 去除根据设备尺寸而自动调整文字大小,将字体大小严格设置为我们定义的大小 *//* text-size-adjust: 100%; 等价于 text-size-adjust: none; *//* 解决在移动设备上如手机和平板横屏会导致字体变大的问题 */text-size-adjust: 100%;/* 默认字体大小 */font-size: 6.06667vw;}body,html {width: 100%;height: 100%;}body {/* 限定浏览器打开的样式,一般来说都是固定页面局域,h5内容居中 */margin: auto;/* 适配手机 *//* 页面宽度小于768px, 超小屏幕(手机) *//* 1.超小屏幕(手机) 768px以下2.小屏设备(平板) 768px-992px3.中等屏幕(旧式电脑) 992px-1200px4.大屏设备(现代电脑) 1200px以上*/max-width: 768px;font-size: .12rem;line-height: 1.5;
    }
    
  2. 通过媒体查询改变页面内容的大小
     /* 根据实际情况来动态修改html的文字大小,实现页面动态缩放 */
    @media only screen and (min-width: 1200px) {html {font-size: 60px !important;}
    }
    

相关文章:

h5分享页适配手机电脑

实现思路 通过media媒体查询结合rem继承html文字大小来实现。 快捷插件配置 这里使用了VSCode的px to rem插件。 先在插件市场搜索cssrem下载插件&#xff1b; 配置插件 页面编写流程及适配详情 配置meta h5常用配置信息:<meta name"viewport" content&quo…...

崭新商业理念:循环购模式的价值引领-微三云门门

尊敬的创业者们&#xff0c;我是微三云门门&#xff0c;今天我将为您详细探讨一种具有颠覆性的商业模式——循环购模式。这套私域流量裂变策略在实际应用中取得了巨大的成功&#xff0c;某些企业在短短6个月内迅速积累了400万用户&#xff01; 循环购商业模式的核心聚焦于三个…...

二级MySQL(二)——编程语言,函数

SQL语言又称为【结构化查询语言】 请使用FLOOR&#xff08;x&#xff09;函数求小于或等于5.6的最大整数 请使用TRUNCATE&#xff08;x&#xff0c;y&#xff09;函数将数字1.98752895保留到小数点后4位 请使用UPPER&#xff08;&#xff09;函数将字符串‘welcome’转化为大写…...

python爬虫12:实战4

python爬虫12&#xff1a;实战4 前言 ​ python实现网络爬虫非常简单&#xff0c;只需要掌握一定的基础知识和一定的库使用技巧即可。本系列目标旨在梳理相关知识点&#xff0c;方便以后复习。 申明 ​ 本系列所涉及的代码仅用于个人研究与讨论&#xff0c;并不会对网站产生不好…...

系列十三、idea创建文件自动生成作者信息

File>Settings>Editor>File and Code Templates>Includes>File Header /*** Author : 一叶浮萍归大海* Date: ${DATE} ${TIME}* Description: */...

spring websocket demo

一 java依赖 gradle 配置 implementation "org.springframework.boot:spring-boot-starter-websocket" implementation "org.springframework.security:spring-security-messaging" 二 配置WebSocketConfig import org.springframework.beans.factory.a…...

C语言的发展及特点

1. C语言的发展历程 C语言作为计算机编程领域的重要里程碑&#xff0c;其发展历程承载着无数开发者的智慧和创新。C语言诞生于20世纪70年代初&#xff0c;由计算机科学家Dennis Ritchie在贝尔实验室首次推出。当时&#xff0c;Ritchie的目标是为Unix操作系统开发一门能够更方便…...

Flink Kubernates Native - 入门

创建 namespace [rootCentOSA flink-1.17.1]# kubectl create ns flink-native [rootCentOSA flink-1.17.1]# kubectl config set-context --current --namespaceflink-native命令空间添加资源限制 [rootCentOSA flink-1.17.1]# vim namespace-ResourceQuota.yamlapiVersion:…...

Ceph入门到精通-大流量10GB/s支持OSPF(ECMP)-LVS 集群

Keepalived-LVS 能够提高集群的高可用性并增加后端检测功能、简化配置&#xff0c;满足常规需求。但Keepalived-LVS集群中&#xff0c;同一个VIP只能由一台设备进行宣告&#xff0c;为一主多备的架构&#xff0c;不能横向拓展集群的性能&#xff0c;为此我们引入OSPF来解决该问…...

IDEA、git如何修改历史提交commit的邮箱

第一种情况&#xff1a;当前提交不是从其他分支clone过来的&#xff1a; step1&#xff1a; git log 查看提交日志&#xff0c;获取commit ID step2&#xff1a; git rebase -i [你的commitID] git rebase -i c2ef237854290051bdcdb50ffbdbb78481d254bb step3&#xff1a;…...

字符设备驱动(内核态用户态内存交互)

前言 内核驱动&#xff1a;运行在内核态的动态模块&#xff0c;遵循内核模块框架接口&#xff0c;更倾向于插件。 应用程序&#xff1a;运行在用户态的进程。 应用程序与内核驱动交互通过既定接口&#xff0c;内核态和用户态访问依然遵循内核既定接口。 环境搭建 系统&#…...

Qt基础 线程池

目录 QThreadPool类 QRunnable类 应用场景示例 QThreadPool类 主要属性&#xff1a; 1、activeThreadCount: 此属性表示线程池中的活动线程数&#xff0c;通过activeThreadCount() 调用。 2、expiryTimeout: 线程活着的时间。没有设置expiryTimeout毫秒的线程会自动退出&am…...

Django(8)-静态资源引用CSS和图片

除了服务端生成的 HTML 以外&#xff0c;网络应用通常需要一些额外的文件——比如图片&#xff0c;脚本和样式表——来帮助渲染网络页面。在 Django 中&#xff0c;我们把这些文件统称为“静态文件”。 我们使用static文件来存放静态资源&#xff0c;django会在每个 INSTALLED…...

C++ list模拟实现

list模拟实现代码&#xff1a; namespace djx {template<class T>struct list_node{T _data;list_node<T>* _prev;list_node<T>* _next;list_node(const T& x T()):_data(x),_prev(nullptr),_next(nullptr){}};template<class T,class Ref,class Pt…...

中国建筑出版传媒许少辉博士八一新书乡村振兴战略下传统村落文化旅游设计日京东当当畅销榜自由营九三学

中国建筑出版传媒许少辉博士八一新书乡村振兴战略下传统村落文化旅游设计日京东当当畅销榜自由营九三学...

C语言(第三十二天)

1. 递归是什么&#xff1f; 递归是学习C语言函数绕不开的一个话题&#xff0c;那什么是递归呢&#xff1f; 递归其实是一种解决问题的方法&#xff0c;在C语言中&#xff0c;递归就是函数自己调用自己。 写一个史上最简单的C语言递归代码&#xff1a; #include <stdio.h>…...

arcgis+postgresql+postgis使用介绍

关于arcgis在postgresql创建地理数据库我分享一下自己的经历&#xff1a; 众所周知&#xff0c;arcgis如果在oracle中创建地理数据库&#xff0c;必须要使用ArcToolbox里面的地理数据库工具去创建&#xff0c;在里面发现它还可以创建sql_server, postgresql数据库类型&#xf…...

机器视觉之开运算和闭运算

开运算&#xff08;Opening&#xff09;和闭运算&#xff08;Closing&#xff09;是数学形态学中常用的图像处理操作&#xff0c;通常用于去除图像中的噪声、连接物体、分离物体等操作。它们分别由两个基本操作组成&#xff1a;腐蚀&#xff08;Erosion&#xff09;和膨胀&…...

【python爬虫】—URL管理器的实现

python爬虫-url管理器 url管理器的作用python实现 url管理器的作用 在Python爬虫中&#xff0c;URL管理器&#xff08;URL Manager&#xff09;是一个重要的组件&#xff0c;用于有效管理爬取过程中所涉及的URL。它主要负责以下几个方面的任务&#xff1a; URL去重&#xff08;…...

Oracle 19C RAC安装PSU oui-patch.xml权限错误

Oracle 19C RAC安装PSU时&#xff0c;节点2安装失败&#xff0c;经排查错误原因为oui-patch.xml文件权限错误。 Oracle官方建议oui-patch.xml文件权限&#xff0c;改成660或者666&#xff1a; chmod 660 oui-patch.xml权限修改完成后&#xff0c;安装psu还是失败&#xff0c;…...

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...