什么是适配?

简介: 什么是适配?

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

下面是一些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;
  }
}
相关文章
|
7月前
|
人工智能 弹性计算 异构计算
2026年阿里云gpu云服务器活动参考:T4、V100、A10卡包月5折起,包年4折起
2026年阿里云推出GPU云服务器优惠活动,涵盖T4、V100、A10等多规格实例,活动截止到3月31日。活动对象为阿里云实名认证用户,新用户首购可享包年包月4折起、按量付费最长100小时1折起的优惠。具体型号与价格如gn7i-c32g1.8xlarge(A10卡)3213.99元/月起,gn6v-c8g1.2xlarge(V100卡)3830元/月起。活动支持包年包月与按量付费两种模式,满足AI训练、图形渲染等多场景需求,助力用户低成本开启AIGC之旅。
2891 2
|
7月前
|
安全 应用服务中间件 Linux
HTTPS 优化完整方案解析
本文详解HTTPS性能优化全方案,从原理到实操,涵盖硬件加速(AES-NI)、软件升级(内核与OpenSSL)及协议层优化(TLS 1.3、ECDSA、会话复用等),配合Nginx配置模板与验证方法,助你实现安全与速度双提升,显著降低访问延迟。
1585 156
|
7月前
|
人工智能 供应链 安全
OpenAI“后门”失守:一次钓鱼攻击如何撬动AI巨头的第三方供应链防线
2025年,一封伪造OpenAI邮件通过第三方分析平台Mixpanel发起精准钓鱼攻击,窃取员工凭证,导致部分API用户元数据泄露。事件揭示AI生态中供应链安全的脆弱性,攻击者借“最小权限”漏洞横向移动,获取地理位置、设备信息等敏感数据,凸显第三方风险与身份认证短板。从SolarWinds到Okta,此类攻击已成常态。应对需构建零信任架构,推行最小权限、MFA、无密码登录及自动化第三方风险监控。安全非附加功能,而是信任基石——一次钓鱼即可动摇用户信心,预防远胜补救。
549 7
|
7月前
|
机器学习/深度学习 人工智能 自然语言处理
代码检索新王登基!CodeFuse开源C2LLM,用“注意力池化”刷新MTEB-Code榜单
CodeFuse Embedding 家族最新成员 C2LLM 登顶 MTEB-Code 代码检索榜单,用注意力池化打破平均池化与 EOS 的僵局。
519 0
代码检索新王登基!CodeFuse开源C2LLM,用“注意力池化”刷新MTEB-Code榜单
|
机器学习/深度学习 人工智能 搜索推荐
Second Me:硅基生命或成现实?如何用AI克隆自己,打造你的AI数字身份!
Second Me 是一个开源AI身份系统,允许用户创建完全私有的个性化AI代理,代表用户的真实自我,支持本地训练和部署,保护用户隐私和数据安全。
2796 8
Second Me:硅基生命或成现实?如何用AI克隆自己,打造你的AI数字身份!
|
边缘计算 人工智能 JavaScript
如何选择正确的体育电竞数据接口服务商?
想开发体育或电竞App却因数据接口问题头疼?数据延迟、更新慢、覆盖不全?本文教你挑选可靠的数据接口服务商,关注核心指标:实时性(<0.5秒延迟)、准确性(错误率<0.1%)、稳定性(99.99% SLA)。避坑指南助你远离劣质服务,优质接口应具备全链路解决方案、电竞专属优化及7x24技术支持。选对服务商,让数据为你的App赋能!
|
负载均衡 监控 Java
@SentinelResource和openFeign+sentinel 对远程调用熔断降级加规则持久化的具体实现
自定义全局限流处理类openFeign+sentinel 对远程调用熔断降级
448 0
|
存储 缓存 算法
什么是配置中心页面?
【10月更文挑战第24天】什么是配置中心页面?
483 3
|
存储 算法 安全
浅谈SHA算法
浅谈SHA算法
643 0

热门文章

最新文章