移动端web自适应适配布局解决方案
发布时间：2020-12-14 19:48:42 所属栏目：资源 来源：网络整理
导读：100%还原设计图，要注意：? 看布局，分析结构。 div style="white-space: pre-wrap; line-height: 1.75"感觉难点在于： div style="white-space: pre-wrap; text-indent: 28px; line-height: 1.75"1.测量精度（ps测量数据）； div style="white-space: pre-w
|
100%还原设计图，要注意：? 看布局，分析结构。 <div style="white-space: pre-wrap; line-height: 1.75">感觉难点在于： 前段时间写个移动端适配的页面（刚接触这方面），查了一些资料，用以下方法能实现： 1.设置理想视口：
2.动态设置fontSize：
== 1024;
} <span style="color: #008000">//<span style="color: #008000">加上以下代码是为了切换设备时能时刻刷新动态fontSize，从而得到正确的布局window.addEventListener('resize',<span style="color: #0000ff">function<span style="color: #000000"> () { resize(); }); window.addEventListener('DOMContentLoaded',<span style="color: #0000ff">function<span style="color: #000000"> () { resize(); }); 3.还需要css样式中用@media设置fontSize：
{:;
}@media only screen and (min-device-width:320px) and (max-device-height:568px){<span style="color: #ff0000">
html{ font-size:<span style="color: #0000ff"> 42.6667px; }<span style="color: #800000"> } @media only screen and (min-device-width:375px) and (-webkit-min-device-pixel-ratio:2){<span style="color: #ff0000"> html{ font-size:<span style="color: #0000ff"> 50px; }<span style="color: #800000"> } @media only screen and (min-device-width:412px) and (-webkit-min-device-pixel-ratio:3){<span style="color: #ff0000"> html{ font-size:<span style="color: #0000ff"> 55.2px; }<span style="color: #800000"> } （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |