weixin_36977678
不知何去程序猿
采纳率100%
2018-02-02 10:22

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

5
已采纳

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

21条回答

  • xcg132566 同是天涯程序猿 3年前

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

    点赞 1 评论 复制链接分享
  • zgy12512 zgy12512 3年前

    使用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)

    
    
    点赞 2 评论 复制链接分享
  • qq_39619934 broprota 3年前

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

    点赞 2 评论 复制链接分享
  • xinyang1936 xinyang1936 3年前

    推荐用Bootstrip

    点赞 评论 复制链接分享
  • qq_36450618 qq_36450618 3年前

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

    点赞 评论 复制链接分享
  • weixin_38294444 weixin_38294444 3年前

    直接用div+css3

    点赞 评论 复制链接分享
  • nikon800 俗世清尘 3年前

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

    点赞 评论 复制链接分享
  • m0_37482350 小小申 3年前

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

    点赞 评论 复制链接分享
  • qq_41666977 qq_41666977 3年前

    用bootstrap 框架布局比较方便

    点赞 评论 复制链接分享
  • qq_33369120 qq_33369120 3年前

    移动端用百分比好一些

    点赞 评论 复制链接分享
  • qq_33361835 qq_33361835 3年前

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

    点赞 评论 复制链接分享
  • pengyou1992 迟到的决心 3年前

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

    点赞 评论 复制链接分享
  • qq_23921067 qq_23921067 3年前

    用rem单位替换px

    点赞 评论 复制链接分享
  • tangli886 tangli886 3年前

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

    点赞 评论 复制链接分享
  • weixin_40310065 囡囡su 3年前

    用bootstrap

    点赞 评论 复制链接分享
  • wufeiwua 我不是周同学啊 3年前

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

    点赞 评论 复制链接分享
  • zjm0527 zjm0527 3年前

    css,或者用bootstrap.js框架。

    点赞 评论 复制链接分享
  • qq_35207808 qq_35207808 3年前

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

    点赞 评论 复制链接分享
  • u014183258 星-冰河 3年前

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

    点赞 评论 复制链接分享
  • weixin_41614085 weixin_41614085 3年前

    图片说明

    点赞 评论 复制链接分享
  • weixin_36977678 不知何去程序猿 3年前

    还有就是要少用定位吗?

    点赞 评论 复制链接分享