반응형으로 만드려다보니 css와 javascript 부분이 변환해야할 경우가 생긴다.
AngularJS를 쓸 경우에는 이런 식으로 코드를 짜도 되고, 자바스크립트로만 할 경우, 밑 코드만 봐도 javascipt로 변환하는 건 어렵지 않을꺼 같다.
참조 : https://github.com/paul-hammant/angular_instead_of_media_queries
function ResponsiveDemoCtrl($scope, $window) {
$scope.oneColumn = false;
$scope.width = 0;
$scope.height = 0;
$scope.leftMarginStyle = {};
$scope.rightMarginStyle = {};
$scope.middleStyle = {};
$scope.updateWidth = function() {
$scope.width = $window.innerWidth;
}
$scope.updateHeight = function() {
$scope.height = $window.innerHeight;
}
$scope.columnAdjustments = function() {
if ($scope.width < 768) {
$scope.oneColumn = true;
var mid = $scope.width - 30;
$scope.leftMarginStyle = { width: '15px', maxWidth: '15px' };
$scope.middleStyle = { width: mid + 'px', maxWidth: mid + 'px', };
$scope.rightMarginStyle = { width: '15px', maxWidth: '15px', verticalAlign: 'text-top' };
} else if ($scope.width >= 1024 ){
$scope.oneColumn = false;
var mid = 614;
var margin = ($scope.width - 614) * 0.5;
$scope.leftMarginStyle = { width: margin + 'px' };
$scope.middleStyle = { width: mid + 'px', maxWidth: mid + 'px', };
$scope.rightMarginStyle = { width: margin + 'px', verticalAlign: 'text-top' };
} else {
$scope.oneColumn = false;
var pc20 = Math.round($scope.width * 0.2);
var pc60 = Math.round($scope.width * 0.6)
$scope.leftMarginStyle = { width: pc20 + 'px' };
$scope.middleStyle = { width: pc60 + 'px', maxWidth: pc60 + 'px', };
$scope.rightMarginStyle = { width: pc20 + 'px', verticalAlign: 'text-top' };
}
}
$scope.updateWidth();
$scope.updateHeight();
$scope.columnAdjustments();
$window.onresize = function () {
$scope.updateWidth();
$scope.updateHeight();
$scope.columnAdjustments();
$scope.$apply();
}
}
