3

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

 1 year ago
source link: https://blog.p2hp.com/archives/9507
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

网页的设计的样式都由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);
(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

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK