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

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

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

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

所有回答列表(3)
hohoho的gravatar头像
hohoho  LV9 2019年5月6日

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

灵扁扁的gravatar头像
灵扁扁  LV7 2019年5月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框架就提倡使用这个单位*/
}

 

效果图

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

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

学学代码的gravatar头像
学学代码  LV3 2019年6月16日

多谢你啊,我初学代码,很多不懂

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