网页的设计的样式都由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 网页响应式设计方案,网页适配方案