您好,欢迎来到[编程问答]网站首页   源码下载   电子书籍   软件下载   专题
当前位置:首页 >> 编程问答 >> 移动开发 >> 使用rem做移动端网页font-size初始设置多大比较好呢?

使用rem做移动端网页font-size初始设置多大比较好呢?(1/2)

来源:网络整理     时间:2016/5/14 6:11:26     关键词:size,font

关于网友提出的“使用rem做移动端网页font-size初始设置多大比较好呢?”问题疑问,本网通过在网上对“使用rem做移动端网页font-size初始设置多大比较好呢?”有关的相关答案进行了整理,供用户进行参考,详细问题解答如下:

问题:使用rem做移动端网页font-size初始设置多大比较好呢?
描述:

自己用sublime下了一个CSSREM插件(px自动转rem)里边的初始比例是40,
我用哪个比例做网页出了很多问题,像一些引入项目插件都出了尺寸问题(标签过大,撑破网页。)
看的一篇文章http://isux.tencent.com/web-app-rem.html
文章中的尺寸也设的是40(设计稿是640,);

我不明白为什么要设那么大一个初始比例?
那我在实际项目中设置多少比较好?


解决方案1:

http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

解决方案2:

不得不,祭出淘宝的文章。来解决你的问题了。

http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

解决方案3:

首先你只要知道,rem只是作为一个换算系数而存在,所以根标签的font-size如何设置,还是以方便自己来计算为主。
在项目中,设计师经常提供给我的设计稿都是640px宽的文件,所以简单说下iphone目前几个主流尺寸的适配。
先上结论:

html{
    font-size: 100px;
}
@media screen and (min-width: 375px){
  html{
    font-size: 117.1875px;
  }
}
@media screen and (min-width: 414px){
  html{
    font-size: 129.375px;
  }
}

对于iphone4,iphone5,iphone5s等320px宽的屏幕,1rem = 100px。那么假如640px宽的设计稿中某个元素是120px,那么换算到css中就可以方便的计算为.6rem;

相应的,
对于iphone6,iphone6s这种375px宽的屏幕,根元素font-size的值就是375/320 = 117.1875;
对于iphone6 plus,iphone6s plus这种414px宽的屏幕,根元素font-size的值就是414/320 = 129.375;

这些就是我在项目中常用的设置方法。总之,都是以方便自己计算为主。搞明白道理就行。

解决方案4:

要根据不同设备宽度,设计稿宽度和dpr来设定

解决方案5:

如果有工具执行单位换算,什么比例都是可以的,反正不用自己换算。 如果没有这样的工具,根据设计稿快速的换算,会大大提高效率。比如 1rem =100px,设计稿上的宽高就可以直接缩小100倍,就是rem 单位,这样就很方便。

如果追求更多设备的适配,可以动态的计算根元素的font-size,如果只考虑几个设备,用媒体查询也是可以的,看业务需求。

另外。多说几句。rem 不是万能的,也有其缺点。最终实际应用到元素上还是px,在转换后,可能存在小数的情况,这个时候就可能出现1px的不对称。

解决方案6:

rem是为了补充em缺陷而推出的,你不应该直接在html里面设置fontsize,相反,默认的fontsize正好就是确保了rem值作为相对值不会改变

解决方案7:

就按你图上的设置就可以。设置多少不是关键,都是要去计算,选择一个合适的值会减少计算。但是既然你用了这个转换插件所以也就无所谓设置多少了。

相关图片

相关文章