响应式单位（响应式的概念）

本文目录一览：

• 1、px、vh、vw、rem
• 2、1920响应式布局列宽多少
• 3、静态、自适应、流式、响应式四种网页布局有什么区别?
• 4、主令控制器的工作原理
• 5、uni-app之响应式单位upx和rpx

px、vh、vw、rem

像素单位从小到大px、rpx、em、rem、vm、vh、vw。计算机屏幕上所能显示的最小单位。用来表示图像的单位。在非学术性媒体中，亦通俗作象素。

px就是pixel（像素）的缩写，绝对单位，相对长度单位，相对于屏幕分辨率。em是相对单位 ，参考物是 父元素 的font-size，具有继承的特点。浏览器默认字体是16px，整个页面内1em不是一个固定的值。

rem是指相对于根元素的字体大小的单位。根元素 如果根元素是相对设备尺寸自动变换。VW 视窗宽度，1vw等于视窗宽度的1%。

vw单位可以根据窗口的宽度自动改变大小，1vw是窗口宽度的1%；vh单位可以根据窗口的高度自动改变大小，1vh是窗口高度的1%；vw是css的一个属性，和px，rem等类似，属于长度单位。

1920响应式布局列宽多少

1、网页设计选用的分辨率是72像素，使用的画布尺寸1920px*1080px。但是并不意味着在整个画布上进行设计，一般采用全屏展示和两侧留白的方式。全屏展示，是整个网站看起来大气一些，但是布局要合理安排，不然看起来有些傻大的感觉。

2、检测到不同的屏幕尺寸的时候改变栅格的一些数值，变成我们预先设计的样式，这就是响应式设计。 栅格是怎么响应的固定栅格栏和槽的宽度是固定不变的，不随屏幕的大小而变化。到一定的临界值的时候栅格列数会发生变化。

3、第二种 rem响应式布局方案(等比缩放)：使用的时候按照1920的设计稿来做。

静态、自适应、流式、响应式四种网页布局有什么区别?

1、不同点是响应式的模板 在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式。而自适应不会，所有的设备看起来都是一套的模板，不过是长度或者图片变小了，不会根据设备采用不同的展示样式。

2、流式布局 ：元素的宽高用 百分比 做单位，元素宽高按屏幕分辨率调整，布局不发生变化。屏幕尺度跨度过大的情况下，页面不能正常显示。

3、响应式布局是指网页分别为不同的屏幕分辨率定义不同的布局，同时在每个布局中，各元素大小采用百分比定义宽度，即页面元素宽度随着窗口调整而自动适配。可以看做是定义了几个不同尺寸的流式布局。

4、响应式布局：通过检测设备信息，决定网页布局方式，即用户如果采用不同的设备访问同一个网页，有可能会看到不一样的内容，一般情况下是检测设备屏幕的宽度来实现。

主令控制器的工作原理

1、电气控制的按钮就叫主令控制器，常开按下接通，常闭按下断开。道理一般就是这样的。

2、主令电器：主令电器是用作闭合或断开控制电路，以发出指令或作程序控制的开关电器。它包括按钮、凸轮开关、行程开关、脚踏开关、接近开关、倒顺开关、紧急开关、钮子开关等。

3、主令电器是用作闭合或断开控制电路，以发出指令或作程序控制的开关电器。常见的有以下几种：行程开关 用生产机械运动部件的碰撞使其触头动作来实现接通或分断控制电路，达到一定的控制目的。

uni-app之响应式单位upx和rpx

1、重点 ：官方推荐使用rpx替代upx，参考： 推荐使用rpx替代upx的公告 。

2、小程序和uni-app都是用类似的思路来做的分辨率兼容。小程序的rpx或者uni-app的upx，在编译的时候会对应的转换为相对单位。

3、nvue中，uni-app模式可以使用px，rpx表现与vue中一致，weex模式目前遵循weex的单位；点击切换实现路由跳转 实现方法： 在index.vue的页面入口写一个点击方法，利用uni.navigateTo({})写上将要跳转的页面路径。

4、对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object， propertyName， value) 方法向嵌套对象添加响应式属性。

5、花几个小时搬迁到uniapp后发现px的适配出问题了。官方给的方案是：在src-mainfest.json中开启transformPx，试了下发现适配问题更大。于是在网上找了下方案。