Skip to content

C
CFFP-HB
Commit f0c3f8a2 by yuzhenWang
Options

调适配

parent a0d7178d
Showing with 84 additions and 39 deletions
App.vue
......@@ -228,21 +228,21 @@
}
} */
/* 平板设备 (768px-1023px) */
/* 平板设备 (768px-1023px) */
/* @media (min-width: 768px) and (max-width: 1023px) {
.container {
max-width: 100%;
} */
/* iPad竖屏 */
/* @media (orientation: portrait) {
/* iPad竖屏*/
/* @media (orientation: portrait) {
.container {
max-width: 1000px;
max-width: 650px;
}
} */
/* iPad横屏 */
/* @media (orientation: landscape) {
/* @media (orientation: landscape) {
.container {
max-width: 900px;
}
......@@ -252,14 +252,14 @@
/* 小桌面设备 (1024px-1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
.container {
max-width: 800px;
max-width: 980px;
}
}
/* 大桌面设备 (1280px以上) */
@media (min-width: 1280px) {
.container {
max-width: 800px;
max-width: 1200px;
}
}
......
pages/index/index.vue
......@@ -746,38 +746,75 @@
}
}
}
/* 平板设备 (768px 以上) */
@media (min-width: 768px) {
.productList {
.productListBox {
max-width: 1200rpx; /* 限制最大宽度 */
margin: 0 auto; /* 居中显示 */
justify-content: flex-start;
gap: 20rpx;
/* 添加以下两行确保换行和均匀分布 */
display: flex;
flex-wrap: wrap;
.productListItem {
width: 30%; /* 三列布局 */
/* 改为 calc(33.333% - 14rpx) 确保三个元素完美适应一行 */
/* 计算方式：100%/3 - (gap*2)/3 */
width: calc(33.333% - 14rpx);
/* 或者使用 flex-grow 和 flex-basis 的替代方案 */
/* flex: 1 0 calc(33.333% - 14rpx); */
/* 确保图片和文字比例协调 */
.top {
&::before {
// padding-top: 120%; /* 略微调整宽高比 */
}
}
.bottom{
.two{
.price{
font-size: 23rpx;
color: rgba(32, 39, 155, 1);
}
.num{
font-size: 20rpx;
color: rgba(166, 166, 166, 1);
}
}
}
.bottom {
.two {
.price {
font-size: 23rpx;
color: rgba(32, 39, 155, 1);
}
.num {
font-size: 20rpx;
color: rgba(166, 166, 166, 1);
}
}
}
}
}
}
}
/* 平板设备 (768px 以上) */
// @media (min-width: 768px) {
// .productList {
// .productListBox {
// justify-content: flex-start;
// gap: 20rpx;
// .productListItem {
// width: calc(30% - 20rpx); /* 两列布局，考虑间隙 */
// /* 确保图片和文字比例协调 */
// .top {
// &::before {
// // padding-top: 120%; /* 略微调整宽高比 */
// }
// }
// .bottom{
// .two{
// .price{
// font-size: 23rpx;
// color: rgba(32, 39, 155, 1);
// }
// .num{
// font-size: 20rpx;
// color: rgba(166, 166, 166, 1);
// }
// }
// }
// }
// }
// }
// }
/* 桌面设备 (1024px 以上) */
// @media (min-width: 1024px) {
......
pages/orderStatus/orderStatus.vue
......@@ -287,29 +287,37 @@
@media (min-width: 768px) {
.productList {
.productListBox {
max-width: 1200rpx; /* 限制最大宽度 */
margin: 0 auto; /* 居中显示 */
justify-content: flex-start;
gap: 20rpx;
/* 添加以下两行确保换行和均匀分布 */
display: flex;
flex-wrap: wrap;
.productListItem {
width: 30%; /* 三列布局 */
/* 改为 calc(33.333% - 14rpx) 确保三个元素完美适应一行 */
/* 计算方式：100%/3 - (gap*2)/3 */
width: calc(33.333% - 14rpx);
/* 或者使用 flex-grow 和 flex-basis 的替代方案 */
/* flex: 1 0 calc(33.333% - 14rpx); */
/* 确保图片和文字比例协调 */
.top {
&::before {
// padding-top: 120%; /* 略微调整宽高比 */
}
}
.bottom{
.two{
.price{
font-size: 23rpx;
color: rgba(32, 39, 155, 1);
}
.num{
font-size: 20rpx;
color: rgba(166, 166, 166, 1);
}
}
}
.bottom {
.two {
.price {
font-size: 23rpx;
color: rgba(32, 39, 155, 1);
}
.num {
font-size: 20rpx;
color: rgba(166, 166, 166, 1);
}
}
}
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment