网页屏幕适配通透了

一,如果设计尺寸固定

那就按照固定尺寸开发
一般都是1920*1080

二,需要适配多种像素屏幕(大屏可视化)

  1. 可使用媒体查询设置多套css样式
  2. 或者使用自适应单位,%,vw,vh

最好解决方案rem,可根据html根字号大小设置

在不同屏幕尺寸下,设置不同fontSize 大小,使元素长宽自适应

比如,19201080下fontSize 是16px
3840
1080下fontSize 一般就要设置成32px,但是这样可能会导致图片等拉伸过长,那就设置24px就差不多。
高度不变,就按照px来设置

缺点:文字字号设置rem时,高度上会变大,
需要设置不同屏幕下字体样式

clientWidth === 3840 ? 'fontSize : 56.2rem' : 'fontSize : 35rem'"

问题

不用管是否会出现滚动条
因为不同电脑尺寸不同
而且像素和缩放比也不同

如果开发时想看真正像素下开发效果F12检查,设置尺寸

在这里插入图片描述

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

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

相关文章

IPv6路由综合运用

一、基础配置: SWA: sw1(config)#host swA swA(config)#ipv6 ena swA(config)# vlan 100 swA(config-vlan100)#int vlan 100 swA(config-if-vlan100)#ipv6 ena swA(config-vlan100)#ip add 172.16.1.1 255.255.255.252 swA(config-if-vlan100)#int e1/0/24 swA(conf…

教育科学杂志教育科学杂志社教育科学编辑部2023年第12期部分目录

“思政教育联合思维导图”教学模式在肝病感染控制护理临床教学中的应用 黄雪霞;陈海涵;蒋雅文 中职语文教学中厚植爱国主义情怀的要点分析 苏琴 职业素养视角下中职计算机专业课程教学改革实践 李石 产教融合背景下高职院校产业学院建设模式的实践探索 郭洋 《工程制图与CAD》课…

数据结构学习 jz31 栈的压入、弹出序列

关键词:模拟 栈 不太熟,调了好一阵子。 题目:https://leetcode.cn/problems/zhan-de-ya-ru-dan-chu-xu-lie-lcof/ 思路: 主要是利用一个辅助栈,来模拟这个过程,如果过程不行就返回失败。 int sig 0;如…

Java研学-分页查询

一 分页概述 1 介绍 将大量数据分段显示,避免一次性加载造成的内存溢出风险 2 真假分页 ① 真分页   一次性查询出所有数据存到内存,翻页从内存中获取数据,性能高但易造成内存溢出 ② 假分页   每次翻页从数据库中查询数据&#xff0c…

解决计算机中vcruntime140.dll错误!六种方法教你修复

什么是vcruntime140.dll文件呢?为什么会出现丢失的情况?如何解决这个问题呢?本文将为您详细介绍vcruntime140.dll文件的作用、丢失原因以及6个快速解决方法。 一、vcruntime140.dll是什么文件? vcruntime140.dll是Visual C Redi…

聚合收益协议 InsFi :打开铭文赛道全新叙事的旋转门

​“InsFi 协议构建了一套以铭文资产为基础的聚合收益体系,该体系正在为铭文资产捕获流动性、释放价值提供基础,该生态也正在成为铭文赛道掘金的新热土。” 在 2023 年年初,Ordinals 协议在比特币链上被推出后,为比特币链上带来了…

STC51+TLC2543+ADXL335+proteus

51单片机解析adxl335振动检测蜂鸣器报警课设 通过按键调整振动检测阈值 传感器介绍 TLC2543:12 位精密模数转换器,原理图与引脚功能描述如下所示: 引脚功能1~9、11、12模拟量输入通道10GND电源地13REF-为负基准电压端14REF为正基准电压端…

基于ssm的课程在线教学平台设计与实现论文

摘 要 如今社会上各行各业,都喜欢用自己行业的专属软件工作,互联网发展到这个时候,人们已经发现离不开了互联网。新技术的产生,往往能解决一些老技术的弊端问题。因为传统Java课程教学信息管理难度大,容错率低&#x…

数据资产入表背后:中国To B数字化驶入“数据时代”

数据资产“入表”,更像是一剂通过颠覆旧的生产关系,从根上医治数字化转型的“良方”。 那么,数据资产到底是什么?以及在愈发被规范的数据市场大背景下,对中国的To B企业和To B服务商而言,正在或者即将发生…

【记忆化搜索】

欢迎来到Cefler的博客😁 🕌博客主页:那个传说中的man的主页 🏠个人专栏:题目解析 🌎推荐文章:【LeetCode】winter vacation training 前言 记忆化搜索是一种优化搜索算法的方法,它可…

基于JavaWeb+BS架构+SpringBoot+Vue基于hive旅游数据的分析与应用系统的设计和实现

基于JavaWebBS架构SpringBootVue基于hive旅游数据的分析与应用系统的设计和实现 文末获取源码Lun文目录前言主要技术系统设计功能截图订阅经典源码专栏Java项目精品实战案例《500套》 源码获取 文末获取源码 Lun文目录 1 概 述 5 1.1 研究背景 5 1.2 研究意义 5 1.3 研究内容…

Java实现二维码、条形码生成器

文章目录 前言 在数字化时代,二维码已经成为了信息交流的一种常见方式。它们被广泛用于各种应用,从产品标签到活动传单,以及电子支付。本文将向您展示如何在Spring Boot应用程序中整合ZXing库,以创建和解析QR码。无论您是想为您的…

常用文件文档能做二维码吗?多种文件在线做二维码的方法

二维码是现在工作和生活中随处可见,可以用来展现很多不同的内容。现在很多下发通知的文件、教程或者其他文件内容,也会制作成二维码图片后,让其他人通过扫码来获取文件内容。最简单的制作方法就是通过二维码生成器来制作,支持多种…

【KMP】【二分查找】【C++算法】100207. 找出数组中的美丽下标 II

作者推荐 【矩阵快速幂】封装类及测试用例及样例 本文涉及的基础知识点 二分查找算法合集 LeetCode100207. 找出数组中的美丽下标 II 给你一个下标从 0 开始的字符串 s 、字符串 a 、字符串 b 和一个整数 k 。 如果下标 i 满足以下条件,则认为它是一个 美丽下标…

usb个人总结

一、usb工具分析 1、不同的usb抓包工具抓包分析 2、USB抓包分析方式 外接usb分析仪分析 (1)力科usb分析仪 (2)HD-USB12 协议分析仪 (3)沁恒CH552 usb分析仪,软件工具USB2.0 Monitor (4)等等…

RICHARD MILLE 理查米尔顶级制表技艺典范之作:RM 35-03腕表

瑞士高端制表品牌RICHARD MILLE(理查米尔)在腕表界拥有着卓越的地位,其材质、技术、设计、品质以及服务独树一帜,皆被认为是顶级水平的代表,经典作品数不胜数。而即使在众多经典之作中,RM 35-03 Rafael Nadal 自动上链腕表仍以独特蝶形摆陀和强大性能备受用户推崇,被誉为“RICH…

2024三掌柜赠书活动第三期:Rust系统编程

目录 前言 Rust语言概念 关于《Rust系统编程》 Rust系统编程的核心点 Rust系统编程的关键技术和工具 编辑推荐 内容简介 作者简介 图书目录 书中前言/序言 《Rust系统编程》全书速览 结束语 前言 在技术圈,最近的编程语言新秀当属Rust莫属,R…

2024 解决matplotlib中文字体问题

第一种代码(失败代码) import matplotlib as mpl import matplotlib.pyplot as plt from matplotlib.font_manager import FontPropertiesfont_path /Users/huangbaixi/Desktop/SimHei.ttfdef plot_demo():#print(mpl.get_cachedir())# 绘制折线图font…

操作系统导论-课后作业-ch5

关于man的使用 man 系统参考手册 man n name 在系统手册第n章查看name1. 代码&#xff1a; #include <stdio.h> #include <sys/types.h> #include <unistd.h> #include <sys/wait.h>int main() {int x 100;int rc fork();if (rc -1) {fprintf…