移动开发宽度自适应

2019-02-12 by 杜宏伟

移动端开发网页适配问题更加复杂,因为宽度不定,用户还可以缩放等等。本文简单聊下宽度适配的问题。

先说两个概念

逻辑像素

逻辑象素与与设备无关,在css中的的1px就表示的是逻辑像素

物理像素

物理象素是设备相关的。不同的设备的物理象素数量不同,与逻辑象素的对应关系也不同。可能一个逻辑像素是用4个物理像素来展现的。

极简宽度自适应

一般来说,可以不必关注物理像素,因为css描述的是逻辑像素。对于一个设计稿来说,如何让它在不同的宽度下面看起来效果一样呢?注意,是看起来效果一样,可以不是完全一样。最简单的处理方案就是等比放大缩小。

rem单位可以做到这一个。举个例子来说明rem,比如 Html元素 font-size:10px 那么1rem就是10px。当显示宽度不同的时候,只需要调 html元素的font-size大小,就可以达到等比放大缩小的效果。

//一般设计稿的宽是是375,如果是其它值也可以,直接除就可以。
  document.documentElement.style.fontSize=  document.documentElement.clientWidth/375 

这样设置以后,设计稿上的1px就在css中就可以用1rem表示。

body元素直接子元素宽度100%用 width:100%表示。因为这时无法知道多少rem是100%宽度。

急救包

适配过程中会遇到很多问题,下面列举几个问题的解决办法。

字体设置1px失败

上面说的直接在html上设font-size:1px可能会失败。因为浏览器会认为,1px太小了,不可以设置这么小的字体。有两个办法,一是可以取消浏览器的这个限制(理论上可以,不过兼容性有待测试),大家都在用的是第二个办法,直接放大100倍,为什么不是10倍,因为10倍也可以太小了。为什么不是80倍,90倍,因为那样不方便换算。所以一般这样写

//一般设计稿的宽是是375,如果是其它值也可以,直接除就可以。
  document.documentElement.style.fontSize=  document.documentElement.clientWidth/375*100 

设计稿上上的1pxrem表示就是 0.01rem,

页面缓存

如果在前进后退等操作的时候,页面展现不正确,可以尝试加上下面代码

 window.addEventListener('pageshow', function (e) {
    //如果页面来自缓存
    if (e.persisted) {
           //执行html font-size设置逻辑
    }
 })

视觉的一致性

对于图片等比缩放没什么问题,但文字不一样,尤其是大段阅读性的文字,缩放太多的话,会影响阅读的舒适性。这时可以考虑采用px单位。

表示100%宽度

最直接的写法是 width:100%,但是这样写有一个条件在里面,就是必须是body的直接子元素,否则可能会不正确。因为百分比是相对单位。还好,用vw可以解决这个问题,兼容性差点,不过会越来越好的。

1像素问题

新版的系统现在已经支持这样写了0.5px,如果你的系统刚好不支持,那就得费点时间了,参考有有介绍。

参考

移动端1像素边框问题

我叫杜宏伟,前端开发。

一直想写博客,在2018的年的最后几天,终于上线了。

对于前端开发,一个特点就是太零散,很容易会了后面忘了前面,所以归纳总结很重要。再有就是分享,做前端好多年,以前都是看你们写的文章, 现在我也开始写一些,希望可以帮到入行的小伙伴。微信号 duhongwei5775

欢迎转载,只需注明作者,出处即可

版权说明:署名 4.0 国际(CC BY 4.0)