项目中header用的element的meun菜单，由于项目中header的布局，使用layout布局也没法实现屏幕的宽度变化 菜单的每个题目的间距适当缩小，就想到用监听屏幕宽度来让他们之间的间距大小变化 <el-col :class="screenWidth <= 1350 ? screenWid ...
分类：
其他好文 时间：
2020-04-28 15:28:28
阅读次数：
132
mounted() { let that = this; // <!--把window.onresize事件挂在到mounted函数上--> window.onresize = () => { return (() => { window.fullHeight = document.document ...
分类：
其他好文 时间：
2020-04-18 18:27:24
阅读次数：
54
css的变化 标准的css基本都是支持的。 选择器有2个变化：*选择器不支持；元素选择器里没有body，改为了page。微信小程序即是如此。 复制代码page{ } 单位方面，px无法动态适应不同宽度的屏幕，rem只能用于h5。如果想使用根据屏幕宽度自适应的单位，推荐使用rpx，全端支持。 尺寸单位 ...
分类：
微信 时间：
2020-04-17 20:14:50
阅读次数：
283
尺寸单位 uni-app 支持的通用 css 单位包括 px、rpx px 即屏幕像素 rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。 vue页面支持普通H5单位，但在nvue里不支持： rem ...
分类：
微信 时间：
2020-04-17 20:00:14
阅读次数：
386
媒体查询 什么是媒体查询？ 指查询媒体的类型和媒体的屏幕宽度 //类型大概有三种screen、print、speech @media screen and (min-width:300px) { /*选择打印机与屏幕阅读器之外的所有设备，并且最小宽度 >= 300px 才会生效。*/ color:r ...
分类：
其他好文 时间：
2020-04-15 13:53:16
阅读次数：
91
flexbox结构下echarts图表如何实现自适应布局？ 已知echarts图表需要放在页面中心，宽度为屏幕宽度1/2，高度为距顶部80px，距底部60px，怎么放这个echarts图表比较好。 在扩大、减小屏幕宽度时，echarts图表可以自动跟着屏幕变化。 问题在于第一次布局成功后，图表宽度就 ...
分类：
其他好文 时间：
2020-04-12 18:41:23
阅读次数：
67
小程序 的 px 转化为rpx 在 获取 屏幕高度 后 ,这个单位是px ,可是我的项目是用rpx,所以这里就涉及一个转化的公式了 1rpx = 750 / 设备屏幕宽度 所以 wx.getSystemInfo({ success:function (res) { console.log(res.w ...
分类：
其他好文 时间：
2020-04-04 22:37:26
阅读次数：
140
rem是根本根元素，也就是html的字体大小来计算被定义元素的大小，而根元素的字体大小取绝于屏幕宽度，相应的JS代码： (function (doc, win) { var fs = document.body.clientWidth / 750 * 28; fs = fs > 24 ? 24 : ...
分类：
移动开发 时间：
2020-03-14 19:54:31
阅读次数：
67
rem 只与 html 的 font-size 有关，比如html{font-size: 16px} body{font-size: 62.5%}，那么 1rem 还是 16px，与其他无关 在头部引入下面这段 js ，会根据屏幕宽度自动设置 html 的 font-size，设计图若是 750px ...
分类：
移动开发 时间：
2020-02-24 15:06:53
阅读次数：
85
一. 屏幕适配 1. 原理：监听屏幕宽度，动态改变html的根节点font-size 2. 换算：font-size的px 相当于 1rem 3. 缺陷：只能做到宽度布局会一样，但是高度布局也相同但由于不同手机比例不同可能会超出屏幕范围，高度做可滚动 4. 注意：高度布局要从上往下布局，不然可能出问 ...
分类：
其他好文 时间：
2020-02-22 16:01:36
阅读次数：
61
