移动端font-size适配总结

最新推荐文章于 2023-05-17 10:38:05 发布

weixin_41881346

最新推荐文章于 2023-05-17 10:38:05 发布

阅读量471

点赞数

分类专栏： css 文章标签： web app

本文链接：https://blog.csdn.net/weixin_41881346/article/details/105967862

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"><!-- width取值与页面定义的宽度一致  H5页面窗口自动调整到设备宽度，并禁止用户缩放页面-->
<meta content="yes" name="apple-mobile-web-app-capable"> <!--当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari-->
<meta content="yes" name="apple-touch-fullscreen">
<meta content="black" name="apple-mobile-web-app-status-bar-style"> 
<meta content="telephone=no,email=no" name="format-detection"> <!--忽略Android平台中对邮箱地址的识别 数字识别为电话号码-->
<title>标题</title>
<link rel="stylesheet" href="index.css">
</head>

<body>
这里开始内容
</body>

</html>

物理像素 设备像素（物理像素），顾名思义，显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位pt。（多的） window.screen.width
设备独立像素 dip 或 dp （device independent pixcels）当这个比率为2:1时，使用4个设备像素显示1个CSS像素，
当这个比率为3:1时，使用9（3*3）个设备像素显示1个CSS像素。（少的）
window.screen.width * window.devicePixelRatio (缩放因子与物理分辨率的乘积)

window.devicePixelRatio 获取分辨比（缩放因子）

@media only screen and (-webkit-min-device-pixel-ratio:1.5){
.css{/* 高清显示屏(设备像素比例大于等于1.5)使用2倍图  */
    background-image: url(img_2x.png);
  }
}

在 media 查询中，resolution 就代表着 devicePixelRatio
@media (min-resolution: 2dppx) {
在 devicePixelRatio >= 2 的设备上，字体颜色为红色。
  body {
    color: red;
  }
}

// 根据设计稿换算比例如设计稿 640px 比例为6.4
// 获取当前分辨率 window.screen.width
// html的font-size document.documentElement.style.fontSize = ( window.screen.width / 6.4 ) + ‘px’

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}

使用https://github.com/imochen/hotcss hotcss来处理兼容问题

weixin_41881346

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端font-size适配总结

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"><!-- width...
复制链接

扫一扫