<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<style>
body{
margin: 0;
padding: 0;
}
/方案一/
/.box{
width: 2.666rem;
height: 2.666rem;
background: red;
}/
/方案二/
/.box{
width: 2rem;
height: 2rem;
background: red;
}/
/我们的一倍稿/
.box{
width: 1rem;
height: 1rem;
background: red;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
/* 方案一
* 前提 css尺寸相对于布局视口
* 1. 设置 设备布局视口宽度为设备像素宽度
* 2. 解决不同屏幕宽度下，比例相同，但是box尺寸不同， 由于css无法计算， 所以用相对单位实现不同屏幕宽度下 box的宽度不用
* 3. 阿里的做法： 屏幕等分为10份， 每一份为 1rem
*/
// 方案一
// var scale = 1 / window.devicePixelRatio;
// // 设备布局视口宽度为设备像素宽度
// document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
// //适配其他屏幕
// document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
/* 方案二
* 前提： css尺寸相对于布局视口
* 1. 认为设备像素为 7.5rem , 那么在 750px 下 font-size: 100px; 375px 下 50px;
*
*
*/
// document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no');
// document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
// 我们的设计稿 是一倍图 -》所以需要*2之后再计算 按照375px ->
// 假如在一个375的设计稿上 有一个 宽高为100px的红块
document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no');
document.documentElement.style.fontSize = document.documentElement.clientWidth / 3.75 + 'px';
</script>
</body>
</html>
网友评论