原文:https://blog.csdn.net/sweetikelike/article/details/156115323?spm=1001.2014.3001.5502已部署在网站上请访问:https://weatherforecastfromnoterai.netlify.app/https://weatherforecastfromnoterai2.netlify.app/
UI升级
以下是新版本UI界面:
以下是旧版UI:
手机端优化
@media screenand(max-width:768px)//当网页端小于768px是用以下的css代码样式/* ================================================================= 移动端适配 (响应式布局) - 将此代码粘贴到 style.css 的最后面 ================================================================= */@media screenand(max-width:768px){/* 1. 解除全局锁定，允许手机上下滚动 */body{height:auto;/* 不再固定一屏高度 */overflow-y:auto;/* 允许垂直滚动 */padding:15px;/* 减小内边距 */display:block;/* 移除body的flex布局 */}/* 2. 顶部区域：改为竖直排列 */#main{height:auto;/* 解除高度锁定 */flex-direction:column;/* 变为上下排列 */gap:15px;margin-bottom:15px;}/* 调整输入框区域 */#CityInputBox{padding:15px;flex:none;/* 不再自动伸缩 */width:100%;/* 占满宽度 */box-sizing:border-box;/* 确保padding不撑大盒子 */}#CityInputBox>div:nth-child(2){flex-wrap:nowrap;/* 防止按钮换行 */}/* 调整右侧文字概览，给一个固定高度 */#WeatherInfoBox{flex:none;width:100%;height:150px;/* 手机上给固定高度，内部滚动 */padding:15px;box-sizing:border-box;}/* 3. 7天天气卡片：改为“横向滑动” (类似原生iOS天气App) */#main1{height:auto;flex-direction:row;/* 保持横排 */overflow-x:auto;/* 允许横向滑动 */overflow-y:hidden;justify-content:flex-start;/* 从左开始 */padding-bottom:10px;/* 给滚动条留位置 */gap:10px;margin-bottom:15px;/* 增加回弹效果，更有iOS感 */-webkit-overflow-scrolling:touch;}.weatherCard{min-width:100px;/* 强制每个卡片最小宽度，防止被挤压 */flex:00auto;/* 禁止卡片缩小 */height:140px;/* 固定高度 */}/* 4. 底部图表和地图：改为竖直排列，并给固定高度 */#main2{flex-direction:column;/* 上下排列 */height:auto;gap:20px;padding-bottom:20px;}#T_Curve{width:100%;height:300px;/* 手机上图表给固定高度 */flex:none;}#map{width:100%;height:300px;/* 手机上地图给固定高度 */flex:none;}/* 5. 优化地图切换按钮位置 */.map-switcher{top:10px;right:10px;}.map-switcher button{padding:6px10px;/* 稍微调大一点，方便手指点击 */}}新增图片下载按钮
细节优化,天气卡片显示 星期和号数:
切换教程
v2.0 为新版
v1.0 为毛坯版
源码分享
源码分享(github)
https://github.com/mojoin/WeatherForecast/tree/v2.0-ios
源码分享(gitee)
https://gitee.com/lclIzzxw/WeatherForecast/tree/v2.0-ios再次强调注意事项
app.js 源码是获取天气api 地理api 的代码 , 其中天气api 免费获取不需key , 地理api 需要key ,这个key也是免费的,获取地址为: https://openweathermap.org/api?referrer=grok.com
然后粘贴到app.js的 第四行代码处 即可正常查询处地理坐标
