Erlo

移动端web自适应适配布局解决方案

时间:2019-02-12 12:02   阅读:75次   来源:博客园页面报错

点赞 打赏

×打赏

支付宝

微信

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;

 

若有什么问题,可以指出来,指导指导我,互相学习哈哈哈!

 

下一篇:vue的采坑之旅--vue-cli脚手架loader重复...

评论留言

还没有评论留言,赶紧来抢楼吧~~

Erlo大厅()

* 这里是“吐槽厅”,所有人可看,只保留当天信息。

  • Erlo.vip2019-04-26 04:52:56Hello、欢迎使用吐槽厅,这里是个吐槽的地方。
  • 首页 笔记分享 案例展示 ERLO 搜索
    鼠标试试
    返回顶部