什么是适配?

简介: 什么是适配?

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

下面是一些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月前
|
编解码 前端开发 JavaScript
前端移动端适配方案
【9月更文挑战第8天】前端移动端适配方案
82 0
|
3月前
|
Web App开发 前端开发
什么是移动端适配
【8月更文挑战第2天】
|
3月前
|
前端开发
移动端适配问题
【8月更文挑战第6天】
53 4
|
3月前
|
前端开发 JavaScript
移动端适配
【8月更文挑战第4天】
40 4
|
3月前
|
前端开发 小程序
移动端适配方案
【8月更文挑战第1天】
|
6月前
|
JSON iOS开发 数据格式
iPhont X适配
iPhont X适配
35 0
|
6月前
|
iOS开发
iPad适配
iPad适配
62 0
|
JavaScript
深入了解移动端适配的方案
深入了解移动端适配的方案
249 0
|
编解码 前端开发 JavaScript
前端移动端优化和适配
前端移动端优化和适配
203 0
|
缓存 编解码 监控
移动端适配方案总结(二)
由于自己太久没开发移动端的页面,个人觉得移动端开发相比较PC端开发最大的不同,在于需要去适配各种尺寸的手机屏幕,尤其还有1px的问题。
237 0