移动设备的垂直方向存在一个视口问题.正如您所看到的,在页脚下方,有一个填满屏幕的空白区域.如果我在水平方向上转动方向,则视口工作正常,对于平板电脑,桌面,等等.这个问题只存在于手机的垂直方向.有什么方法可以解决这个问题吗?
我已经有了这个元数据:
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
解决方法
您需要使用媒体查询:
>首先在CSS中使用移动(基础)样式(这通常是单列布局).
>然后在逐渐增大的视口断点处使用最小宽度的媒体查询(这是您应用网格样式的位置).
>使用每个较大的最小宽度断点来覆盖前一个
样式,以根据视口大小提供适当的布局.
>确保在html中使用<meta name="viewport" />
标记以确保最佳的移动演示.
使用级联最小宽度媒体查询将允许您根据屏幕宽度准确了解正在应用的属性,并使您对css的故障排除更加容易.
编辑 – 添加媒体查询参考链接:
> Media Query Logic
> 7 Habits of Highly Effective Media Queries
移动优先示例 – 小屏幕上的单列和更大的两列,在更大的屏幕上更改边框颜色
div {box-sizing:border-box; width:100%;border:solid 1px red;} @media only screen and (min-width:37.5em) { .half { float: left; margin: 0; width: 50%; } .row:after { content:""; display:table; clear:both; } } @media only screen and (min-width:50em) { div {border:solid 1px green;} }
<div class="container"> <div class="row"> <div class="half">Stuff 1</div> <div class="half">Stuff 2</div> </div> <div class="row"> <div class="half">Stuff 3</div> <div class="half">Stuff 4</div> </div> </div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。