什么是适配?

简介: 什么是适配?

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

下面是一些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;
  }
}
相关文章
|
编解码 Shell Android开发
『移动端测试必备』ADB常用命令和使用
『移动端测试必备』ADB常用命令和使用
587 2
|
Linux
解决办法:更新linux时候提示“由于没有公钥,无法验证下列签名 ***”
解决办法:更新linux时候提示“由于没有公钥,无法验证下列签名 ***”
1236 1
|
数据库 Perl
分享几本 O'Reilly 出品的免费电子书
有一些书,如果你不是行内人士,那么可能你一辈子都不会看。有一些出版社,就是专门做这种书,比如国内的机工华章,比如国外的 O'Reilly,都是专注计算机和软件行业二十年的好出版社。 这两家出版社的书,都是颇有特色个性鲜明。华章的图书,我在大学期间读了很多,以计算机科学领域的基础和经典居多,这套书在
12494 0
|
6月前
|
搜索推荐 API 开发者
京东商品列表 API 接口全解析:从入门到精通
京东商品列表API是京东开放平台为开发者提供的核心数据接口,支持批量获取商品基础信息、价格、库存状态等多维度数据。它具备数据丰富性、灵活筛选与分页查询、稳定高效等特点,可满足市场分析、选品优化、比价工具及推荐系统开发等需求,为电商业务创新提供坚实支撑。通过标准化通道,助力第三方高效、合法地利用京东海量商品数据。
|
11月前
|
机器学习/深度学习 Serverless 定位技术
深入理解多重共线性:基本原理、影响、检验与修正策略
本文将深入探讨多重共线性的本质,阐述其重要性,并提供有效处理多重共线性的方法,同时避免数据科学家常犯的陷阱。
526 3
|
12月前
|
敏捷开发 数据可视化 测试技术
利用敏捷开发方法优化项目管理
【10月更文挑战第14天】敏捷开发方法论强调适应性和人本价值,通过迭代和增量的方式提升软件交付效率。本文介绍敏捷开发的核心原则、实施步骤及其在项目管理中的应用,包括透明化管理、快速响应变化、提高团队协作和持续改进等方面,旨在帮助团队更高效地运作。
|
12月前
|
SQL 数据库 索引
SQL语句实现投影连接:方法与技巧详解
在SQL数据库查询中,投影和连接是两个核心概念
|
JavaScript 编译器
vue3+ts:shims-vue.d.ts
vue3+ts:shims-vue.d.ts
489 0
vue3+ts:shims-vue.d.ts
|
SQL 关系型数据库 MySQL
Mysql从入门到精通——Mysql知识点总结(基础篇)
Mysql从入门到精通——Mysql知识点总结(基础篇)
594 0
|
负载均衡 数据库连接 API
什么是HTTP 500错误,怎么解决
什么是HTTP 500错误,怎么解决
9255 0