饿了么项目步骤

最新推荐文章于 2024-07-11 23:29:15 发布

qq_790478146

最新推荐文章于 2024-07-11 23:29:15 发布

阅读量1.7k

点赞数 2

分类专栏： javaScript sass

本文链接：https://blog.csdn.net/qq_35209064/article/details/86618748

版权

本文介绍了饿了么项目实战中关于页面适配和组件拆分的步骤。首先讲解了如何设置HTML的Mate标签实现设备自适应，包括设置视口宽度、高度以及禁用用户缩放。接着，提到了组件拆分，删除App.vue的默认内容，并创建自定义组件如Header.vue。最后，简述了Vue Router的安装和使用，展示了通过路由实现不同页面（商品、评论、商家）跳转的示例代码。

摘要由CSDN通过智能技术生成

第5章项目实战-页面骨架开发2.5
5.1组件拆分
5.1.1
引入mate标签:使得高宽都等于设备的高宽，不放缩，用户无法缩放。
引入css样式：预处理样式；兼容所有浏览器的自带样式。
在这里插入图片描述
详解：具体代码如下
HTML中设置网页自适应的MATE标签

<meta name="viewport" content="width=device-width,height=device-height,
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, 
user-scalable=no">

1.name=“viewport” //设置视口（网页可绘制的区域）
2.width=device-width //应用程序的宽度和设备的宽度是一样的
3.height=device-height //应用程序的高度和设备的高是一样的
4.initial-scale=1.0 //应用程序启动时候的缩放尺度（1.0表示不缩放）
5.minimum-scale=1.0 //用户可以缩放到的最小尺度（1.0表示不缩放）
6.maximum-scale=1.0 //用户可以放大到的最大尺度（1.0表示不缩放）
7.user-scalable=no //用户是否可以通过他的手势来缩放整个应用程序&#x