rem的适配
知道几个基本的概念
11rem的值永远等于根元素(html)的font-size属性值的大小
2浏览器默认的font-size值的大小是16px
3下文中rem.js的作用 = flexable.js = 安装的 amfe-flexible
4vscode中使用的
作用=px2rem-loader这个插件的作用
移动端的布局,我们采用的flex+rem的方式(这个是我们熟悉的)
PS:vw vh也能实现适配
vw: 把浏览器视口的宽度分成100份 1vw 1%浏览器的宽度
vh:把浏览器视口的高度分成100份 1vh = 1%浏览器的高度
和%比的区别 是这个是永远相对于视口的 百分比布局是相对于父级的
第一种方式: 页面中引入这个js文件
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
// recalc改变font-size值的大小
recalc = function () {
// 获取我设备的宽度
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
// 如果设备宽度大于750 超出移动端返回.
if (clientWidth >= 750) {
docEl.style.fontSize = '100px';
} else {
// 把fontsize值大小设置成大小/750 *100
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};
if (!doc.addEventListener) return;
// 在你屏幕发生旋转,或者是放大缩小时执行上面的函数
win.addEventListener(resizeEvt, recalc, false);
// 在你的页面初始化的时候执行上面的函数
doc.addEventListener('DOMContentLoaded', recalc, false);
/*DOMContentLoaded文档加载完成不包含图片资源 onload包含图片资源*/
})(document, window);
如果设计师给的设计稿的宽度是750设计稿
10行和14行宽度都改成和设计师给的设计稿宽度相同的尺寸
如果在750设计稿上一个div盒子的宽度经过测量 是375px,正好占页面的50%宽度
根据上面的js文件计算得出 fontsize = 100*(750/750)px =100px = 1rem
width: 3.75rem
当项目上线之后之后,
现在A同学用苹果8P来打开这个上线的网站 设备宽度是414px
首先进入页面会加载那个rem.js文件
在苹果8P打开的页面里面 fontsize = 100*(414/750)px =55.2px = 1rem
在这个苹果8p上看这个盒子width:3.75rem 所以说换算成px是多少呢 3.75*55.2 = 207 px
这个207也恰好是当前这个设备的50%
那么同理,在最开始布局的时候,我按照这个设计稿 把所有的单位
width height margin padding left 等等这些写px的单位全部写成了rem
那么在苹果8上也会按比例放大缩小.其它手机相同.就能实现移动端的适配
在vscode里面来进行配置使用插件css2rem的插件
当在代码里面写的时候,就不用口算
第二种方式.使用手机淘宝的flexable.js库
// 加载阿里CDN的文件 <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
把页面平均分成10份.将其中一份赋值给了font-size
在设计师给的750设计稿上1rem = 75px
当你测量了之后,测量出来的宽高等像素值,就要除以75
375px = 5rem
换成一个iphone5的手机是320像素 这个flexable.js就会获取设备的宽度(320) 然后把十分之一赋值给font-size
1rem = 32px 那么我们最开始程序员布局的时候写的5rem = 160px 也占当前手机的一半 也实现了适配当前屏幕,其它设备同理如果用的是这个js插件进行适配的话:要在设置中将基准值设置成75px,在布局的过程中.测量出来的px会通过vscode这个插件自动转化成renm
第三种 在vue项目中,我们可以直接用插件的方式
(这种方式的好处是,在页面布局过程中,直接写px就行,最后,会自动通过插件改成rem)
怎么在项⽬中的px转化成rem
参考下面流程 项目中可以直接根据蓝湖设计稿写px就可以
//安装 amfe-flexible
cnpm install amfe-flexible -S
//安装 px2rem-loader
cnpm install px2rem-loader -D
//在mian.js中引⼊
import 'amfe-flexible'
//在vue.config.js中配置
module.exports = {
chainWebpack: config => {
config.module
.rule('scss')
.test(/\.scss$/)
.oneOf('vue')
.use('px2rem-loader')
.loader('px2rem-loader')
.before('postcss-loader') // this makes it work.
.options({
remUnit: 75, //根据视觉稿，rem为px的⼗分之⼀，750px 75rem
remPrecision: 8 //保留8位⼩数
})
.end()
}
}
//重新启动脚⼿架
当进行了上面的配置,页面上直接写px,最后运行检查浏览器.发现被转化成了rem值
vite工具实现
1:安装
npm install postcss-pxtorem --save-dev
npm install amfe-flexible --save-dev
2.在mian.js中 引入amfe-flexible
import 'amfe-flexible'
3.在vite.config.js中配置postcss-pxtorem
import { defineConfig } from 'vite';
import postCssPxToRem from "postcss-pxtorem";
export default defineConfig({
...
css: {
postcss: {
plugins: [
postCssPxToRem({
rootValue: 75, // （设计稿/10）1rem的大小
propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
})
]
}
}
})
针对面试问题：
总结:移动端适配的方式,我们公司是通过flex+rem方式布局,然后配合一个flexable.js的插件来进行的.
是通过npm 安装了flexable 以及还有一个px2rem的插件,然后呢.在webpack里面配置一下,写代码的时候,直接将蓝湖上面,已有的设计稿的宽度(750),写到布局里面去就实现移动端的适配了.
实际上:这个插件的作用就是相当于动态监测打开设备的的屏幕宽度(onLoad/DOMContentLoaded).或者是在屏幕窗口发生变化的时候(resize事件),动态监测屏幕的宽度,然后把屏幕的宽度分成10份,修改根元素(html)的font-size属性的大小.因为rem永远是跟着这个font-size大小来改变,所以就实现了适配
自己如何实现这个flexable.js文件呢?(想看看你的js逻辑)
我觉得要是我自己写的话,我会去通过addEventListener 监听 onload 事件,还有resize事件吧.在里面的时候获取这个clientWidth设备宽度.然后除以10,然后通过setAttribute来修改html元素的font-size值的大小.应该就可以