1、场景：最近有一个需求，需要将pc端的代码在移动端进行展示，保持节点dom不变，只在样式上做修改。
2、实现方式：
（1）前提需要在.html中标签中设置网页视口
<meta
name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,viewport-fit=cover"
/>
（2）采用@media的方式重写样式
<style lang="less" scoped>
//移动端样式
@media (max-width: 768px) {
...
}
//pc端样式
@media (min-width: 768px) {
...
}
</style>
** 补充：**
1、理解自适应和响应式
自适应：一套设计在布局方面改造去适配不同终端，一般采用flex,rem,vh-vw。
响应式：多套设计采用媒体查询去适配不同需求，一般采用媒体查询的方式。
2、屏幕分辨率
屏幕分辨率是一个物理属性，代表一个屏幕上有多少个像素点，例如iphone 6 的分辨率是1334px 750px,表示屏幕可以分成1334750个像素点。
3、屏幕尺寸
即手机的尺寸，如5.5寸。
4、屏幕像素密度dpi/ppi
每单位尺寸上，有多少个物理像素点。
5、css像素
css像素不是绝对单位，是相对单位。在pc端，1个css像素与1物理像素是一致的，如果笔记本屏幕分辨率是1366px768px，设备宽度为1366px，则刚好撑满屏幕。而在移动端，同样尺寸的两个手机，其中设备宽度为320px，一个分辨率为320px480px，另一个分辨率为640px960px，那么宽度为160px大小的物体在分辨率为320px480px的手机下占屏幕一半，在分辨率为640px*960px的手机下占屏幕四分之一，那么此时需要1个css像素是等于2个物理像素。
6、device-width
通过以上分析，可认为设备宽度可通过分辨率和一个最佳像素比得到，比如我们希望1个css像素是等于2个物理像素，那么最佳像素比为2，则具体方式计算可认为：设备宽度=屏幕分辨率/最佳像素比。
7、viewport
视口指的是移动设备浏览器中放置页面的一个虚拟的窗口，该窗口可大于或小于移动设备的可视区域。当我们将一个pc端的网页放到移动端的时候，移动端浏览器会将pc端的网页按照一定的比例完整的显示出来，这是因为移动端的浏览器默认的会将网页渲染在一个比例比较大的viewport中排版，然后通过比例缩放看到整个页面的全貌。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
width=device-width ：表示宽度设置为设备屏幕的宽度
initial-scale=1：表示初始的缩放比例
minimum-scale=1：表示最小的缩放比例
maximum-scale=1：表示最大的缩放比例
user-scalable=no：表示用户是否可以调整缩放比例
其中，当未设置viewport，那么浏览器会自动缩放以达到展示全部内容，不出现滚动条的效果。
