屏幕自适应

屏幕自适应

介绍

解决移动端复杂的显示屏幕致使网页呈现不一样的显示问题

方法

详情参考标签

<meta name="viewport" content="width=device-width,initial-scale=1.0">
复制代码

属性名	取值	描述
width	正整数 或 device-width	定义视口的宽度，单位为像素
height	正整数 或 device-height	设置layout viewport 的高度，这个属性对咱们并不重要，不多使用
initial-scale	[0.0-10.0]	设置页面的初始缩放值，为一个数字，能够带小数
minimum-scale	[0.0-10.0]	容许用户的最小缩放值，为一个数字，能够带小数
maximum-scale	[0.0-10.0]	容许用户的最大缩放值，为一个数字，能够带小数
user-scalable	yes/no	是否容许用户进行缩放，值为"no"或"yes", no 表明不容许，yes表明容许

针对多屏幕版本使用，经过js一次性定义

<script type="text/javascript">
  ((doc,win) => {
    var width1 = 320, userScalable = 'yes', maximumScale = 2 // 设置最优显示屏幕宽度、是否容许缩放操做['yes','no']、设置基础放大倍数
    var body = doc.documentElement,width = body.clientWidth
    var recalc = () => {
      var initialScale = width1 / width
      document.getElementsByTagName('meta').viewport.content = 'width=device-width, initial-scale=' + initialScale + ', maximum-scale=' + (maximumScale * initialScale) + ', user-scalable=' + userScalable
    }
    recalc()
    win.addEventListener('orientationchange' in window ? 'orientationchange' : 'resize', recalc, false);
  })(document,window)
</script>
复制代码

css3 rem

rem是CSS3新增的一个相对单位，使用rem为元素设定字体大小时，是相对大小，但相对的只是HTML根元素。经过它既能够作到只修改根元素就成比例地调整全部字体大小，又能够避免字体大小逐层复合的连锁反应。

目前，除了IE8及更早版本外，全部浏览器均已支持rem。对于不支持它的浏览器多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

默认html的font-size是16px，即1rem=16px，若是某div宽度为32px你能够设为2rem。

具体不一样屏幕下的规则定义，即基数的定义方式：能够经过CSS定义，不一样宽度范围里定义不一样的基数值(结合媒体查询)，固然也能够经过js一次定义。方法以下：

<script type="text/javascript">
  ((doc,win) => {
    var width = 2208 /** 设置最优显示宽度 */, recalc = (a) => {
      var initialScale = win.screen.availWidth / width, fontSize = initialScale.toFixed(6) * 100
      doc.documentElement.style.fontSize = fontSize + 'px'
    }
    recalc()
    win['orientationchange' in window ? 'onorientationchange' : 'onresize'] = recalc
  })(document,window)
</script>
复制代码

使用媒体查询

媒体查询也是css3的方法，其功能就是为不一样的媒体设置不一样的css样式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等。

例如：若是浏览器窗口小于 500px, 背景将变为浅蓝色：

@media only screen and (max-width: 500px) {
  body {
    background-color: lightblue;
  }
}
复制代码

使用百分比

详情参考css->position 布局