1.百分比+固定高度布局方案
- 固定屏幕为理想视口宽度
- 少许的媒体查询设置字体
- 水平百分比布局
- 水平方向部分也可以使用弹性布局
2.Rem解决方案
- Rem的大小取值：根据页面的dpr动态改变
- Rem的取值： 1rem = 100px 或者 1rem = 1/10 * 理想视口的宽度
(client_width) - chrome浏览器字体小于12px（会被重置为12px)
3.固定设计稿的宽度开发+根据设备动态适配缩放
- 开发直接按照设计稿编写固定尺寸元素
- 页面加载完成后用js动态根据dpr改变页面的缩放值
- 推荐使用： flexible方案
重点方式：
1.REM+JS 动态适配页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>REM+JS动态适配尺寸</title>
<style>
html,div,ul,li,body{
padding: 0;
margin: 0px;
}
html{
font-size: 100px;
}
.box{
height: 1rem;
width: 1rem;
border: 1px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">
</div>
<script>
(function(win,doc){
// 1.获取 client 屏幕宽度
let clien_width=doc.documentElement.clientWidth||doc.body.clientWidth;
// 2.如果屏幕的宽度发生改变 触发 onresize 方法
window.onresize = function(){
let new_width=doc.documentElement.clientWidth||doc.body.clientWidth;
console.log("尺寸："+new_width);
fn(new_width);
}
//3. 【原始宽度】 或者 【改变后的宽度】 经过换算，赋值到 html=>style=>font-size 640px 是设计稿的原始尺寸
var fn=function(width){
let newWidth=doc.documentElement.style.fontSize=100*(width/640)+"px";
console.log( "屏幕尺寸："+clien_width);
console.log(newWidth);
}
fn(clien_width);
})(window,document)
</script>
</body>
</html>
JS响应式宽度.jpg
