Vue PC端全域性響應式布局

根據解析度720到1080或者根據視窗尺寸

兩個方法room和transform：scale(x,y)

1、css3的room

對px有效，對rem無效

由於resize事件可以以較高的速率觸發, 因此事件處理程式不應該執行計算開銷很大的操作

mdn推薦三種resize方法

window.onload = function()

;(function() 
running = true;
requestanimationframe(function() );
};obj.addeventlistener(type, func);
};/* init - you can init any event */
throttle("resize", "optimizedresize");
})();
window.addeventlistener("optimizedresize", function() );

整體放大縮小，像一樣

transform-origin:0 0;//縮放原點

var a=document.body.clientwidth/1920;
document.body.style.transform=`scale($,$)`//es6模板字串語法
一些高度和寬度的意義

3、用js計算

let proportion = width / 1920;

$light.style.height = math.round(618 * proportion) + 'px';
$light.style.marginleft = math.round(65 * proportion) + 'px';
$light.style.margintop = math.round(-30 * proportion) + 'px';
$light.style.width = math.round(1365 * proportion) + 'px';

移動端響應式布局

1.快捷鍵 meta vp tab鍵 2.viewport視口 width device width 設定視口的寬度等於裝置的寬度，如果不設定的話，缺省視口寬度為980px。通俗的理解 我們這個操作其實就是告訴當前的瀏覽器按照多少寬度來渲染頁面，換句話說，就是展示當前這個頁面的區域一共有多寬 瀏覽器...

移動端響應式布局基礎

搭建乙個h5頁面，我們需要在head中新增乙個meta標籤 快捷鍵 meta vp tab鍵 width device width 設定視口的寬度等於裝置的寬度，如果不設定的話，缺省視口寬度為980px。通俗的理解 我們這個操作其實就是告訴當前的瀏覽器按照多少寬度來渲染頁面，換句話說，就是展示當前這...

移動端與響應式布局

瀏覽器切換裝置步驟 f12開啟控制台，如圖 viewport只針對於移動端，pc端無效 viewport content width device width,initial scale 1.0,maximum scale 1.0,user scalable 0 content的配置 width d...