Question

如何根据屏幕分辨率更改HTML布局。

情况：我有一个包含10列的表，但如果浏览器宽度小于900px，它看起来很难看。我想在大小小于或等于900px时更改HTML布局（将3列合并为一个）。

Answer 1

使用 Bootstrap响应网格类。它会自动处理响应。如果您想使用自定义网格，则可以使用 angular ng-class 属性来实现响应。

Answer 2

通过使用媒体查询，您可以隐藏一些表格列：

HTML：

<table>
    <tr>
        <td>Col1</td>
        <td class="show-under-900px">Col2, Col3</td>
        <td class="hide-under-900px">Col2</td>
        <td class="hide-under-900px">Col3</td>
    </tr>
    <tr>
        <td>Col1</td>
        <td class="show-under-900px">Col2, Col3</td>
        <td class="hide-under-900px">Col2</td>
        <td class="hide-under-900px">Col3</td>
    </tr>
    <tr>
        <td>Col1</td>
        <td class="show-under-900px">Col2, Col3</td>
        <td class="hide-under-900px">Col2</td>
        <td class="hide-under-900px">Col3</td>
    </tr>
</table>

CSS：

@media screen and (min-width: 900px) {
    .show-under-900px {
        display: none;
    }
    .hide-under-900px {
        display: table-cell;
    }
}
@media screen and (max-width: 900px) {
    .show-under-900px {
        display: table-cell;
    }
    .hide-under-900px {
        display: none;
    }
}

Answer 3

我已经基于控制器解决了这个问题，该控制器根据宽度更改了值，我不记得为什么使用媒体查询不是一个选项，但在这里它是：

angular.module('app')
.controller('mobileController', function ($scope, $window) {

    var mobileWidth = 768;

    $scope.isMobile = function(){
        $scope.mobile = false;
        if(document.body.clientWidth <= mobileWidth){
            $scope.mobile = true;
        }
    };

    angular.element($window).bind('load resize', function(){
        $scope.$apply(function() {
            $scope.isMobile();
        });
    });
});

然后您可以使用基于$ scope.mobile的ng-show。希望这有帮助

Angular：根据屏幕分辨率切换HTML

3 个答案: