网页屏幕适配通透了

一,如果设计尺寸固定

那就按照固定尺寸开发
一般都是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检查,设置尺寸

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

NetCore部署微服务(三)

接上文,服务端部署完成之后,同样我们也需要修改一下客户端代码 Blocking Queries 1.1 服务发现 在客户端代码中使用Nuget安装consul包 修改配置文件,我们首先需要把consul的请求地址配置在配置文件中 修改control方法 using Consul; usin…

Navicat教程

下载连接(无限使用版) 链接:https://pan.baidu.com/s/1IprYLRv0bSnW-XKn0trRtw 提取码:j6qx 连接使用 1.1 连接数据库 打开navicat,点击连接,选择数据库 1.2 操作数据库 右键连接,点击新建数…

使用php代码调用jar包里面的类方法的实战操作

#php调用jar包# 需求说明 接到一个需求,网站是使用php开发的帝国cms,现接到需求是需要对接一个系统 ,但系统里面有一个数据加密字段,需要使用jar包进行加解密。 技术解决方案,资源包解决一切。下载就行了&#xff0…

偶尔启动Idea2023版开发工具运行没有反应Idea都无法启动Idea双击无反应

最近在开发的过程中使用Idea2023版。无论是双击运行还是管理员运行,Idea都无法启动,没有作出任何反应,在查询许多资料后,这里记录总结一下: 解决方法如下: (1)找到idea桌面快捷方式…

【REST2SQL】08 日志重构增加输出到文件log.txt

【REST2SQL】01RDB关系型数据库REST初设计 【REST2SQL】02 GO连接Oracle数据库 【REST2SQL】03 GO读取JSON文件 【REST2SQL】04 REST2SQL第一版Oracle版实现 【REST2SQL】05 GO 操作 达梦 数据库 【REST2SQL】06 GO 跨包接口重构代码 【REST2SQL】07 GO 操作 Mysql 数据库 原来…

【css】渐变效果

css渐变效果 使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果。 用它代替图片,可以加快页面的载入时间、减小带宽占用。同时,因为渐变是由浏览器直接生成的,它在页面缩放时的效果比图片更好,因此你可以更加灵活、便捷的调整页…

C++(11)——string

前面通过前面篇文章介绍了中的各项基本知识。从本篇文章开始,将对中的中的各项内容进行介绍: 目录 1.string类对象的常见构造: 2. string类对象的赋值操作: 3. string类对象的访问与遍历: 3.1 string类对象的访问…

腾讯云服务器新老用户优惠价格表(2024新报价)

腾讯云服务器租用价格表:轻量应用服务器2核2G3M价格62元一年、2核2G4M价格118元一年,540元三年、2核4G5M带宽218元一年,2核4G5M带宽756元三年、轻量4核8G12M服务器446元一年、646元15个月,云服务器CVM S5实例2核2G配置280.8元一年…

Poi实现根据word模板导出-文本段落篇

最近在做word模板导出的需求,本来意为是很简单,做起来才发现细节上有很多东西处理起来还是比较麻烦的(客户要求太多!!!) 因此我把涉及到基于word模板导出的这部分整理了一下,大家直…

二叉树的基本运算(涉及递归均有给出模型)

目录 介绍: 二叉树的基本运算及其实现: BTNode* CreateBTree(char* str) 创建二叉树 void DestroyBTree(BTNode* b) 销毁二叉树 BTNode* FindNode(BTNode* b, ElemType x) 查找结点 BTNode* LchildNode(BTNode* p) 查找左孩子结点 BTNode* Rchild…

自学Python笔记总结(更新中……)

自学Python笔记总结 网址数据类型类型查看类型,使用type内置类标识符 输出输入语句format函数的语法及用法数据类型的转换运算符算数运算符赋值运算符的特殊场景拆包 比较运算符逻辑运算符 与 短路位运算符运算符优先级 程序流程控制分支语句pass 占位 循环语句 whi…

【记忆化搜索】

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

网络基础学习(3):交换机

1.交换机结构 (1)网线接口和后面的电路部分加在一起称为一个端口,也就是说交换机的一个端口就相当于计算机上的一块网卡。 如果在计算机上安装多个网卡,并让网卡接收所有网络包,再安装具备交换机功能的软件&#xff0…

NLP论文阅读记录 - 2022 | WOS 数据驱动的英文文本摘要抽取模型的构建与应用

文章目录 前言0、论文摘要一、Introduction1.1目标问题1.2相关的尝试1.3本文贡献 二.相关工作三.本文方法四 实验效果4.1数据集4.2 对比模型4.3实施细节4.4评估指标4.5 实验结果4.6 细粒度分析 五 总结 前言 Construction and Application of a Data-Driven Abstract Extractio…

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

铁路部门档案管理中存在的问题及对策 尚芝维 公共图书馆共享服务模式分析 高翔 关于加强国有企业固定资产管理的对策 任美琪 大数据时代高校档案管理人才队伍建设策略 胡永芳 数据治理背景下档案数据馆员能力建设研究 许颖 新时代事业单位档案管理人才培养…

做品牌,怎么挖掘用户深层需求?

品牌想要长久发展,就需要去挖掘用户深层需求,什么是用户深层需求,比如做美业的认为用户想要变美是深层次的需求,但其实由美貌带来的附加利益比如说更上镜、竞争优势更大等才属于深层需求,今天媒介盒子就来和大家聊聊&a…

基于树莓派5(Raspberry Pi 5)的高性能工业平板电脑升级版!

​ 上海晶珩继推出首个搭载 Raspberry Pi 5 的平板电脑ED-HMI3010系列后,又推出了具备高性能和多功能特性的 Raspberry Pi 5 的平板电脑ED-HMI3020系列。ED-HMI3020支持选择7英寸和10.1英寸两种尺寸的触摸屏,可选配 M.2 NVMe SSD 存储扩展,提…

ros rqt_bag 用法汇总和用例

文章目录 基本用法高级功能典型用例 rqt_bag 是一个用于ROS(机器人操作系统)中查看和编辑bag文件的工具。Bag文件是ROS用于记录和回放消息数据的一种格式。以下是 rqt_bag 的主要用法汇总和一些典型用例: 基本用法 启动 rqt_bag 在终端中输入…

FineBI实战项目一(19):每小时订单笔数分析开发

点击新建组件,创建下每小时订单笔数组件。 选择饼图,拖拽cnt(总数)到角度,拖拽hourstr到颜色,调节内径。 修改现在的文字 拖拽组件到仪表盘。 效果如下:

如何在 PHP 中动态调用类中的方法?

在PHP中,我们可以通过动态调用类方法的方式来实现更加灵活的编程。这种方法可以使我们在运行时根据具体的需要来动态调用类中的方法。 1.使用call_user_func函数 PHP中提供了call_user_func函数用于动态调用类方法。 call_user_func(array($object, $methodName), $…