几种响应式文字详解
讲真,其实我也不知道该如何为此篇开头,
因为响应式文字需不需要做其实我也没有深入探究过,
但在学习其他网站的过程中,我发现了一些比较新奇的做法,所以想试着梳理一下,
为何会出现这种有些奇怪,可能实则非常奇妙的解决方案。
如果理解有偏差的地方,还望大佬们不吝赐教。
简单来说,响应式是为了让网页在各种显示设备上都有不错的浏览体验,
无论是@media将元素换行,后台获取userAgent返回不同页面,利用viewport限定视图,还是利用根元素html属性来计算大小等,
他们都能实现各自编程特色的响应式布局,非要说谁是最优,恐怕还是得依需求而定。
接下来我们先大致罗列一下,这几种布局方法的如何施展的。
众所周知的Bootstrap,它的栅栏布局即为媒体查询的代表,完全通过屏宽来判断元素是否换行和是否显示。
非常方便操作和容易理解地将显示设备按宽度分成了四个区间,各区间内按栅栏占比给予宽度。
然而,随着移动互联网的迅猛突进,以及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; }
实践情况告诉我们,在iPhone6plus上这种字大的体验确实不赖。
不过好像并不是字越大就越好看,比如在iPad上,字大绝对不是一个好的视觉体验。
所以又有了另一种搞法,根元素的字体大小由宽度和devicePixelRate来计算求得,也比上面的方法更注重了dpr的考虑。
这里并没有直接在设置font-size的时候就乘以0.12的原因可能是,这样会比较容易算宽度吧,比如3.75rem便是一个屏宽咯。
当然不用百分比而用rem来定宽,也是有些好处的。
比如两栏式百分比布局的间隙也只能百分比咯(calc另当别论)造成左右和上下间隙不相等,
元素纵横比直接用数值就能完成,因为现在的rem就像百分比那样非常自动了,
后来发现,它还有PC端缩放浏览器比例保持页面不变的功效。
除此之外,还有淘宝的搞法,lib-flexible.js。
!function(a,b){functionc(){varb=f.getBoundingClientRect().width;b/i>540&&(b=540*i);varc=b/10;f.style.fontSize=c+"px",k.rem=a.rem=c}vard,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标签来设置缩放比例");varl=g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);l&&(j=parseFloat(l[1]),i=parseInt(1/j))}elseif(h){varm=h.getAttribute("content");if(m){varn=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){varp=(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{varr=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){varb=parseFloat(a)*this.rem;return"string"==typeofa&&a.match(/rem$/)&&(b+="px"),b},k.px2rem=function(a){varb=parseFloat(a)/this.rem;return"string"==typeofa&&a.match(/px$/)&&(b+="rem"),b}}(window,window.lib||(window.lib={}));
它和上面的方法在rem方面是类似的,10rem便是一个屏宽,但在文字方面不太一样,
淘宝网触屏版并不想让字体越来越大,而始终为12px或24px,
而结果来看,字小图大加留白好像反而有些精细的感觉,也解决了上面方法PC端字超大的问题。
另外,如果使用此类方法,那么@media划分屏宽节点就得靠rem了哟,比如淘宝用的10rem。
最后,再讲一个比较奇葩但又很有效的响应式方法。
有没有感觉到一股我不管我不听的倔强气息,这种方法意味着,不管设备怎样,我只当设备是750px视图大小的设备。
375px就是半个屏幕,这对做应用场景H5的小伙伴可谓是福音,做雪碧图用px定位什么的才是最爽的,
但它也有着它的坏处,也就是设备的宽高比是不定的,比如iPhone4和iPhone5一样宽但高度短一截,所以最好再加上一个上下居中的解决办法。
这几种方法都各有特色,有各自方便的角度,所以依照需求和喜好,多研究下吧,我也期望能有人来和我讨论,么么哒
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持毛票票!