100%还原设计图,要注意:
看布局,分析结构。
感觉难点在于:
1.测量精度(ps测量数据);
2.文字的行高。
前段时间写个移动端适配的页面(刚接触这方面),查了一些资料,用以下方法能实现:
1.设置理想视口:
自动适应屏幕宽度 :网页的宽度默认等于屏幕的宽度
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
2.动态设置fontSize:
function resize() { let width = window.screen.width; const basicvalue = 1024; //设计稿上的分辨率大小 //放大100倍,为了方便计算rem大小 document.documentElement.style.fontSize = (width / basicvalue) * 100 + ‘px‘; } //加上以下代码是为了切换设备时能时刻刷新动态fontSize,从而得到正确的布局 window.addEventListener(‘resize‘, function () { resize(); }); window.addEventListener(‘DOMContentLoaded‘, function () { resize(); });
3.还需要css样式中用@media设置fontSize:
需要额外的媒介查询
html{ font-size: 100px; } @media only screen and (min-device-width:320px) and (max-device-height:568px){ html{ font-size: 42.6667px; } } @media only screen and (min-device-width:375px) and (-webkit-min-device-pixel-ratio:2){ html{ font-size: 50px; } } @media only screen and (min-device-width:412px) and (-webkit-min-device-pixel-ratio:3){ html{ font-size: 55.2px; } }
之后布局的宽高及边距等都可以用rem来布局了,即100px = 1rem;
若有什么问题,可以指出来,指导指导我,互相学习哈哈哈!
原文地址:https://www.cnblogs.com/ycgo/p/10364441.html
时间: 2024-10-11 02:42:19