<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
<link rel="apple-touch-icon" href="favicon.png">
<link rel="Shortcut Icon" href="favicon.png" type="image/x-icon">
<title>lib-flexible适配案例</title>
<style>
div {
width: 1rem;
height: 0.4rem;
font-size: 12px; /* 默认写上dpr为1的fontSize*/
}
[data-dpr="2"] div {
font-size: 24px;
}
[data-dpr="3"] div {
font-size: 36px;
}
.box{
width: 1rem;
height:1.333333333rem
}
</style>
</head>
<body>
<div class="box"></div>
<!--
核心是通过rem来替代px单位。从而实现多分辨率适配!
本案例需要结合一个文本和一个插件来快速开发实现，vscode 以及 插件px2rem
页面模版ok！
download https://github.com/Maroon1/px2rem
下载完了直接手动安装 安装好了还需要配置一下
vscode有一个全局配置json 加上 "px2rem.htmlFontSize": 75 标识以75px作为基准转化
然后在css数值上单击 alt+c 即可实现转化 当然也可以按住alt多选
-->
</body>
</html>
1190
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
