什么是适配?

简介: 什么是适配?

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

下面是一些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;
  }
}
相关文章
|
域名解析 网络协议 安全
什么是DNS劫持攻击以及如何避免此类攻击
【10月更文挑战第28天】DNS劫持攻击是一种网络攻击方式,攻击者通过篡改用户的DNS设置,将合法网站的域名解析为恶意网站的IP地址,使用户在不知情的情况下访问钓鱼网站。攻击手段包括在用户系统植入恶意软件、利用路由器漏洞或破解DNS通信等。为防止此类攻击,应使用安全软件、定期检查DNS设置、重置路由器密码及避免访问不安全的网站。
2871 2
|
JavaScript Java API
如何接入阿里云短信服务 (完整指南)
如何接入阿里云短信服务 (完整指南)
59721 1
|
运维 新制造 数据可视化
带你读《智能制造之卓越设备管理与运维实践》之一:设备运维管理的新挑战
本书从工业企业实际需求出发,结合智能制造环境下的紧迫需求,融合作者信息化咨询与项目工作实践,以理论联系实际,将设备的全生命周期管理、精益管理、全员维护、先进的维护策略(预测性维护、智能维护)等管理理与信息化技术进行融合设计,以“IE+IT”的思想实现管理平台与信息平台的平衡发展。
|
12月前
|
敏捷开发 人工智能 算法
AI 时代,这 3 个智能工具正在改变项目管理方式
在 AI 时代,项目管理面临高频变更、跨团队协作等新挑战。传统工具难以应对动态性与复杂性,智能工具则通过 AI 决策、自动化协作与智能排期,减少重复劳动,提升效率。本文解析智能工具如何破解管理痛点,并提供选型建议,助力团队从“被动救火”转向“主动规划”。
AI 时代,这 3 个智能工具正在改变项目管理方式
|
负载均衡 监控 Java
@SentinelResource和openFeign+sentinel 对远程调用熔断降级加规则持久化的具体实现
自定义全局限流处理类openFeign+sentinel 对远程调用熔断降级
436 0
|
机器学习/深度学习 人工智能 搜索推荐
Second Me:硅基生命或成现实?如何用AI克隆自己,打造你的AI数字身份!
Second Me 是一个开源AI身份系统,允许用户创建完全私有的个性化AI代理,代表用户的真实自我,支持本地训练和部署,保护用户隐私和数据安全。
2729 8
Second Me:硅基生命或成现实?如何用AI克隆自己,打造你的AI数字身份!
|
边缘计算 人工智能 JavaScript
如何选择正确的体育电竞数据接口服务商?
想开发体育或电竞App却因数据接口问题头疼?数据延迟、更新慢、覆盖不全?本文教你挑选可靠的数据接口服务商,关注核心指标:实时性(<0.5秒延迟)、准确性(错误率<0.1%)、稳定性(99.99% SLA)。避坑指南助你远离劣质服务,优质接口应具备全链路解决方案、电竞专属优化及7x24技术支持。选对服务商,让数据为你的App赋能!
|
存储 缓存 算法
什么是配置中心页面?
【10月更文挑战第24天】什么是配置中心页面?
438 3
|
Docker 容器
7-13|docker build -t image-name:tag path/to/Dockerfile 这个命令具体什么意思
7-13|docker build -t image-name:tag path/to/Dockerfile 这个命令具体什么意思