亲宝软件园·资讯

展开

一种开箱即贼好用的移动端适配方案

陌上兮月 人气:1

主角是谁

  • 在今天这篇文章中,我并不会在这里讲一些移动端视口的概念,包括物理像素和逻辑像素,理想视口,dpr等等等等,我只介绍这样一种非常不错的移动端适配方案:post-css-to-viewport,如果我说这种方案能解决98%以上的移动端布局痛点,我想整个博客园,应该没有人会反驳。

痛点在哪里

在之前有一种流行已久的移动端适配方案,那就是rem,我想下面这两句代码,有不少老移动端都不会陌生:

    const deviceWidth = document.documentElement.clientWidth || document.body.clientWidth;
    document.querySelector('html').style.fontSize = deviceWidth / 7.5 + 'px';
  • 没错,在那个移动端UI稿尺寸为750*1334满天飞的时代,这两句代码确实给开发者带来了很大的方便,这样设置根font-size后,px和rem的转换比例成了100, 为比如UI稿一个长宽分别为120px*40px,那么开发者对应的写成1.2rem*0.4rem就可以了
  • 这种换算已经是颇为方便,但是并非所有的项目都能这样去设置一个方便换算的比例系数,当比例系数为100时,小数点往前面挪两位就行了,然而有的项目设置的换算系数千奇百怪,有50的,有16的,很多已经严重超出口算力所能及的范畴了。所以后来诞生的px-to-rem或者px2rem就是为了解决这个问题
  • 当然,这仍没有给css带来多少简洁的清流,因为人们有时候不需要去转换一些单位,比如字体大小font-size,有不少人希望给字体设置一个固定的px,它不会随着设备的不同而转换成rem,因为这样在一些平板设备上显得太大了

人们希望有这样一种方案...

  • 首先,无论换算方不方便,我都不想换算(就是这么懒

加载全部内容

相关教程
猜你喜欢
用户评论