角度：根据屏幕分辨率切换HTML

Question

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

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

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。 希望这可以帮助