关于Web纯移动端适配各种手机型号的心得
关于Web纯移动端适配各种手机型号的心得 em与rem的区别 Web纯移动端适配类型 第一种类型的适配 第二种类型的适配 第一次写博客，不喜勿喷，请见谅！！！ em与rem的区别 在讲如何进行适配之前，我觉得很有必要先了解一下em和rem，作为一名前端开发者，不能只停留在px上。 em和rem相对于px来说，它们更加具有灵活性，它们是相对长度单位，也就是说长度不是一成不变的，它们更适用于响应式布局。 em ①如果子元素字体大小是em，那么它是相对于父元素的font-size的。 ②如果元素的width、height、padding、margin、top、left、bottom、right使用的是em的话，那么它是相对于本元素的font-size。 rem rem是全部元素的长度都相对于根元素html的fon-size的。 Web纯移动端适配类型 第一种是手机屏幕必须显示完整个页面，无滚动条，height和width都是100%。 第二种是width是100%、height超过屏幕高度的页面，有滚动条。 关于 本文章里 的所有代码，都是基于Vue.js的。 第一种类型的适配 对于这种类型的适配，使用的单位是em。 需要根据设计稿的高度与屏幕的高度得出比例，然后乘以预先设好的font-size。话不多说，直接上代码… html的head头设置 //index.html //设置head