移动端web自适应适配布局解决方案
程序员文章站
2023-02-21 10:54:42
100%还原设计图，要注意： 看布局，分析结构。 感觉难点在于： 1.测量精度（ps测量数据）； 2.文字的行高。 前段时间写个移动端适配的页面（刚接触这方面），查了一些资料，用以下方法能实现： 1.设置理想视口： 自动适应屏幕宽度 ：网页的宽度默认等于屏幕的宽度
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；
若有什么问题，可以指出来，指导指导我，互相学习哈哈哈！
上一篇： 彻底理解正则
下一篇： js中的栈、堆、队列、内存空间