Hakunaum
2017-12-13 06:19
采纳率: 75%
浏览 3.8k

在手机端页面上,原本相同的组件的位置,会因为手机屏幕大小的不同,而改变,有何解决方法?

在制作手机端的jsp页面时候,需要在一张背景图片上,放置一些按钮超链接。但是 在一个手机上满足这个布局后,在另一个手机端(iPhone7,8,安卓手机等)的按钮布局就乱了。请问有什么解决方法?

    position:absolute;
    top:1rem;
    left:3rem;
    width:19rem;
    }

css样式大致如上

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

12条回答 默认 最新

  • blownewbee 2017-12-13 06:23
    已采纳

    用bootstrap一类的网格布局或者流布局
    或者绝对定位+滚动条。

    点赞 评论
  • lumengjiao12 2017-12-13 06:23

    自己代码实现,获取当前分辨率,主流的就那几个区间,然后 if else 处理

    点赞 评论
  • xiaobing5201 2017-12-13 06:25

    适配主流分辨路,部分有差异机型,代码修改像素

    点赞 评论
  • 黄河默默 2017-12-13 06:38

    做jsp html用百分比
    现在最流行的是 bootstrap等前台统一的js css样式可以控制住

    点赞 评论
  • 父容器给个相对定位,没有父容器就给他弄个,用百分比替换rem

    点赞 评论
  • 子幽 2017-12-13 06:51

    用js获取屏幕的宽,根据高和宽的比例定位你的组件

    点赞 评论
  • 阡路陌人 2017-12-13 12:30

    建议移动端除了字体用rem之外,其他的就不要用rem单位了,可以使用百分比,最好使用vw/vh

    点赞 评论
  • suwu150 2017-12-14 01:40

    使用css布局中的flex属性布局,能够自适应屏幕

    点赞 评论
  • nightwishss 2017-12-15 03:09

    加容器如layout把组件加容器里,设置align属性(上,下,左,右,中)解决手机屏幕自适应问题。

    点赞 评论
  • 前端-珊珊 2017-12-15 09:45

    帅哥,你可以试试vh,本人超级喜欢这个新的属性。
    还有就是,那个按钮一定要背景吗?是不是只要渐变的颜色而已?如果是可以自己写样式哦!

    点赞 评论
  • zy35 2017-12-19 11:23

    可以用Bootstrap 栅栏定义整个格局 col-md- 是使用在中等大小的电脑屏幕,可以去看看

    点赞 评论
  • zy35 2017-12-26 06:56

    用浏览器右击审查元素,先看看布局会不会乱
    另一种办法就是 用一个DIV设置container容器 设置col-md-12排列格式

    点赞 评论

相关推荐 更多相似问题