学学代码的gravatar头像
学学代码2019-05-03 09:16:26

想问下手机上做两行五列的导航,怎么解决这小屏幕手机显示字不全的问题

想问下手机上做两行五列的导航,怎么解决这小屏幕手机显示字不全的问题,想问下手机上做两行五列的导航,怎么解决这小屏幕手机显示字不全的问题

想问下手机上做两行五列的导航,怎么解决这小屏幕手机显示字不全的问题

所有回答列表(2)
hohoho的gravatar头像
hohoho LV95月6日

滚动条,滑动查看更多呀。

Return168的gravatar头像
Return168 LV65月9日

(有问题最好贴代码)你这是布局不合理,应该使用响应式来。解决办法就是布局上使用合适的百分比进行两行五列的布局,当然我更建议使用flex来布局。我分析你的问题可能是采用了固定宽度实现布局,又或css中采用px像素设置大小。建议flex布局,像素大小采用rem为单位,而不是px。比如这样:

html部分

<div >
  <div class="ul">
    <div>新闻1</div><div>新闻2</div><div>新闻3</div><div>新闻4</div><div>新闻5</div>
  </div>
  <div class="ul">
    <div>新闻1</div><div>新闻2</div><div>新闻3</div><div>新闻4</div><div>新闻5</div>
  </div>
</div>

css部分

.ul{
  display: flex;
  justify-content: center;/*内容水平居中*/
  width: 100%;
}
.ul div{
  flex: 1;/*子元素flex值设置为1,实现响应式均分*/
  height: 1.5rem;
  font-size: 1rem;/*rem单位更灵活,更贴切响应式布局的需求,尤其在移动端,阿里的sui框架就提倡使用这个单位*/
}

 

效果图

想问下手机上做两行五列的导航,怎么解决这小屏幕手机显示字不全的问题

想问下手机上做两行五列的导航,怎么解决这小屏幕手机显示字不全的问题

顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友