几种响应式文字的玩法

上一篇 三种响应式文字 未经过十分严谨地调查,错误颇多,于是在此篇重头来过。

 

讲真,其实我也不知道该如何为此篇开头,

因为响应式文字需不需要做其实我也没有深入探究过,

但在学习其他网站的过程中,我发现了一些比较新奇的做法,所以想试着梳理一下,

为何会出现这种有些奇怪,可能实则非常奇妙的解决方案。

如果理解有偏差的地方,还望大佬们不吝赐教。

 

简单来说,响应式是为了让网页在各种显示设备上都有不错的浏览体验,

无论是 @media 将元素换行,后台获取 userAgent 返回不同页面,利用 viewport 限定视图,还是利用根元素 html 属性来计算大小等,

他们都能实现各自编程特色的响应式布局,非要说谁是最优,恐怕还是得依需求而定。

 

接下来我们先大致罗列一下,这几种布局方法的如何施展的。

 

众所周知的 Bootstrap,它的栅栏布局即为媒体查询的代表,完全通过屏宽来判断元素是否换行和是否显示。

<style>
.col-xs-2 {width: 50%} @media (min-width: 768px) { .col-sm-3 {width: 33.333333%} } @media (min-width: 992px) { .col-md-4 {width: 25%} } @media (min-width: 1200px) { .col-lg-5 {width: 20%} } </style> <div class="col-xs-2 col-sm-3 col-md-4 col-lg-5"></div>

非常方便操作和容易理解地将显示设备按宽度分成了四个区间,各区间内按栅栏占比给予宽度。

 

然而,随着移动互联网的迅猛突进,以及 WebApp 的使用,也由于手机的分辨率和尺寸被厂商们不断更新,

768px 以下的设计要求也相应拔高,人们开始对响应式的要求也有了些改变。

比如 iPhone4 上的文字大小还适合 iPhone6 吗,Retina 屏的 1px 问题,devicePixelRate 和屏幕缩放问题等等...

所以为了解决这些问题产生了非常丰富的解决方案,我们一个一个来。

 

首先,随着屏幕越大,字体大小也越来越大,好像是个不错的想法耶。

html { font-size: 10px;}
@media (min-width: 376px) and (max-width: 414px) {
    html{font-size: 11px;}
}
@media (min-width: 415px) and (max-width: 639px) {
    html{font-size: 13px;}
}
@media (min-width: 640px) and (max-width: 719px) {
    html{font-size: 14px;}
}
@media (min-width: 720px) and (max-width: 749px) {
    html{font-size: 15px;}
}
@media (min-width: 750px) and (max-width: 799px) {
    html{font-size: 16px;}
}
@media (min-width: 800px) and (max-width: 992px) {
    html{font-size: 20px;}
}
body {
    margin: 0;
    font-size: 1.6rem;
}

实践情况告诉我们,在 iPhone6 plus 上这种字大的体验确实不赖。

不过好像并不是字越大就越好看,比如在 iPad 上,字大绝对不是一个好的视觉体验。

 

所以又有了另一种搞法,根元素的字体大小由宽度和 devicePixelRate 来计算求得,也比上面的方法更注重了 dpr 的考虑。

<style>
body {font-size: .12rem}
</style>

<script>
!function() {
    function e() {
        r.innerText = "html{font-size:" + (a.style.fontSize = a.getBoundingClientRect().width / o * d + "px") + " !important;}"
    }
    var t = navigator.userAgent,
        n = (t.match(/(iPhone|iPad|iPod)/), t.match(/Android/i), window),
        i = document,
        a = i.documentElement,
        o = (n.devicePixelRatio, 375),
        d = 100,
        r = (i.head.querySelector('[name="viewport"]'), i.createElement("style"));
    r.innerText = "html{font-size:100px !important}", i.head.appendChild(r), e(), n.addEventListener("resize", e, !1);
    a.className += t.match(/ucbrowser/i) ? " app-uc " : ""
}();
</script>

这里并没有直接在设置 font-size 的时候就乘以 0.12 的原因可能是,这样会比较容易算宽度吧,比如 3.75rem 便是一个屏宽咯。

当然不用百分比而用 rem 来定宽,也是有些好处的。

比如两栏式百分比布局的间隙也只能百分比咯(calc 另当别论)造成左右和上下间隙不相等,

元素纵横比直接用数值就能完成,因为现在的 rem 就像百分比那样非常自动了,

后来发现,它还有 PC 端缩放浏览器比例保持页面不变的功效。

 

而后又在此基础上又发现另一插件 adaptive.js,基本同上,只是 1px=0.1rem 更好计算了。

但又有极大的不同,它的字体大小是按比例缩放的,也就是保证了所有设备上除了高度不同,看到的样子是完全不变的。

可以设置设计稿宽度,默认字体大小,越发简化设计稿到开发的长度计算过程。最后调用一个 init(),开启该插件。

然而,要注意一下,此插件在屏宽较大时,字体也会更大,因此最好设定 maxWidth 属性。

<script src="js/adaptive.js"></script>
<script>
    window['adaptive'].desinWidth = 640;
    window['adaptive'].baseFont = 24;
    window['adaptive'].maxWidth = 480;  // 此宽度最佳
    window['adaptive'].setRemCallback = function () {
        // 每次变换的回调
    }
    window['adaptive'].init();
</script>

 

除此之外,还有淘宝的搞法,lib-flexible.js,它继承了上面 rem 式响应式布局的优点。

!function(a,b){function c(){var b=f.getBoundingClientRect().width;b/i>540&&(b=540*i);var c=b/10;f.style.fontSize=c+"px",k.rem=a.rem=c}var d,e=a.document,f=e.documentElement,g=e.querySelector('meta[name="viewport"]'),h=e.querySelector('meta[name="flexible"]'),i=0,j=0,k=b.flexible||(b.flexible={});if(g){console.warn("将根据已有的meta标签来设置缩放比例");var l=g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);l&&(j=parseFloat(l[1]),i=parseInt(1/j))}else if(h){var m=h.getAttribute("content");if(m){var n=m.match(/initial\-dpr=([\d\.]+)/),o=m.match(/maximum\-dpr=([\d\.]+)/);n&&(i=parseFloat(n[1]),j=parseFloat((1/i).toFixed(2))),o&&(i=parseFloat(o[1]),j=parseFloat((1/i).toFixed(2)))}}if(!i&&!j){var p=(a.navigator.appVersion.match(/android/gi),a.navigator.appVersion.match(/iphone/gi)),q=a.devicePixelRatio;i=p?q>=3&&(!i||i>=3)?3:q>=2&&(!i||i>=2)?2:1:1,j=1/i}if(f.setAttribute("data-dpr",i),!g)if(g=e.createElement("meta"),g.setAttribute("name","viewport"),g.setAttribute("content","initial-scale="+j+", maximum-scale="+j+", minimum-scale="+j+", user-scalable=no"),f.firstElementChild)f.firstElementChild.appendChild(g);else{var r=e.createElement("div");r.appendChild(g),e.write(r.innerHTML)}a.addEventListener("resize",function(){clearTimeout(d),d=setTimeout(c,300)},!1),a.addEventListener("pageshow",function(a){a.persisted&&(clearTimeout(d),d=setTimeout(c,300))},!1),"complete"===e.readyState?e.body.style.fontSize=12*i+"px":e.addEventListener("DOMContentLoaded",function(){e.body.style.fontSize=12*i+"px"},!1),c(),k.dpr=a.dpr=i,k.refreshRem=c,k.rem2px=function(a){var b=parseFloat(a)*this.rem;return"string"==typeof a&&a.match(/rem$/)&&(b+="px"),b},k.px2rem=function(a){var b=parseFloat(a)/this.rem;return"string"==typeof a&&a.match(/px$/)&&(b+="rem"),b}}(window,window.lib||(window.lib={})); 

它和上面的方法在 rem 方面是类似的,10rem 便是一个屏宽,但在文字方面不太一样,

淘宝网触屏版 并不想让字体越来越大,而始终为 12px 或 24px,保证了图片和布局方面的百分比变化,但文字小巧不变的模样。

其次,640的设计稿,1px=1/(640/10)*2rem,750的设计稿:1px=1/(750/10)*2.3333rem,

那么需要用到 px 转 rem 的一些快捷方法,比如 sublime 插件 cssrem

值得注意的是,@media 时的 10rem 是原来的那个 10rem,并非 750 设计稿屏宽对应的 10rem。

而且假设我们进行了媒体查询让内容宽度变成 20rem,但高度 10rem 也是需要重新设定改为 20rem 才能是正方形了。

 

最后,再讲一个比较奇葩但又很有效的响应式方法。

<meta name="viewport" content="width=750,user-scalable=no" />

<style>
html, body {
    width: 750px;
    margin: 0 auto;
    overflow: hidden;
}
</style>

有没有感觉到一股我不管我不听的倔强气息,这种方法意味着,不管设备怎样,我只当设备是 750px 视图大小的设备。

375px 就是半个屏幕,这对做应用场景 H5 的小伙伴可谓是福音,做雪碧图用 px 定位什么的才是最爽的,

但它也有着它的坏处,也就是设备的宽高比是不定的,比如 iPhone4 和 iPhone5 一样宽但高度短一截,所以最好再加上一个上下居中的解决办法。

 

这几种方法都各有特色,有各自方便的角度,所以依照需求和喜好,多研究下吧,我也期望能有人来 和我讨论,么么哒

posted on 2017-05-18 17:08  永恒的浪荡时光  阅读(696)  评论(0编辑  收藏  举报

导航