解释响应式页面设计的原理

响应式页面设计的原理是让页面根据浏览器屏幕宽度/视口宽度自适应,较理想地呈现出页面内容。

较常见的做法是使用CSS media query,而且通常会在meta标签中对viewport的宽度等进行设定(比如设定width: device-width)。但即便不用这种方法,只要页面能根据屏幕宽度做出自适应的调整,那就是响应式设计。

function fit () {
  const scale = $('body').width() / 640
  $('html').css('font-size', 100 * scale + 'px')
}

$(document).ready(() => {
  const userAgent = window.navigator.userAgent.toLowerCase()
  if (userAgent.indexOf('android') === -1 && userAgent.indexOf('iphone') === -1) {
    $('body').addClass('pc')
  }
  fit()
  $('html').css('height', $(window).height() + 'px')
  $(window).resize(fit)
  if (userAgent.indexOf('android') !== -1) {
    const originalHeight = $(window).height()
    // 部分安卓机弹出输入法时底部的fixed定位的按钮也会被谈起来导致输入框被遮住
    $(window).resize(() => {
      const scale = $('body').width() / 640
      // .footer-button-container是被fixed定位在页面底部的元素
      if (Math.abs(originalHeight - $('.footer-button-container').offset().top - 108 * scale) < 100 || $('.footer-button-container').offset().top === 0) {
        $('.footer-button-container').show()
      } else {
        $('.footer-button-container').hide()
      }
    })
  }
})

 

Was this helpful?

0 / 0

发表评论 0

Your email address will not be published. Required fields are marked *