Question

我正在包含一个涉及一些元素（图像/文本/对角线）的网站，这些元素必须在不同的屏幕上按比例缩放。

因为必须调整大小的文本，所以我使用jQuery根据比率计算所有元素的测量值。这是我当时想到的最好的解决方案，并且在截止日期即将来临之际，我想我已经坚持了下来。它是一个按页面滚动的单页网站（例如，视口中的完整页面）。

Here's a link to the demo site

代码背后的想法：

我们检查视口的高度以设置容器大小</ li>
根据容器大小和必要设置包装元素高度余量
根据比率
使用这些值计算字体大小，图像大小和偏移量

随着屏幕重新调整大小，元素会按比例缩小以填充可用空间。

它看起来像这样：

这样有两个面板。我为第二个面板重复使用相同的代码（具有不同的变量名称和一些大小差异）。

这是第一个我的Javascript / jQuery：

        // 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 当时。

如果我拖动窗口调整大小，一些元素会调整大小。其他人不会。

页面刷新通常会解决它，但是现在，元素（主要是图像！）不能正确缩放并与其他元素同步。

我是jQuery的新手，这是我的第一件大事。不再使用resize。希望我做了一个容易修复的蠢事。

谢谢！

LIVE SITE LINK

正在使用的其他插件：jQuery Scrollify（用于整页滚动）和ScrollReveal。

Answer 1

猜猜我可以回答我自己的问题。

问题似乎是当从一个全屏面板滚动到另一个全屏面板时，这些值变得混乱。

更改此内容：

$(window).on("resize", function () {

对此：

$(window).on("resize load scroll", function (e) {

......解决了这个问题。我不确定它是否是正确的方法，但现在调整大小都正常。

为什么我的jQuery调整大小不一致？

1 个答案: