怎么在css里面设置电脑端、平板端和移动端三种布局,怎么设置都不行
2条回答 默认 最新
- Absolute小白 2022-12-14 09:08关注
用bootstrap或者layui里面的有页面响应式布局判断你页面多大然后怎么显示
bootstrap的 /* 超小设备(手机,小于 768px) */ /* Bootstrap 中默认情况下没有媒体查询 */ /* 小型设备(平板电脑,768px 起) */ @media (min-width: @screen-sm-min) { ... } /* 中型设备(台式电脑,992px 起) */ @media (min-width: @screen-md-min) { ... } /* 大型设备(大台式电脑,1200px 起) */ @media (min-width: @screen-lg-min) { ... }
layui的 移动设备、平板、桌面端的不同表现: <div class="layui-row"> <div class="layui-col-xs6 layui-col-sm6 layui-col-md4"> 移动:6/12 | 平板:6/12 | 桌面:4/12 </div> <div class="layui-col-xs6 layui-col-sm6 layui-col-md4"> 移动:6/12 | 平板:6/12 | 桌面:4/12 </div> <div class="layui-col-xs4 layui-col-sm12 layui-col-md4"> 移动:4/12 | 平板:12/12 | 桌面:4/12 </div> <div class="layui-col-xs4 layui-col-sm7 layui-col-md8"> 移动:4/12 | 平板:7/12 | 桌面:8/12 </div> <div class="layui-col-xs4 layui-col-sm5 layui-col-md4"> 移动:4/12 | 平板:5/12 | 桌面:4/12 </div> </div> </div>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 微信会员卡等级和折扣规则
- ¥15 微信公众平台自制会员卡可以通过收款码收款码收款进行自动积分吗
- ¥15 随身WiFi网络灯亮但是没有网络,如何解决?
- ¥15 gdf格式的脑电数据如何处理matlab
- ¥20 重新写的代码替换了之后运行hbuliderx就这样了
- ¥100 监控抖音用户作品更新可以微信公众号提醒
- ¥15 UE5 如何可以不渲染HDRIBackdrop背景
- ¥70 2048小游戏毕设项目
- ¥20 mysql架构,按照姓名分表
- ¥15 MATLAB实现区间[a,b]上的Gauss-Legendre积分