0
私はいくつかの要素（画像/テキスト/対角線）を含むサイトを、異なる画面に比例して配置しなければなりません。jQueryのサイズ変更の結果が一貫していないのはなぜですか？
リサイズする必要があるテキストがあるため、比率に基づいてすべての要素の測定値を計算するためにjQueryを使用しています。これは私が当時考えていた最善の解決策でした。締め切りが近づくにつれ、私はそれに固執していると思います。ページ単位でスクロールする1ページのサイト（ビューポートの全ページなど）です。私たちは、コンテナのサイズ
- ：
Here's a link to the demo site
コードの背後にある考え方余白
- 比率に基づいて幅を設定する
- これらの値を使用して、フォントサイズ、画像サイズ、 ndオフセット
画面のサイズが変更されると、要素は空き領域を埋めるように比例して縮小されます。
それは一種の次のようになります。
このような二つのパネルがあります。私は2番目のパネルで同じコード（異なる変数名といくつかのサイズの違いを持つ）を再利用します。
// Set panel height on page load & resize
$(window).on("resize", function() {
var $panelHeight = $(window).height();
var $headerHeight = $('.banner').height();
// General height for panels
$('.bg-panel').css('height', $panelHeight);
$('.bg-panel').css('padding-top', $headerHeight);
}).resize();
// We want to scale content proportionately
// First let's get some breakpoints
var $breakPoint = 768;
var $breakPointSM = 480;
// Panel 1
$(window).on("resize", function() {
// Check height of current panel
// If on single-column view, we want to measure the space between the text column and bottom of screen
// Otherwise, height of entire panel
var $windowHeight = $('.panel-test').height();
// But we need to subtract the header height, so our math is correct
var $headerHeight = $('.banner').height();
var $windowHeight = $windowHeight - $headerHeight;
// Now we have the correct height to work with
// We're at 768px or below, subtract the text element from the overall height
if ($(document).width() <= $breakPoint) {
var $heightofDiv = $('.panel-1-text').height();
var $mobileHeight = $windowHeight - $heightofDiv;
var $windowHeight = $mobileHeight;
}
// Save the window height for calculating our margins!
var $windowHeightforMargins = $windowHeight;
// Top and bottom margins
var $marginTop = $windowHeight * (102/792); // ratio from PSD
var $marginBottom = $windowHeight * (84/792); // ratio from PSD
var $marginTotal = $marginTop + $marginBottom;
// Responsive solution
// As browser shrinks, reduce the height of panel so it produces a smaller container
if ($(document).width() > 1200 && $(document).width() <= 1440) {
var $windowHeight = $windowHeight * 0.9;
var $marginTop = $marginTop * 2;
}
else if ($(document).width() > 990 && $(document).width() <= 1200) {
var $windowHeight = $windowHeight * 0.8;
var $marginTop = $marginTop * 3;
}
else if ($(document).width() > $breakPoint && $(document).width() <= 990) {
var $windowHeight = $windowHeight * 0.7;
var $marginTop = $marginTop * 3.5;
}
else if ($(document).width() < $breakPoint) { // Ratio here goes up again because we're accounting for new height with $mobileHeight
var $windowHeight = $windowHeight * 0.8;
}
// This ratio determines the width of the container
var $ratio = 697/607; // from PSD
// Set container height, depending on height of panel
if ($(document).width() <= $breakPointSM) {
var $taglinesHeight = ($windowHeight * 1.5); // Scale up for phones
}
else if ($(document).width() > $breakPointSM && $(document).width() <= $breakPoint){
var $taglinesHeight = ($windowHeight * 1); // Scale down for tablet
}
else {
var $taglinesHeight = $windowHeight - $marginTotal;
}
// Set container width as ratio of height
if ($(document).width() <= $breakPoint) {
var $taglinesWidth = $taglinesHeight * $ratio
} else {
var $taglinesWidth = $taglinesHeight * $ratio
}
$('.panel-test .bg-taglines').css("width", $taglinesWidth);
$('.panel-test .bg-taglines').css("height", $taglinesHeight);
// Add top margin if above breakpoint
if ($(document).width() > $breakPoint) { // No margin unless above 768px
$('.panel-test .bg-taglines').css("margin-top", $marginTop);
}
else {
$('.panel-test .panel-1-tagline').css("bottom", $marginTop);
}
// Set font size
var $fontSize = $taglinesWidth * 0.12;
$('.bg-panel h4').css("font-size", $fontSize);
// Set pink line origin (relative to bottom-left of frame)
var $pinkX = $taglinesWidth * (286/705);
var $pinkY = $taglinesHeight * (192/607);
$('.panel-test .animation-wrapper').css("left", $pinkX);
$('.panel-test .animation-wrapper').css("bottom", $pinkY);
// Set image size
var $imageWidth = $taglinesWidth * 0.556;
$('.panel-test .scaleable-image').css("width", $imageWidth);
// Set h3 margin from top
if ($(document).width() >= $breakPoint) {
var $marginH3 = $windowHeight * (217/792); // ratio from PSD
$('.panel-test h3').css("margin-top", $marginH3);
} else {
// CSS
}
// Set line offset from top
var $lineOffset = $taglinesHeight * 0.7;
$('.panel-test .line-wrapper').css("top", $lineOffset);
// Set line length
var $lineLong = $taglinesWidth * 1;
$('.panel-test .pink-line').css("width", $lineLong);
}).resize();
それは動作します：時間のMOST
はここで最初のための私のJavascriptを/ jQueryの。
ウィンドウをドラッグしてサイズを変更すると、一部の要素のサイズが変更されます。他はしません。
ページリフレッシュは一般的にそれを解決しますが、今では要素（主に画像！）が正しくスケーリングされず、他の要素と同期しています。
私はjQueryを初めて使っています。これは私の最初の大きな仕事です。 resizeも同様です。私はちょうど修正するのは簡単です。
ありがとうございます！使用中の
その他のプラグイン：jQuery Scrollify（フルページスクロール用）とScrollReveal。