小白学习微信小程序的页面布局和屏幕适配

粉绿色的西瓜大大

于 2024-02-23 16:28:07 发布

阅读量303

点赞数 5

分类专栏：微信小程序开发入门之新手必学内容微信小程序开发入门之新手必学内容2 文章标签：学习微信小程序 notepad++

本文链接：https://blog.csdn.net/m0_72166538/article/details/136259210

版权

微信小程序开发入门之新手必学内容2 同时被 2 个专栏收录

722 篇文章 22 订阅 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

微信小程序开发入门之新手必学内容

293 篇文章 5 订阅 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

本文针对初学者详细介绍了微信小程序的页面布局，包括WXSS样式布局和WXML结构布局，并讲解了屏幕适配技巧，如百分比布局、媒体查询和rpx单位的应用，旨在帮助小白快速掌握小程序开发基础。

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

小程序的页面布局和屏幕适配是开发微信小程序的基础。本文将通过代码案例详细介绍小程序的页面布局和屏幕适配的内容，以帮助小白学习微信小程序。

一、页面布局

布局方式在微信小程序中，可以使用两种方式来进行页面布局，分别是：WXSS样式布局和WXML结构布局。

（1）WXSS样式布局 WXSS样式布局可以通过设置元素的样式来进行页面布局，类似于HTML和CSS的布局方式。以下是一个简单的WXSS样式布局的例子：

/* app.wxss */
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.content {
  font-size: 16px;
  color: #333333;
}

（2）WXML结构布局 WXML结构布局是通过组合元素来进行页面布局，类似于HTML的DOM结构。以下是一个简单的WXML结构布局的例子：