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;}
    }
    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/58712.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

代码随想录训练营二刷第七天 | 454.四数相加II 383. 赎金信 15. 三数之和 18. 四数之和

代码随想录训练营二刷第七天 | 454.四数相加II 383. 赎金信 15. 三数之和 18. 四数之和 一、454.四数相加II 题目链接&#xff1a;https://leetcode.cn/problems/4sum-ii/ 思路&#xff1a;求索引的组合&#xff0c;转化为两组&#xff0c;ab -(cd)&#xff0c;map中键为ab&…

uniapp 开发之仿抖音,上下滑动切换视频、点击小爱心效果

效果图&#xff1a; 功能描述&#xff1a; 上下滑动视频&#xff0c;双击暂停&#xff0c;然后第一个视频再往上滑显示”已经滑到顶了“ 开始代码&#xff1a; 首先视频接口使用的公开的视频测试接口 开放API-2.0 官网展示 Swagger UI 接口文档 一…

Django基础7——用户认证系统、Session管理、CSRF安全防护机制

文章目录 一、用户认证系统二、案例&#xff1a;登陆认证2.1 平台登入2.2 平台登出2.3 login_required装饰器 三、Django Session管理3.1 Django使用Session3.1.1 Cookie用法3.1.2 Session用法 3.2 案例&#xff1a;用户登录认证 四、Django CSRF安全防护机制 一、用户认证系统…

4399面试总结C/C++游戏开发

主要流程 首先询问了C/C知识点 然后询问操作系统&#xff0c;计算机组成&#xff0c;数据结构&#xff0c;计算机网络哪两门熟悉 涉及的相关问题 多态的概念 tcp,udp&#xff1f; tcp,udp区别 tcp可靠&#xff0c;udp不可靠 tcp这个链接的过程? 一个TCP连接必须要经过三次“…

提升代码逻辑的感觉——python循环语句

提升代码逻辑的感觉——python循环语句 简介 循环是编程中的一个非常重要的概念&#xff0c;它用于处理重复性任何和迭代草错&#xff0c;通过循环我们能优化并简化代码&#xff0c;提高代码的可维护性&#xff0c;在Python中循环是一种控制结构&#xff0c;允许我们重复执行…

【100天精通python】Day47:python网络编程_Web编程基础

目录 1 网络编程与web编程 1.1 网络编程 1.2 web编程 2 Web开发概述 3 Web开发基础 3.1 HTTP协议 3.2 Web服务器 3.3 前端基础 3.4 静态服务器 3.5 前后端交互的基本原理 4 WSGI接口 4.1 CGI 简介 4.2 WSGI 简介 4.3 定义 WSGI 接口 4.4 运行 WSGI 服务 4.5…

视频汇聚/视频云存储/视频监控管理平台EasyCVR视频平台添加萤火云设备的具体操作步骤

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安…

【ARM Coresight 系列文章 20 -- linux perf 与 ARM coresight】

文章目录 1.1 Perf Introduction1.1.1 Perf 架构图1.1.2 Perf Tools 介绍1.1.3 Perf 命令介绍1.2 Events1.2.1 Perf 与 PMU 的关系1.2.2 Hardware events1.2.1.1 linux perf 事件分类1.2.2 Software Events1.2.3 Tracepoint Events1.3 Perf 工具使用1.4 用户态开发1.4.1 用户态…

Springboot 整合 Redis配置

RedisService接口 import java.util.List; import java.util.Map; import java.util.Set;/*** Redis操作Service* Created by macro on 2020/3/3.*/ public interface RedisService {/*** 保存属性*/void set(String key, Object value, long time);/*** 保存属性*/void set(St…

Java项目-苍穹外卖-Day07-redis缓存应用-SpringCache/购物车功能

文章目录 前言缓存菜品问题分析和实现思路缓存菜品数据清理缓存数据功能测试 SpringCache介绍入门案例 缓存套餐购物车功能添加购物车需求分析和产品原型测试 前言 本章节主要是进行用户端的购物车功能开发 和redis作为mysql缓存的应用以及SpringCache的介绍 因为很多人查询数…

VSCode-C++环境配置+Cmake

文章目录 一、环境配置二、Win10 Cmake 一、环境配置 转载链接 二、Win10 Cmake 创建CMakeLists.txt cmake_minimum_required(VERSION 3.26) project(graph_algorithm)set(CMAKE_CXX_STANDARD 17)add_executable(main main.cppshared_variable.cpp )cmake . -G "MinGW…

【Java List与Map】List<T> Map与Map List<T>的区别(126)

List&#xff1c;T&#xff1e; Map&#xff1a;List里面的数据类型包含Map&#xff1b; Map List&#xff1c;T&#xff1e;&#xff1a;Map里面value的数据类型包含List&#xff1b; 测试案例&#xff1a; import java.util.ArrayList; import java.util.HashMap; import j…

安全区域边界技术测评要求项

1.边界防护-非授权设备接入、非授权连接外部网络、无线网络使用和设备可信接入 &#xff08;网络边界就是采用不同安全策略的两个网络的连接处&#xff09; 1-1/2-1/3-4/4-6 a&#xff09;保证跨越边界的访问和数据流通过边界设备提供的受控接口进行通信 b&#xff09;应能够对…

Linux学习之RAID

基础概念 RAID&#xff0c;英文全称为Redundant Arrays of Independent Drives&#xff0c;RAID&#xff0c;中文称为独立冗余磁盘阵列&#xff0c;这项技术把多个硬盘设备组合成一个容量更大的、安全性更好的磁盘阵列&#xff0c;把数据切割成许多区段分别放在不同的物理磁盘…

MATLAB算法实战应用案例精讲-【概念篇】构建数据指标方法(最终篇)

目录 前言 算法原理 指标体系的意义 1. 更好进行管理 2. 更优打造业务 3. 更早构造壁垒 什么是好的

15. 实现业务功能--帖子操作

1. 集成编译器 editor.md 支持 MarkDown 语法编辑&#xff0c;在需要用户输⼊内容的页面按以下代码嵌入编辑器 1.1 编写 HTML <!-- 引⼊编辑器的CSS --> <link rel"stylesheet" href"./dist/editor.md/css/editormd.min.css"> <!-- 引⼊编…

Linux服务器中创建SVN项目详细步骤

一、Linux服务器中的SVN安装和搭建项目环境可以参考一下文章: 1、《阿里云服务器搭建》------搭建SVN服务 2、在一个服务器的svn上&#xff0c;设置一个端口号对应一个项目 3、如何解决Linuxsvn无法显示日志的问题 二、Linux服务器中的SVN项目如何添加项目的忽略文件&#xff1…

Rabbitmq的消息转换器

Spring会把你发送的消息序列化为字节发送给MQ&#xff0c;接收消息的时候&#xff0c;还会把字节反序列化为Java对象 ,只不过&#xff0c;默认情况下Spring采用的序列化方式是JDK序列化。众所周知&#xff0c;JDK序列化存在下列问题&#xff1a; 数据体积过大 有安全漏洞 可读…

nacos Error to process server push response

nacos2.0.3报错&#xff1a; Error to process server push response 解决办法&#xff1a; 排查项目当中有没有直接或间接依赖reflections&#xff1a; <dependency><groupId>org.reflections</groupId><artifactId>reflections</artifactId>…

华为配置聚合vlan(Super vlan--Sub vlan)

聚合vlan&#xff0c;Aggregation vlan&#xff0c;也称Super vlan&#xff0c;可以实现用Sub vlan二层隔离广播域&#xff0c;但又将这些Sub vlan聚合使用同一IP子网和网关的情况。 这样&#xff0c;多个Sub-VLAN共享一个网关地址&#xff0c;节约了子网号、子网定向广播地址、…