移动端和pc端如何部署到同一个端口_如何实现PC端和移动端的自适应

53733dc554ff9a14c5ad641af77337cd.png

效果图:

346d3bed2e6d2db4d9a79900d0ba35a1.png

cc287762dcf80a7c5a041b51b04d6861.png

自适应:

我感觉自适应分为两种:

,通过媒体查询实现响应式(@media)

优点 :适用于小型网页,用户交互较少的项目,代码用量较少;

缺点 :在页面内容过多,用户交互过多的时候,如果通过 @media 来一个个改的话,那代码量可就很多了,而且也不方便维护。因此需要另一种方式来解决这个问题。

,通过判断打开设备的类型,区分需要显示的方式和界面(本篇内容)

具体的可参考此篇文章,很好的解释了什么是响应式

前端布局是响应式好?还是手机和PC端分开来写好?_Le cuer的博客-CSDN博客​blog.csdn.net
3c7e7a65a9ec8d59e936d8f315e62a8f.png

代码修改:

配置文件修改的是标注的几个

784063b22c6ab08288e751af619032dc.png

建议直接从Gitup上下载该项目,此项目是用 webpack 建的一个 vue 项目,上面的修改部分都有备注

点击进入Gitup地址

sunwenxu1997/adaptiveDifferentiation​github.com

4cc682df252e65203507512b1fb8ddb0.png

具体内容也可以参考此篇文章

vue.js实现移动端和PC端切换,超详细_ZFL_123456的博客-CSDN博客_vue移动端与pc端​blog.csdn.net
f91ab4c34e01c0510d312a2f55187d71.png
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值