此方案跟方案4是同一原理，也是通过REM实现的，能单独归类出一个方案，是因为它有一定的实用价值，当你遇到追求完美，追求到一像素的UI或者产品时，那此方案将解决你的困境。
方案5主要是用来解决一像素边框来设计的，当你的设计稿中到处是一像素边框，而UI跟产品拿着手机频频跟你说为什么在手机上边框这么粗的时候，而又无法劝服他们妥协的时候，就用这种适配方案吧，亲。
适配方案5代码如下：
<!DOCTYPE html>
<html>
<head>
<title>主结构&适配方案5</title>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<!--适配主逻辑 S-->
<script type="text/javascript">
//实现真实一像素显示
function getOnePx(){
var dpi=window.devicePixelRatio,//获取屏幕像素比
scalez=1/dpi;
document.write(‘<meta content="width=device-width,initial-scale=‘+scalez+‘,maximum-scale=‘+scalez+‘,user-scalable=no" name="viewport">‘)//通过meta来实现缩放像素比的倍数
}
//适配函数，动态修改html节点字号
function reset(){
var htmlo=document.getElementsByTagName(‘html‘)[0],
clientW=document.documentElement.clientWidth || document.body.clientWidth,
fontSz=clientW/16+‘px‘;
htmlo.style.fontSize=fontSz;
}
//调用一像素显示
getOnePx();
//初始进来执行一次适配
reset();
//当屏幕旋转的时候，再次执行一次适配
window.addEventListener(‘resize‘,function(){
setTimeout(function(){reset();},100);
},false)
</script>
<!--适配主逻辑 E-->
<style>
body{
margin:0;
background:#000;
}
h3,p,ul{
margin:0;
padding:0;
}
.wrap{
width:100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding:0 0.5rem;
background:#ccc;
overflow:hidden;
line-height:0.9rem;
font-size:0.55rem;
}
.aside_left,.aside_right{
width:7.5rem;
height:4rem;
float:left;
color:white;
line-height:4rem;
font-size:0.65rem;
text-align:center;
}
.aside_con{
width:15rem;
height:4rem;
oveflow:hidden;
background:blue;
color:white;
line-height:4rem;
font-size:0.75rem;
text-align:center;
}
.aside_left{
background:red;
}
.aside_right{
background:green;
}
h3{
font-size:0.7rem;
line-height:1.2rem;
}
ul{
padding-left:1rem;
border:1px solid #000;
}
</style>
</head>
<body>
<div id="wrap" class="wrap">
<!--示范结构 S-->
<div class="aside_con">
<div class="aside_left">示范块内容0</div>
<div class="aside_right">示范块内容1</div>
</div>
<div class="aside_con">整条示范内容2</div>
<!--示范结构 E-->
</div>
</body>
</html>
适配说明：
1：主要是通过动态根据屏幕的宽度设置html无素的字体，再根据1rem等于HTML的字号大小来换算布局，例如你的设计稿是640，那除以16则HTML的根字号就是40px,那假设设计上的尺寸是320PX的元素，在写样式的时候就写在320/40即8rem。
2：注意事项:此种方案也是开发HTML5项目很理想的适配方案，特别是公司的wap端项目或者wepAPP,适配5优于适配4的地方就是通过缩放“1/像素比”来实现1PX像素的展现。
适配4之所以不能实现一像素，是因为在手上机，为了让屏幕足够清晰，一般会用多个像素才显示一像素的东东，如苹果4，5都是像素比为2的，那一像素在它上面就会显示成2像素显得格外粗，既然跟像素比有关，那是不是通过先缩放像素分之1就能保证1PX还是以1PX来显示了。
二种方案可看情况选择使用，如果要求展现1PX像素的地方很多，而且又很在意这1像素选择这方案吧。
以上代码归属于我的github常用H5代码整理项目（详见其中adaptationMode/mode5/index.html）：https://github.com/xw5/mobile-code/
欢迎clone,欢迎star,一起学习，一起进少
时间： 2024-11-09 00:17:26