html5 javascript 网页响应式设计方案,网页适配方案

网页的设计的样式都由css控制,  我们的css大小单位,一般用 px,或rem,或vw,vh.

由px控制的大小是固定的,不具有响度式的.

响应式设计一般由两种方案实现.

一.rem方案.

实现方法 :

1.head中加 

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
2.引入flexible.js
内容如下
(function flexible(window, document) {
  function resetFontSize() {
    const size = (document.documentElement.clientWidth / 1920) * 37.5;//1920为设计稿宽度 
    document.documentElement.style.fontSize = size + 'px';
  }

  // reset root font size on page show or resize
  window.addEventListener('pageshow', resetFontSize);
  window.addEventListener('resize', resetFontSize);
})(window, document);

3.css中及网页中的 所有css单位用rem.

上方的1rem=37.5px(使用时请根据此转换px到rem)

二.vw,vh方案(推荐)

1.head中加 

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
2.css中及网页中的 所有css单位用vw,vh.
此方案的100vw=1920px (使用时请根据此转换px到vw,vh)
页面布局:推荐使用flex或grid.
附:浏览器兼容性:
https://caniuse.com/viewport-units
https://caniuse.com/?search=rem

html5 javascript 网页响应式设计方案,网页适配方案
标签: