在前端开发中,如果要对移动端的项目进行适配,可以了解一个插件,叫 hotcss.js,可以解决在不同大小的屏幕上最优显示

另外一种适配,也就是rem

em相同的是它们都是使用元素设定字体大小,不同的是em是根据父级元素设置大小。而rem在根据指定html根元素的字符大小而定的,从IE6到Chrome中,默认根元素的font-size都是16px的。如果想要设置12px的字体大小也就是12px/16px = 0.75rem
  • 由于px是相对固定单位,字号大写直接被定死,无法随着浏览器进行缩放。
  • emrem都是相对单位,em是相对于其父元素的font-size,页面层级越深,em换算越复杂,麻烦。
  • rem直接相对于根元素html,避开层级关系,移动端新型浏览器对其支持较好。
使用
1,在header里设置meta
 <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0"/>

2.在js中设置跟节点的大小

doument.doumentElement.style.fontSize = doument.doumentElement.clientWidth / 640 * 100 + 'px'

这样使用1rem.就可以随着屏幕大小的变化而变化了

01-31 20:44