CSS实现移动端屏幕适配

2020-11-02128次阅读csscss模块

在前端开发中,一般使用淘宝的flexible。其原理是使用js动态计算html的font-size,利用rem来实现不同宽度的适配。但也有它的一些缺点,比如性能损耗,由于js的阻塞加载和动态计算,页面不免会出现卡顿和闪屏的现象,影响用户体验。现在我们不妨看看CSS如何实现移动端屏幕适配!

 

方案一:使用meta标签

在html的head中插入下面的meta标签:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=375, user-scalable=no">

没错,是两个viewport标签。width=device-width写在上面,width=375写在下面,375就是以哪个设备宽度为基准,现在大部分设计稿都是以iphone6的375宽度为基准做2倍图。加了上面两个mata标签,后面的css就可以完全使用px为单位直接使用,整个页面会自动按设备宽度进行等比例缩放。

 

方案二:使用css的calc计算属性

在css中定义html的font-size为:calc(100vw/3.75),calc、vw能兼容ios8+和android4.4+,可放心使用,如下:

html {
  font-size: calc(100vw/3.75);
  -webkit-text-size-adjust: 100%;
}

然后在css中,就可以将所有的px单位除以100,得到rem单位了。比如:

.row>div {
  float: left;
  width: .82rem;
  height: .82rem;
  text-align: center;
  line-height: .82rem;
  margin-left: .05rem;
  background-color: #f0f0f0;
}

上面的rem单位转换,建议大家可以使用px2rem这个插件完成,webpack、vscode都能支持。设置时将rootFontSize 设为100即可。

在vscode中,可以使用ctrl+shift+p,选择px2rem就可以将当前页面的px全部转换为rem。

当然,rem和px可以相互共存,比如我标题栏就想要44px高,这样就不会缩放了。

 

总结:两种方案如何选择

方案一,直接使用html的mata实现整个页面的缩放,比较适合那些宣传单页或全屏游戏交互类,无法实现px与rem共存的情况。

方案二,利用了rem来缩放,可实现与px共存,在借助px2rem的情况下,能高效方便的实现适配。

转自:https://www.toutiao.com/i6773562707711885832

上一篇: css属性选择器  下一篇: React Hook 中useCallback介绍使用与场景  

CSS实现移动端屏幕适配相关文章