适配问题
怎么适配iphone6
1px问题
为什么页面与设计稿会出现偏差？
dpr=设备像素/ css像素因为iPhone6的DPR（设备像素比）为2，设备像素为750，所以iPhone6的理想视口尺寸为375px。
因为设计稿是基于设备像素，页面是基于css像素的。css中的宽度是基于理想视口的（宽度375px），设计图上是基于设备宽度750px，所以尺寸不对。
怎么处理？
init-scale=0.5缺陷：但是宽度不能自适应
⭐️rem大法
基于
htmlfont-size手淘的做法：
把缩放尺寸设置成dpr的倒数。
读设备宽度，动态设置meta标签的 content属性中的
maximunminimumuser-scable<html>
<head><title></title><meta charset="utf-8" /><meta name="viewport" content="" /><style>body{margin: 0;padding: 0;}.box{width: 2.66666667rem;height: 2.66666667rem;background: red;}</style>
</head>
<body><div class="box"></div><script>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';</script>
</body>
</html>网易的做法
现在的设计稿都是750px宽度（p6的宽），那要想实现
css样式：设计图=1：100也就是说
1rem = 7.5px<html>
<head><title></title><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" /><style>body{margin: 0;padding: 0;}.box{width: 2rem;height: 2rem;background: red;}</style>
</head>
<body><div class="box"></div><script>document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 'px';</script>
</body>
</html>总结
rem是为了实现移动端自适应布局。通过在
htmlfont-size另外，手淘的做法是通过判断设备的dpr，将缩放规模scale设置为dpr的倒数，再用js动态设置
metacontent网易的做法是，禁用用户缩放，scale始终为1，将font-size设置为625%，即 1rem=100px。
1px问题
如何实现移动端的1px边框
方法一：transformY:scale(50%)
transformY:scale(50%)方法二：
border-width:0 0 2px 0;
border-image:url("xxx.png") 0 0 2 0 stretch // 图片地址 上下剪切 左右剪切 上下边宽 左右边宽 图片拉伸vm/vh rem大法
vm/vh是未来的趋势
rem方式弊端：需要动态计算根字体大小
做法：用vm/vh来计算根字体大小，剩下的自适应布局依旧按照rem的方法
用vm/vh做适配页面
⭐️关于vm/vh
1. 与%百分比的区别
vm/vh 是基于视窗的
%基于父元素
2. 使用场景
随着页面不同，文字图片缩小放大（适配页面）
3. 与rem的区别
vm/vh没有最大、最小宽大的限制（设备很小的时候，图文会缩得特别特别小……）
措施：
1.解决背景过小问题
body{min-width:xxx px;max-width: xxx px;
}2.媒体查询限制根文字大小（解决文字过小问题）
html { font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw; // 同时，通过Media Queries 限制根元素最大最小值 @media screen and (max-width: 320px) { font-size: 64px; } @media screen and (min-width: 540px) { font-size: 108px; } }本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=0bchaa&title=移动端适配问题
)
用法小结)
