web前端自适应方案总结

最新推荐文章于 2024-04-11 16:05:19 发布

风花雪月耶

最新推荐文章于 2024-04-11 16:05:19 发布

阅读量570

点赞数

分类专栏：自适应文章标签：前端 javascript html css

本文链接：https://blog.csdn.net/ybbnzs/article/details/126954423

版权

自适应专栏收录该内容

1 篇文章 0 订阅

订阅专栏

字体统一使用相对单位（em,rem）,不使用px

方案一：
viewport

1080为ui设计图宽度
! function (userAgent) {
var screen_w = parseInt(window.screen.width),
scale = screen_w / 1080;
if (/Android (\d+.\d+)/.test(userAgent)) {var version = parseFloat(RegExp.$1);
document.write(version > 2.3 ? ‘’ : ‘’);
} else {
document.write(‘’);
}
}(navigator.userAgent);
方案二
vw + wh
方案三
百分比（%） + 弹性布局（flex）
方案四
响应式布局
方案五
媒体查询
方案六
1920为设计图宽度，1080为高度

<script>
var width=document.documentElement.clientWidth;
var height=document.documentElement.clientHeight;
var sacle=width/1920>height/1080?height/1080:width/1920;
document.getElementsByTagName('body'[0].style.zoom=sacle;
</script>