什么是适配?

简介: 什么是适配?

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

下面是一些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;
  }
}
相关文章
|
2月前
|
JSON iOS开发 数据格式
iPhont X适配
iPhont X适配
28 0
|
2月前
|
iOS开发
iPad适配
iPad适配
24 0
|
2月前
|
开发框架 JavaScript API
uniapp如何实现跨端适配
uniapp如何实现跨端适配
124 0
|
11月前
|
JavaScript
深入了解移动端适配的方案
深入了解移动端适配的方案
198 0
|
缓存 编解码 监控
移动端适配方案总结(二)
由于自己太久没开发移动端的页面,个人觉得移动端开发相比较PC端开发最大的不同,在于需要去适配各种尺寸的手机屏幕,尤其还有1px的问题。
191 0
|
编解码 前端开发
移动端适配方案总结(一)
由于自己太久没开发移动端的页面,个人觉得移动端开发相比较PC端开发最大的不同,在于需要去适配各种尺寸的手机屏幕,尤其还有1px的问题。
129 0
移动端适配方案
移动端适配方案
46 0
|
移动开发 前端开发 JavaScript
超详细讲解 H5 移动端适配方案
超详细讲解 H5 移动端适配方案
超详细讲解 H5 移动端适配方案
|
编解码 前端开发
基本的移动端适配
一个项目一般拥有移动端和pc端的产品图 我们为了减少工作量会在开发pc端时同时使它适配移动端
93 2
|
前端开发 开发者 容器
总结适配方案|学习笔记
快速学习 总结适配方案
80 0