html5 - 怎么制作使用flex制作可自适应的web页面??
巴扎黑
巴扎黑 2017-04-17 13:20:21
[HTML讨论组]

想使用flex制作这种可自适应的布局(用在手机页面):

我仿照着写了,效果如下:

对应的代码:



 
  
  
  
  
  
  Document
 
 
   
     

重点出现这种现象的原因,我没有在最外层容器元素上设置固定的高度(使用的是:min-height,max-height),才导致出现这种现象。

我想要知道为什么设置min-height,max-height 后,子元素为什么就无法继承父元素的高度了呢??

然后就是,怎么解决这个问题,实现我想要的效果(第一张图显示的布局)??

巴扎黑
巴扎黑

全部回复(1)
ringa_lee

第一:少了meta标签

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

第二 在移动端需

img{
    max-width: 100%;
}

才能自适应屏幕
第三: flex的用法不对 传送门

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号