什么是适配?

简介: 什么是适配?

做过项目的肯定都知道,什么是适配,适配就是,根据用户电脑的不同,项目显示的分辨率不同,在不影响项目样式的情况下,还能够很好的展现出来的就是适配。

下面是一些css适配代码,可以直接复制到css里,就行。

/* 适配 */
@media all and (-moz-min-device-pixel-ratio: 1.09) and (-moz-max-device-pixel-ratio: 1.18),
(-webkit-min-device-pixel-ratio: 1.09) and (-webkit-max-device-pixel-ratio: 1.18),
(min-resolution: 1.09dppx) and (max-resolution: 1.18dppx) {
  :root {
    font-size: 14px;
  }
}
 
@media all and (-moz-min-device-pixel-ratio: 1.19) and (-moz-max-device-pixel-ratio: 1.28),
(-webkit-min-device-pixel-ratio: 1.19) and (-webkit-max-device-pixel-ratio: 1.28),
(min-resolution: 1.19dppx) and (max-resolution: 1.28dppx) {
  :root {
    font-size: 13px;
  }
}
 
@media all and (-moz-min-device-pixel-ratio: 1.29) and (-moz-max-device-pixel-ratio: 1.4),
(-webkit-min-device-pixel-ratio: 1.29) and (-webkit-max-device-pixel-ratio: 1.4),
(min-resolution: 1.29dppx) and (max-resolution: 1.4dppx) {
  :root {
    font-size: 12px;
  }
}
 
@media all and (-moz-min-device-pixel-ratio: 1.41) and (-moz-max-device-pixel-ratio: 1.6),
(-webkit-min-device-pixel-ratio: 1.41) and (-webkit-max-device-pixel-ratio: 1.6),
(min-resolution: 1.41dppx) and (max-resolution: 1.6dppx) {
  :root {
    font-size: 10px;
  }
}
 
@media all and (-moz-min-device-pixel-ratio: 1.61) and (-moz-max-device-pixel-ratio: 1.8),
(-webkit-min-device-pixel-ratio: 1.61) and (-webkit-max-device-pixel-ratio: 1.8),
(min-resolution: 1.61dppx) and (max-resolution: 1.8dppx) {
  :root {
    font-size: 9px;
  }
}
 
@media all and (-moz-min-device-pixel-ratio: 1.81) and (-moz-max-device-pixel-ratio: 2.1),
(-webkit-min-device-pixel-ratio: 1.81) and (-webkit-max-device-pixel-ratio: 2.1),
(min-resolution: 1.81dppx) and (max-resolution: 2.1dppx) {
  :root {
    font-size: 8px;
  }
}
相关文章
|
JavaScript Java API
如何接入阿里云短信服务 (完整指南)
如何接入阿里云短信服务 (完整指南)
59050 1
|
1月前
|
人工智能 智能设计 移动开发
第18届全国大学生广告艺术大赛|千问大模型助力 AI 创作,算力资源免费领
第18届全国大学生广告艺术大赛阿里云命题启动!以通义千问大模型为核心,面向高校师生征集平面、视频、互动、UI及策划案五大类AI创意作品。提供百炼、PAI-ArtLab、万镜一刻等免费AI工具及300元学生算力券,助力“用AI传播AI”,激发创新应用想象。
|
运维 新制造 数据可视化
带你读《智能制造之卓越设备管理与运维实践》之一:设备运维管理的新挑战
本书从工业企业实际需求出发,结合智能制造环境下的紧迫需求,融合作者信息化咨询与项目工作实践,以理论联系实际,将设备的全生命周期管理、精益管理、全员维护、先进的维护策略(预测性维护、智能维护)等管理理与信息化技术进行融合设计,以“IE+IT”的思想实现管理平台与信息平台的平衡发展。
|
9月前
|
敏捷开发 人工智能 算法
AI 时代,这 3 个智能工具正在改变项目管理方式
在 AI 时代,项目管理面临高频变更、跨团队协作等新挑战。传统工具难以应对动态性与复杂性,智能工具则通过 AI 决策、自动化协作与智能排期,减少重复劳动,提升效率。本文解析智能工具如何破解管理痛点,并提供选型建议,助力团队从“被动救火”转向“主动规划”。
AI 时代,这 3 个智能工具正在改变项目管理方式
|
负载均衡 监控 Java
@SentinelResource和openFeign+sentinel 对远程调用熔断降级加规则持久化的具体实现
自定义全局限流处理类openFeign+sentinel 对远程调用熔断降级
392 0
|
12月前
|
边缘计算 人工智能 JavaScript
如何选择正确的体育电竞数据接口服务商?
想开发体育或电竞App却因数据接口问题头疼?数据延迟、更新慢、覆盖不全?本文教你挑选可靠的数据接口服务商,关注核心指标:实时性(<0.5秒延迟)、准确性(错误率<0.1%)、稳定性(99.99% SLA)。避坑指南助你远离劣质服务,优质接口应具备全链路解决方案、电竞专属优化及7x24技术支持。选对服务商,让数据为你的App赋能!
|
存储 缓存 算法
什么是配置中心页面?
【10月更文挑战第24天】什么是配置中心页面?
389 3
|
中间件 Go 数据处理
应用golang的管道-过滤器架构风格
【10月更文挑战第1天】本文介绍了一种面向数据流的软件架构设计模式——管道-过滤器(Pipe and Filter),并通过Go语言的Gin框架实现了一个Web应用示例。该模式通过将数据处理流程分解为一系列独立的组件(过滤器),并利用管道连接这些组件,实现了模块化、可扩展性和高效的分布式处理。文中详细讲解了Gin框架的基本使用、中间件的应用以及性能优化方法,展示了如何构建高性能的Web服务。
520 1
|
Docker 容器
7-13|docker build -t image-name:tag path/to/Dockerfile 这个命令具体什么意思
7-13|docker build -t image-name:tag path/to/Dockerfile 这个命令具体什么意思
|
人工智能
AI绘画——ControlNet扩展安装教程
AI绘画——ControlNet扩展安装教程
2692 0

热门文章

最新文章