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

时间:2015-09-28 10:07:15

标签: javascript css angularjs html5

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

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

3 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:1)

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

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;
    }
}

答案 2 :(得分:0)

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

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