关于rem

关于手机端字体设置的rem怎么定义

css格式化文件reset.css中加入：
@media screen and (max-width: 750px){ html{font-size:30px;} }
@media screen and (min-width:640px) and (max-width:749px){ html{font-size:25px; } }
@media screen and (min-width:480px) and (max-width:639px){ html{font-size:20px; } }
@media screen and (min-width:320px) and (max-width:479px){ html{font-size:15px; } }

根据不同尺寸的屏幕，去定义html级的单位字体大小，在PSD转换制作页面的时候，基本的手机端PSD的尺寸为750*1335，对照下来的尺寸也就是1rem=30px，在制作时掌握好计算尺寸就基本能解决这些问题了。
手机端的高度可以固定，宽度能用百分比来表示，就不要用rem去固定，必要的固定宽度的，就用rem固定，像一些按钮，基本都是用百分比去表示宽度的，像一些固定宽度的图标就用rem去固定。

在页面中优先写出媒体查询的标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

举例下面三款老年机
设备名称 分辨率 估算字体大小 rem与px转换
iphone5 320568 font-size：12px； 1rem=12px
iphone6 375667 font-size：14px； 1rem=14px
iphone6 Plus 414*736 font-size：16px； 1rem=16px

html,body{ height: 100%; margin: 0; padding: 0; font-size: 14px;}//注意初始样式必须写在最顶部！！！！如果写在媒体查询底部的话就会覆盖上方的媒体查询（因为是层叠样式表嘛~）
@media screen and (max-width:320px ) { html{font-size: 12px;} }
@media screen and (min-width:321px) and (max-width:750px ) { html{font-size: 14px;} }
@media screen and (min-width:751px ) { html{font-size: 16px;}

unction rem() { var w = Math.min(document.documentElement.getBoundingClientRect().width, 500); document.getElementsByTagName('html')[0].style.fontSize = w * 100 / 320 + 'px'; } rem(); window.onresize = function() { rem(); };

 

 

 

 

 

至于为什么js中要用w＊100 / 320呢 这个320 是因为我们美工给我的图都是按照5s的标准来做的，就是320px，当然图都是640px的，所以我就除以的320，如果美工给你的图是375*2的 那么你就需要把320换成375，因为这样你在图里量出的div的宽度才能符合。

 

很多高度问题因为比例的换算，到最后整个页面变形。后期问题太多，果断换了media调整整个项目尺寸。

使用rem应注意什么？

　1）做出来的效果与效果图有些许偏差。

为什么会出现这个原因呢？这是因为浏览器对小数数值的处理各不相同导致。不同浏览器计算rem转换为px数值时，对于小数点后的数值的处理是有所偏差，rem计算偏差的根源是浏览器内核数字类型的区别，如果浏览器的内核数字类型是float类型，能够较好地支持有小数点的数值。当浏览器内核数字类型是int类型，不支持小数点，会对数字进行四舍五入，这样就会有偏差。如果元素越大偏差得就越明显！这个坑几乎无法避免，只能让他更好的适应最多的浏览器。比如chroem内核。

 

2）雪碧图定位问题

rem的换算成px的尺寸非严格精确，如果雪碧图图标之间的距离过小，就可能导致图标过界，因此图与图之间的间隙需要留相应大一点。

 

3）rem单位最好不用在PC端

因为pc端有的浏览器不识别12以下的字体

性能、GUP加速、技术选型等）才能做出用户体验超好的web页面，还有，rem也并不是万能的，也有一些场景是不适于使用rem的，比如 当用作图片或者一些不能缩放的展示时，必须要使用固定的px值，因为缩放可能会导致图片压缩变形等。

-------------------整理于yingxiang 20190218