不知何去程序猿
2018-02-02 10:22
采纳率: 85.7%
浏览 2.4k

html布局为了适应不同分辨率的显示器,用什么布局好?

一般都使用百分比,什么时候使用px,高度都是子元素撑起来的吗

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

21条回答 默认 最新

  • 同是天涯程序猿 2018-02-02 10:25
    已采纳

    我尝试过使用绝对布局,定义最外层容器最小宽高,计算中间元素绝对位置和大小,多利用calc。要么使用媒体搜索响应布局,宽度定义比例,高度撑起

    点赞 评论
  • 不知何去程序猿 2018-02-02 10:24

    还有就是要少用定位吗?

    点赞 评论
  • weixin_41614085 2018-02-02 10:38

    图片说明

    点赞 评论
  • 星-冰河 2018-02-02 10:47

    相对布局吧,自适应的话bootstrap做得很好

    点赞 评论
  • broprota 2018-02-02 10:51

    推荐使用百分比来布局,因为会根据百分比的形式来自动生成与显示器相应的样子,xp是负责固定的宽度,不过布局内还是推荐xp,不同的浏览器与不同的显示器还是推荐用百分比

    点赞 评论
  • zgy12512 2018-02-02 10:54

    使用rem布局比较方便,只需要将rem.js文件引入即可使用,

    (function(doc, win) {
    var docEl = doc.documentElement,
    isIOS = navigator.userAgent.match(/(i[^;]+;( U;)? CPU.+Mac OS X/),
    dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,
    dpr = window.top === window.self ? dpr : 1, // 被iframe引用时,禁止缩放
    dpr = 1,
    scale = 1 / dpr,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
    docEl.dataset.dpr = dpr
    var metaEl = doc.createElement('meta')
    metaEl.name = 'viewport'
    metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale
    docEl.firstElementChild.appendChild(metaEl)
    var recalc = function() {
    var width = docEl.clientWidth
    if (width / dpr > 750) {
    width = 750 * dpr
    }
    // 乘以100,px : rem = 100 : 1
    docEl.style.fontSize = 100 * (width / 750) + 'px'
    };
    recalc()
    if (!doc.addEventListener) return
    win.addEventListener(resizeEvt, recalc, false)
    })(document, window)

    
    
    点赞 评论
  • qq_35207808 2018-02-02 11:07

    推荐使用百分比来布局,因为会根据百分比的形式来自动生成与显示器相应的样子,xp是负责固定的宽度,不过布局内还是推荐xp,不同的浏览器与不同的显示器还是推荐用百分比,或者相对布局吧,自适应的话bootstrap做得很好

    点赞 评论
  • zjm0527 2018-02-02 11:11

    css,或者用bootstrap.js框架。

    点赞 评论
  • 我不是周同学啊 2018-02-02 11:45

    用bootstrap 框架布局比较好,很容易上手的

    点赞 评论
  • 囡囡su 2018-02-02 12:52

    用bootstrap

    点赞 评论
  • tangli886 2018-02-02 15:29

    百分比也可以,还有一种media判断每个显示器的宽 来使用不同的css

    点赞 评论
  • qq_23921067 2018-02-02 15:58

    用rem单位替换px

    点赞 评论
  • 迟到的决心 2018-02-02 15:59

    用flex弹性盒子布局是最完美的,boot的 栅栏布局也可以

    点赞 评论
  • qq_33361835 2018-02-02 16:25

    html 可以相对布局啊 或者可以用百分比

    点赞 评论
  • qq_33369120 2018-02-03 02:10

    移动端用百分比好一些

    点赞 评论
  • qq_41666977 2018-02-03 03:08

    用bootstrap 框架布局比较方便

    点赞 评论
  • 小小申 2018-02-03 06:50

    适应不同分辨率不就是响应式吗?你可以使用bootstrap,如果你只是写一些简单的小页面不是很复杂的话,可以不引用bs,直接用rem为单位去写就好了

    点赞 评论
  • 俗世清尘 2018-02-03 07:15

    我也觉得宽度用百分比设置比较好,高度就得根据情况而定

    点赞 评论
  • weixin_38294444 2018-02-03 08:42

    直接用div+css3

    点赞 评论
  • qq_36450618 2018-02-03 10:23

    不要使用px布局,可以使用rem或者百分比

    点赞 评论
  • xinyang1936 2018-02-04 08:09

    推荐用Bootstrip

    点赞 评论

相关推荐 更多相似问题