web app响应式字体设置!rem之我见
Author:[email protected] Date:
之前做沙漠教育的时候,直接以设计图为准,然后强暴式,缩放处理。简单。直接,粗暴!但是,开发快。……一劳永逸!
但那是,现在开发,作为业界良心:是不能那么做的!(那个是被逼的啊
为什么不使用 viewport 等比缩放?
viewport的做法:
<meta name=" viewport " content=" width=320, maximum-scale=1.3, user-scalable=no ">
这种做法是将屏幕等比缩放,缩放过大时会失真,第二个,一些手势事件有莫名其妙的问题。
为什么不设置html font-size?
首先看代码:
@media screen and (max-width:362px)and(min-width: 330px){ html{font-size: 60%;} //.top-banner{ // font-size: 15px //} //.btn-download{ // margin-left: 5%; //} } @media screen and (max-width:330px){ html{font-size: 53.333331%;} //.top-banner{ // font-size: 14px //} //.btn-download{ // margin-left: 4%; //} }
因为我的设计图是750,iphone6设计的!
至于是怎么得出来的数字呢?
我们走到。浏览器默认字体是16像素。1/16=62.5
360/375*62.5%=60%
就黑之前,做响应式图片、padding-top,是一个道理哈!!
REM响应式布局
放弃px单位,使用rem作为单位,这样在不同尺寸的设备上,通过修改根节点的font-size大小,实现等比例缩放
html{ font-size:10px; } #div1{ width:20rem; float:left; } #div2{ width:40rem; float:left; }
现在换到宽度为400px的设备上,保持比例相同,只有改变font-size即可
为什么不用百分比呢?岂不是很简单
百分比是相对于父元素计算的,使用不方便,而且rem多了个字体变化。
自动转换成rem
//改变font-size (function(doc=document,win=windows,widht=720){ var docEI = doc.documentElement, resizeEvt = 'orientationchange' in window?'orientataionchange':'resize', recalc = function(){ var clientWidth = docEI.clientWidth; if(!clientWidth) return; //100是字体大小,1536是开发时浏览器窗口的宽度,等比计算 docEI.style.fontSize = 100*(clientWidth/1536)+'px'; } if(!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document,window);
使用时,把默认width 改为设计稿的尺寸即可。
rem只是等比缩放,只解决了响应式布局的准则 的部分问题 ,还需要配合媒体查询
转载本站文章《web app响应式字体设置!rem之我见》,
请注明出处:https://www.zhoulujun.cn/html/webfront/style/css3/2016_0305_7677.html